feat(web): mount ThemeSwitch in header + pre-paint theme init (#59)

2026-06-07 16:37:04 +02:00
parent 6d17e5f84d
commit 4f3db60ed2
2 changed files with 12 additions and 0 deletions
@@ -4,6 +4,16 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Collection</title>
+    <script>
+      try {
+        var t = localStorage.getItem("theme") || "system";
+        var dark =
+          t === "dark" ||
+          (t === "system" &&
+            window.matchMedia("(prefers-color-scheme: dark)").matches);
+        document.documentElement.classList.toggle("dark", dark);
+      } catch (e) {}
+    </script>
  </head>
  <body>
    <div id="root"></div>
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useLogout } from "../api/queries";
 import { Button } from "@/components/ui/button";
 import { LangSwitch } from "./lang-switch";
+import { ThemeSwitch } from "./theme-switch";
 import { Sidebar } from "./sidebar";

 export function AppShell() {
@@ -22,6 +23,7 @@ export function AppShell() {
      <div className="flex flex-1 flex-col">
        <header className="flex items-center gap-4 border-b px-4 py-2">
          <div className="flex-1" />
+          <ThemeSwitch />
          <LangSwitch />
          <Button variant="ghost" size="sm" onClick={onSignOut}>
            {t("auth.signOut")}