Default dark mode setup

2026-03-24 18:16:07 +01:00
parent 8c9ae1be00
commit 16b28f5e12
5 changed files with 209 additions and 3 deletions
--- a/index.html
+++ b/index.html
@@ -10,6 +10,54 @@
 </head>

 <body>
+    <script>
+        let initialTheme = localStorage.getItem("theme");
+        const darkModeMq = window.matchMedia("(prefers-color-scheme: dark)");
+
+        // Initial paint from localstorage
+        switch (initialTheme) {
+            case "light":
+                enableLightTheme();
+                break;
+            case "system":
+                resetTheme();
+                break;
+            case "dark":
+            default:
+                enableDarkTheme();
+                break;
+        }
+
+        // Enables dark theme and updates preferences
+        function enableDarkTheme() {
+            document.documentElement.classList.add('dark');
+            document.documentElement.classList.remove('light');
+            localStorage.setItem("theme", "dark");
+        }
+
+        // Enables light theme and updates preferences
+        function enableLightTheme() {
+            document.documentElement.classList.add('light');
+            document.documentElement.classList.remove('dark');
+            localStorage.setItem("theme", "light");
+        }
+
+        // Reset theme to OS values
+        function resetTheme() {
+            const prefersDark = darkModeMq.matches;
+
+            if (prefersDark) {
+                document.documentElement.classList.add('dark');
+                document.documentElement.classList.remove('light');
+            } else {
+                document.documentElement.classList.add('light');
+                document.documentElement.classList.remove('dark');
+            }
+
+            localStorage.setItem("theme", "system");
+        }
+    </script>
+
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
 </body>