feature: improves theme toggle

updated theme toggle to include auto mode if users prefer dark mode.
edheltzel · Aug 6, 2024 · 820b3a9 · 820b3a9
1 parent 049274a
commit 820b3a9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en"
 x-data="theme"
-:data-theme="[darkMode ? 'dark' : 'light']"
+:data-theme="[isDarkMode ? 'dark' : 'light']"
 >
   <head>
     {%- include "partials/meta.njk" -%}

diff --git a/src/assets/js/components/toggle-theme.js b/src/assets/js/components/toggle-theme.js
@@ -6,15 +6,24 @@
  */
 export default function toggleTheme() {
   return {
-    /** @type {boolean} */
-    darkMode: localStorage.getItem("darkMode") === "true",
+    darkMode: localStorage.getItem("themeMode") || "auto",
 
-    /**
-     * Toggle dark mode
-     */
-    toggleDarkMode() {
-      this.darkMode = !this.darkMode;
-      localStorage.setItem("darkMode", String(this.darkMode));
+    get isDarkMode() {
+      if (this.darkMode === "auto") {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches;
+      }
+      return this.darkMode === "dark";
     },
+
+    toggleDarkMode() {
+      // If it's auto, set it based on current system preference
+      if (this.darkMode === "auto") {
+        this.darkMode = this.isDarkMode ? "light" : "dark";
+      } else {
+        // Simply toggle between dark and light
+        this.darkMode = this.darkMode === "dark" ? "light" : "dark";
+      }
+      localStorage.setItem("themeMode", this.darkMode);
+    }
   };
 }