feat: add light/dark theme with settings page

2026-09-10 10:02:43 +02:00
parent 56d9fa680c
commit a593e5c63a
20 changed files with 486 additions and 160 deletions
@@ -1,11 +1,34 @@
 <!doctype html>
-<html lang="en" class="bg-gray-900">
+<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#00ff00" />
-    <title>fontend</title>
+    <meta name="theme-color" content="#111827" />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f1f5f9" />
+    <title>Kickern</title>
+    <script>
+      // Apply the saved theme (light/dark/auto) before first paint to avoid a flash
+      // of the wrong theme. Mirrors src/stores/themeStore.ts.
+      (function () {
+        try {
+          var stored = localStorage.getItem("theme");
+          var mode =
+            stored === "light" || stored === "dark" || stored === "auto"
+              ? stored
+              : "auto";
+          var dark =
+            mode === "dark" ||
+            (mode === "auto" &&
+              window.matchMedia("(prefers-color-scheme: dark)").matches);
+          var root = document.documentElement;
+          root.classList.toggle("dark", dark);
+          root.style.colorScheme = dark ? "dark" : "light";
+        } catch (e) {
+          /* ignore */
+        }
+      })();
+    </script>
  </head>
  <body>
    <div id="root"></div>