Dark mode option (#360)

* Dark mode test WIP

* Dark mode test refactoring with simple filtering and counter-filtering

* Add margin for the dark mode toggle

* Exclude images, videos, table borders

* Update CHANGELOG.md

* Update link in CHANGELOG.md

* Remove some comments

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 Back to [Readme](README.md).
 
+## [3.8.2] - 2024-10-30
+
+### Added
+
+* Dark mode
+
 ## [3.8.1] - 2024-09-12
 
 ### Changed
@@ -918,6 +924,8 @@ the core component is now the reporting engine that is the base for other forms
 
 Initial project version on GitHub and Maven Central.
 
+[3.8.2]: https://github.com/trivago/cluecumber-report-plugin/tree/v3.8.2
+
 [3.8.1]: https://github.com/trivago/cluecumber-report-plugin/tree/v3.8.1
 
 [3.8.0]: https://github.com/trivago/cluecumber-report-plugin/tree/v3.8.0

engine/src/main/resources/template/css/cluecumber.css

@@ -297,4 +297,23 @@ tr.even td, tr.odd td {
 
 .multiRunChildren {
     margin-top: 1rem;
-}
+}
+
+html.dark-mode {
+    filter: invert(100%) hue-rotate(180deg);
+}
+
+html.dark-mode img,
+html.dark-mode video,
+html.dark-mode .color-passed,
+html.dark-mode .color-failed,
+html.dark-mode .color-skipped,
+html.dark-mode .border-color-passed,
+html.dark-mode .border-color-failed,
+html.dark-mode .border-color-skipped{
+    filter: invert(100%) hue-rotate(180deg);
+}
+
+#dark-mode-toggle {
+    margin-right: 10px;
+}

engine/src/main/resources/template/macros/navigation.ftl

@@ -61,6 +61,7 @@ limitations under the License.
                 </li>
             </#list>
             </ul>
+            <button id="dark-mode-toggle" class="btn btn-secondary btn-sm">Toggle Dark Mode</button>
             <span class="text-light">${reportDetails.date}</span>
         </div>
     </nav>

engine/src/main/resources/template/snippets/js.ftl

@@ -125,9 +125,29 @@ limitations under the License.
             if (${expandPreviousScenarioRuns?c}) {
                 $("[data-cluecumber-item='multi-run-button']").click();
             }
+
+            const isDarkMode = localStorage.getItem('darkMode') === 'enabled';
+            if (isDarkMode) {
+                document.documentElement.classList.add('dark-mode');
+            }
+            updateToggleButton(isDarkMode);
+
+            document.getElementById('dark-mode-toggle').addEventListener('click', toggleDarkMode);
         }
     );
 
+    function toggleDarkMode() {
+        document.documentElement.classList.toggle('dark-mode');
+        const isDarkMode = document.documentElement.classList.contains('dark-mode');
+        localStorage.setItem('darkMode', isDarkMode ? 'enabled' : 'disabled');
+        updateToggleButton(isDarkMode);
+    }
+
+    function updateToggleButton(isDarkMode) {
+        const button = document.getElementById('dark-mode-toggle');
+        button.textContent = isDarkMode ? 'Toggle Light Mode' : 'Toggle Dark Mode';
+    }
+
     function resizeIframe(iframe) {
         setInterval(function () {
             try {

examples/maven-example/pom.xml

@@ -6,7 +6,7 @@
 
     <groupId>blog.softwaretester</groupId>
     <artifactId>maven-example</artifactId>
-    <version>3.8.1</version>
+    <version>3.8.2</version>
     <packaging>pom</packaging>
 
     <properties>

pom.xml

@@ -21,7 +21,7 @@
     </modules>
 
     <properties>
-        <revision>3.8.1</revision>
+        <revision>3.8.2</revision>
         <maven.compiler.source>11</maven.compiler.source>
         <maven.compiler.target>11</maven.compiler.target>
         <maven.compiler.release>11</maven.compiler.release>