feat(HTML reporter): Dark mode support 🌑 (#2590)

stryker-mutator · Oct 29, 2020 · ca9a513 · ca9a513
1 parent 4a510a6
commit ca9a513
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -71,7 +71,7 @@
     "log4js": "~6.2.1",
     "minimatch": "~3.0.4",
     "mkdirp": "~1.0.3",
-    "mutation-testing-elements": "~1.4.0",
+    "mutation-testing-elements": "~1.4.1",
     "mutation-testing-metrics": "~1.4.0",
     "npm-run-path": "~4.0.1",
     "progress": "~2.0.0",

diff --git a/packages/core/src/reporters/html/templates/index.html b/packages/core/src/reporters/html/templates/index.html
@@ -13,6 +13,14 @@
         Your browser doesn't support <a href="https://caniuse.com/#search=custom%20elements">custom elements</a>.
         Please use a latest version of an evergreen browser (Firefox, Chrome, Safari, Opera, etc).
     </mutation-test-report-app>
+    <script>
+        const app = document.getElementsByTagName('mutation-test-report-app').item(0)
+        function updateTheme() {
+            document.body.style.backgroundColor = app.theme === 'dark' ? '#222' : '#fff';
+        }
+        app.addEventListener('theme-changed', updateTheme);
+        updateTheme();
+    </script>
     <script src="bind-mutation-test-report.js"></script>
 </body>