feature(Report): add dark-mode option (#72)

.github/workflows/docs.yaml

@@ -14,7 +14,7 @@ jobs:
       - name: Install Supplemental Dependencies
         run: npm i
       - name: Build
-        run: node ./.github/workflows/regenerateDocsReport.js
+        run: npm run build:docs
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:

.github/workflows/regenerateDocsReport.js

@@ -5,5 +5,13 @@ const Generator = require('../../src/Generator');
 
 const FILE_ENCODING = 'utf-8';
 
-const report = new Generator().generate(path.resolve(__dirname, '../../'), 'cucumber-forge-report-generator')
-fs.writeFileSync(path.resolve(__dirname, '../../docs/index.html'), report, FILE_ENCODING);
+const featuresDir = path.resolve(__dirname, '../../');
+const report = new Generator().generate(featuresDir, 'cucumber-forge-report-generator')
+
+// Create /docs if it doesn't exist
+const outputDir = path.resolve(__dirname, '../../docs');
+if (!fs.existsSync(outputDir)){
+    fs.mkdirSync(outputDir);
+}
+const filePath = path.resolve(outputDir, 'index.html');
+fs.writeFileSync(filePath, report, FILE_ENCODING);

package.json

@@ -9,7 +9,8 @@
     "lint": "eslint src --color",
     "lint:fix": "eslint src --color --fix",
     "build:types": "tsc -p tsconfig.declaration.json",
-    "prepublishOnly": "npm run build:types"
+    "prepublishOnly": "npm run build:types",
+    "build:docs": "node ./.github/workflows/regenerateDocsReport.js"
   },
   "repository": {
     "type": "git",

src/templates/doc_template.html

@@ -24,7 +24,11 @@
       </div>
       <div id="sidenavFooter">
         <div id="settingsDrawer">
-          <input type="checkbox" id="tagsCheckbox"><label for="tagsCheckbox">Show Tags</label>
+          <form>
+            <input type="checkbox" id="tagsCheckbox"><label for="tagsCheckbox">Show Tags</label>
+            <br />
+            <input type="checkbox" id="darkModeCheckbox"><label for="darkModeCheckbox">Dark Mode</label>
+          </form>
           <p>Icons courtesy of <a href="https://fontawesome.com/license/free" target="_blank" rel="noopener"><i class="fab fa-font-awesome" title="FontAwesome"></i></a>
           licensed under <a href="https://creativecommons.org/licenses/by/4.0/legalcode" target="_blank" rel="noopener"><i class="fab fa-creative-commons" title="Creative Commons"></i><i class="fab fa-creative-commons-by" title="CC BY"></i></a>.</p>
         </div>

src/templates/scripts.js

@@ -126,7 +126,25 @@ const tagsCheckboxClicked = () => {
   toggleTagDisplay();
   if (persistentSettingsEnabled) {
     const { localStorage } = window;
-    localStorage.cfDisplayTags = localStorage.cfDisplayTags != null && localStorage.cfDisplayTags === 'true' ? 'false' : 'true';
+    const currentState = localStorage.getItem('cfDisplayTags');
+    localStorage.setItem('cfDisplayTags', currentState != null && currentState === 'true' ? 'false' : 'true');
+  }
+};
+
+const toggleDarkModeDisplay = () => {
+  if (document.body.classList.contains('dark')) {
+    document.body.classList.remove('dark');
+  } else {
+    document.body.classList.add('dark');
+  }
+};
+
+const darkModeClicked = () => {
+  toggleDarkModeDisplay();
+  if (persistentSettingsEnabled) {
+    const { localStorage } = window;
+    const currentState = localStorage.getItem('darkMode') || 'false';
+    localStorage.setItem('darkMode', currentState === 'false' ? 'true' : 'false');
   }
 };
 
@@ -178,6 +196,10 @@ const init = () => {
   if (tagsCheckbox) {
     tagsCheckbox.addEventListener('click', tagsCheckboxClicked);
   }
+  const darkModeCheckbox = document.getElementById('darkModeCheckbox');
+  if (darkModeCheckbox) {
+    darkModeCheckbox.addEventListener('click', darkModeClicked);
+  }
 
   // Open the identified feature/scenario (if specified in the URL) else open the first feature
   const { hash } = window.location;
@@ -224,12 +246,18 @@ const init = () => {
   if (persistentSettingsEnabled) {
     // Display the tags if necessary
     const { localStorage } = window;
-    if (localStorage.cfDisplayTags != null && localStorage.cfDisplayTags === 'true') {
+    if (localStorage.getItem('cfDisplayTags') != null && localStorage.getItem('cfDisplayTags') === 'true') {
       toggleTagDisplay();
       if (tagsCheckbox) {
         tagsCheckbox.checked = 'true';
       }
     }
+    if (localStorage.getItem('darkMode') !== null && localStorage.getItem('darkMode') === 'true') {
+      toggleDarkModeDisplay();
+      if (darkModeCheckbox) {
+        darkModeCheckbox.checked = 'true';
+      }
+    }
   }
 };
 

src/templates/style.css

@@ -245,3 +245,38 @@ i.fa-angle-right, i.fa-angle-down {
   border: 0;
   margin-top: 1em;
 }
+
+/* Dark mode support */
+body.dark {
+  background-color: #272525;
+}
+
+.dark .main {
+  color: white;
+}
+
+.dark .feature-button, .dark .scenario-button {
+  color: #ccc;
+  background-color: #23272A;
+}
+
+.dark .feature-button.active, .dark .feature-button:hover {
+  background-color: #272525;
+  border-bottom-color: #23272A;
+  color: #fff;
+  font-weight: normal;
+}
+
+.dark .scenario-button.active, .dark .scenario-button:hover {
+  color: #fff;
+  background-color: #3c3d41;
+  font-weight: normal;
+}
+
+body.dark .feature-button.active, body.dark .feature-button:hover {
+  border-bottom-color: #23272A;
+}
+
+body.dark .scenario-button {
+  border-right-color: #23272A;
+}