Color theme switcher and automatic dark mode based on browser prefers…

…-color-scheme (#83)

* Add color mode switcher

* Add darkmode to syntax highlighter

* yarn build

assets/js/color_mode_switcher.js

@@ -0,0 +1,50 @@
+"use strict";
+
+/**
+ * Get user preferred theme from their past choice or browser
+ * @returns {String} User preferred theme
+ */
+function getPreferredTheme() {
+  const storedTheme = localStorage.getItem("theme");
+  if (storedTheme) {
+    return storedTheme;
+  }
+  // Firefox with 'resistFingerprint' activated always returns light
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+/**
+ * Update navbar icon to match given theme.
+ * @param {String} theme - 'dark' or 'light'
+ */
+function showActiveTheme(theme) {
+  const activeThemeIcon = document.querySelector(".theme-switch i.fas");
+  activeThemeIcon.classList.toggle("fa-moon", theme === "dark");
+  activeThemeIcon.classList.toggle("fa-sun", theme !== "dark");
+}
+
+// Change body theme early to prevent flash
+let currentTheme = getPreferredTheme();
+document.documentElement.setAttribute("data-bs-theme", currentTheme);
+
+// On browser color-scheme change, update
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+  currentTheme = getPreferredTheme();
+  document.documentElement.setAttribute("data-bs-theme", currentTheme);
+  showActiveTheme(currentTheme);
+});
+
+window.addEventListener("load", () => {
+  showActiveTheme(currentTheme);
+
+  // On button click, switch
+  document.querySelectorAll(".theme-switch").forEach(e => {
+    e.addEventListener("click", ev => {
+      currentTheme = currentTheme === "light" ? "dark" : "light";
+      document.documentElement.setAttribute("data-bs-theme", currentTheme);
+      localStorage.setItem("theme", currentTheme);
+      showActiveTheme(currentTheme);
+      ev.preventDefault();
+    });
+  });
+});

assets/scss/includes/utils/_lolight.scss

@@ -16,15 +16,38 @@
 }
 .ll-pct {
   /* operators, punctation */
-  color: #0550ae;
+  color: #24292f;
 }
 .ll-key {
   /* keywords */
   color: #d73a49;
-  font-weight: normal;
 }
 .ll-com {
   /* comments */
   color: #6a737d;
   font-style: italic;
 }
+
+[data-bs-theme="dark"] {
+  .ll-nam {
+    color: #c9d1d9;
+  }
+  .ll-num {
+    color: #79c0ff;
+  }
+  .ll-str {
+    color: #a5d6ff;
+  }
+  .ll-rex {
+    color: #96cefb;
+  }
+  .ll-pct {
+    color: #c9d1d9;
+  }
+  .ll-key {
+    color: #ff7b72;
+  }
+  .ll-com {
+    color: #8b949e;
+  }
+}

static/manifest.json

@@ -116,6 +116,11 @@
       "assets/js/index.js"
     ]
   },
+  "assets/js/color_mode_switcher.js": {
+    "file": "assets/color_mode_switcher.52334129.js",
+    "src": "assets/js/color_mode_switcher.js",
+    "isEntry": true
+  },
   "_echarts.128204f2.js": {
     "file": "assets/echarts.128204f2.js"
   },
@@ -140,7 +145,7 @@
     ]
   },
   "assets/scss/main.scss": {
-    "file": "assets/main.dad26364.css",
+    "file": "assets/main.ec6ebc81.css",
     "src": "assets/scss/main.scss",
     "isEntry": true
   }

templates/base.html

@@ -14,6 +14,8 @@
 
   {{ Plugins.styles }}
 
+  {{ Assets.js("assets/js/color_mode_switcher.js", defer=False) }}
+
   <script type="text/javascript">
       window.init = {
           'urlRoot': "{{ request.script_root }}",
@@ -22,7 +24,7 @@
           'userId': {{ Session.id }},
           'userName': {{ User.name | tojson }},
           'userEmail': {{ User.email | tojson }},
-          'teamId': {{ Team.id | tojson }}, 
+          'teamId': {{ Team.id | tojson }},
           'teamName': {{ Team.name | tojson }},
           'start': {{ Configs.start | tojson }},
           'end': {{ Configs.end | tojson }},

templates/components/navbar.html

@@ -171,6 +171,17 @@
             </a>
           </li>
         {% endif %}
+        <li class="nav-item">
+          <button class="nav-link theme-switch" type="button">
+            <span data-bs-toggle="tooltip" data-bs-placement="bottom" title="{% trans %}Toggle theme{% endtrans %}">
+              <i class="fas fa-sun d-none d-md-inline"></i>
+            </span>
+            <span class="d-sm-inline d-md-none">
+              <i class="fas fa-sun pe-1"></i>
+              {% trans %}Toggle theme{% endtrans %}
+            </span>
+          </button>
+        </li>
       </ul>
     </div>
   </div>

vite.config.js

@@ -63,6 +63,7 @@ export default defineConfig({
         users_private: resolve(__dirname, "assets/js/users/private.js"),
         users_list: resolve(__dirname, "assets/js/users/list.js"),
         main: resolve(__dirname, "assets/scss/main.scss"),
+        color_mode_switcher: resolve(__dirname, "assets/js/color_mode_switcher.js"),
       },
     },
   },