feat: add darkmode toggle

Author: crowlKats

src/html/mod.rs

@@ -72,6 +72,10 @@ const FUSE_FILENAME: &str = "fuse.js";
 const SEARCH_JS: &str = include_str!("./templates/pages/search.js");
 const SEARCH_FILENAME: &str = "search.js";
 
+const DARKMODE_TOGGLE_JS: &str =
+  include_str!("./templates/pages/darkmode_toggle.js");
+const DARKMODE_TOGGLE_FILENAME: &str = "darkmode_toggle.js";
+
 fn setup_hbs() -> Result<Handlebars<'static>, anyhow::Error> {
   let mut reg = Handlebars::new();
   reg.register_escape_fn(|str| html_escape::encode_safe(str).into_owned());
@@ -227,6 +231,14 @@ fn setup_hbs() -> Result<Handlebars<'static>, anyhow::Error> {
     "icons/menu",
     include_str!("./templates/icons/menu.svg"),
   )?;
+  reg.register_template_string(
+    "icons/sun",
+    include_str!("./templates/icons/sun.svg"),
+  )?;
+  reg.register_template_string(
+    "icons/moon",
+    include_str!("./templates/icons/moon.svg"),
+  )?;
 
   Ok(reg)
 }
@@ -1153,6 +1165,7 @@ pub fn generate(
   files.insert(RESET_STYLESHEET_FILENAME.into(), RESET_STYLESHEET.into());
   files.insert(FUSE_FILENAME.into(), FUSE_JS.into());
   files.insert(SEARCH_FILENAME.into(), SEARCH_JS.into());
+  files.insert(DARKMODE_TOGGLE_FILENAME.into(), DARKMODE_TOGGLE_JS.into());
   #[cfg(feature = "comrak")]
   files.insert(
     comrak::COMRAK_STYLESHEET_FILENAME.into(),

src/html/pages.rs

@@ -15,6 +15,7 @@ use std::borrow::Cow;
 use std::cmp::Ordering;
 use std::rc::Rc;
 
+use super::DARKMODE_TOGGLE_FILENAME;
 use super::FUSE_FILENAME;
 use super::PAGE_STYLESHEET_FILENAME;
 use super::RESET_STYLESHEET_FILENAME;
@@ -39,7 +40,8 @@ pub struct HtmlHeadCtx {
   url_search_index: String,
   script_js: String,
   fuse_js: String,
-  url_search: String,
+  search_js: String,
+  darkmode_toggle_js: String,
   head_inject: Option<String>,
   disable_search: bool,
 }
@@ -73,7 +75,8 @@ impl HtmlHeadCtx {
       url_search_index: format!("{root}{SEARCH_INDEX_FILENAME}"),
       script_js: format!("{root}{SCRIPT_FILENAME}"),
       fuse_js: format!("{root}{FUSE_FILENAME}"),
-      url_search: format!("{root}{SEARCH_FILENAME}"),
+      search_js: format!("{root}{SEARCH_FILENAME}"),
+      darkmode_toggle_js: format!("{root}{DARKMODE_TOGGLE_FILENAME}"),
       head_inject: ctx.head_inject.clone().map(|head_inject| head_inject(root)),
       disable_search: ctx.disable_search,
     }

src/html/templates/comrak.gen.css

@@ -0,0 +1,48 @@
+function setTheme(theme, themeToggle) {
+  if (theme === "dark") {
+    document.documentElement.classList.add("dark");
+    localStorage.setItem("theme", "dark");
+  } else {
+    document.documentElement.classList.remove("dark");
+    localStorage.setItem("theme", "light");
+  }
+
+  const darkIcon = themeToggle.children[0];
+  const lightIcon = themeToggle.children[1];
+
+  if (theme === "dark") {
+    darkIcon.classList.add("hidden");
+    lightIcon.classList.remove("hidden");
+  } else {
+    darkIcon.classList.remove("hidden");
+    lightIcon.classList.add("hidden");
+  }
+}
+
+window.addEventListener("load", () => {
+  const themeToggle = document.getElementById("theme-toggle");
+
+  const storedTheme = localStorage.getItem("theme");
+  const systemPrefersDark =
+    window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  if (storedTheme) {
+    setTheme(storedTheme, themeToggle);
+  } else {
+    setTheme(systemPrefersDark ? "dark" : "light", themeToggle);
+  }
+
+  if (themeToggle) {
+    themeToggle.addEventListener("click", () => {
+      const isDark = document.documentElement.classList.contains("dark");
+      setTheme(isDark ? "light" : "dark", themeToggle);
+    });
+  }
+});
+
+// prevent flash
+const theme = localStorage.getItem("theme") ||
+  (window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light");
+document.documentElement.classList.add(theme);

src/html/templates/icons/moon.svg

@@ -10,11 +10,13 @@
   <link id="ddocResetStylesheet" rel="stylesheet" href="{{reset_stylesheet_url}}">
   {{{~head_inject~}}}
 
+  <script src="{{script_js}}" defer></script>
+  <script src="{{darkmode_toggle_js}}"></script>
+
   {{~#if (not disable_search)~}}
     <script src="{{url_search_index}}" defer></script>
-    <script src="{{script_js}}" defer></script>
     <script src="{{fuse_js}}" defer></script>
-    <script src="{{url_search}}" defer></script>
+    <script src="{{search_js}}" defer></script>
   {{~/if~}}
 </head>
 <body>

src/html/templates/icons/sun.svg

@@ -82,3 +82,17 @@ body {
     }
   }
 }
+
+#topnav {
+  @apply top-0 sticky z-50 py-3 h-14 bg-white/10 dark:bg-backgroundDark/90
+    dark:text-white/90 border-b border-gray-300 dark:border-gray-700;
+}
+
+#theme-toggle {
+  @apply text-gray-500 dark:text-gray-400 hover:bg-gray-100
+    dark:hover:bg-gray-700 rounded p-1.5;
+
+  * {
+    @apply size-5;
+  }
+}

src/html/templates/pages/darkmode_toggle.js

@@ -1,6 +1,7 @@
 import { type Config } from "npm:tailwindcss@3.4.3";
 
 export default {
+  darkMode: "class",
   theme: {
     extend: {
       colors: {

src/html/templates/pages/html_head.hbs

@@ -1,18 +1,23 @@
-<nav
-  class="top-0 sticky z-50 py-3 h-14 bg-white/10 dark:bg-backgroundDark/90 dark:text-white/90 border-b border-gray-300 dark:border-gray-700"
-  id="topnav">
+<nav id="topnav">
   <div class="h-full">
-    <div>
+    <div class="flex items-center">
       {{~> breadcrumbs breadcrumbs_ctx ~}}
     </div>
 
-    {{#if (not disable_search)}}
-      <input
-        type="text"
-        id="searchbar"
-        style="display: none;"
-        class="py-2 px-2.5 mx-1 rounded text-sm border border-gray-300 bg-transparent dark:bg-gray-800 dark:border-gray-700"
-        />
-    {{/if}}
+    <div class="flex items-center gap-2">
+      <button id="theme-toggle" type="button" aria-label="Toggle dark mode">
+        {{~> icons/moon ~}}
+        {{~> icons/sun class="hidden" ~}}
+      </button>
+
+      {{#if (not disable_search)}}
+        <input
+          type="text"
+          id="searchbar"
+          style="display: none;"
+          class="py-2 px-2.5 mx-1 rounded text-sm border border-gray-300 bg-transparent dark:bg-gray-800 dark:border-gray-700"
+          />
+      {{/if}}
+    </div>
   </div>
 </nav>

src/html/templates/pages/page.css

@@ -41,6 +41,7 @@ export default {
     "./src/html/**/*.rs",
     "./src/html/templates/*.hbs",
   ],
+  darkMode: "class",
   safelist: [
     {
       pattern: new RegExp(`^text-(${Object.keys(extraColors).join("|")})$`),

src/html/templates/pages/page.gen.css

@@ -193,6 +193,7 @@ async fn html_doc_dts() {
       "./~/WebSocket.html",
       "./~/WebSocket.prototype.html",
       "comrak.css",
+      "darkmode_toggle.js",
       "fuse.js",
       "page.css",
       "reset.css",
@@ -247,6 +248,7 @@ async fn html_doc_files_single() {
       "./~/Foobar.html",
       "./~/Foobar.prototype.html",
       "comrak.css",
+      "darkmode_toggle.js",
       "fuse.js",
       "page.css",
       "reset.css",
@@ -380,6 +382,7 @@ async fn html_doc_files_multiple() {
       "comrak.css",
       "d/index.html",
       "d/~/externalFunction.html",
+      "darkmode_toggle.js",
       "foo/index.html",
       "foo/~/default.html",
       "foo/~/x.html",