From 5c35080e22210e99c381bbec3151b6aa585d4d84 Mon Sep 17 00:00:00 2001
From: Bobban Rydh <bobban@tooweb.se>
Date: Sat, 19 Sep 2026 01:51:59 +0200
Subject: [PATCH] Add a dark mode toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Personal, per-browser preference (localStorage), not an admin-wide
Display setting like date/time format — every role can pick their own.
Sets data-bs-theme on <html> to hook into Tabler's built-in dark
variant, applied via an inline script in index.html before React
mounts so there's no light-mode flash on load. Toggle button lives in
the sidebar footer next to Sign out.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 web/index.html              | 14 ++++++++++++++
 web/src/layout/AppShell.tsx | 18 ++++++++++++++++++
 web/src/utils/theme.ts      | 16 ++++++++++++++++
 3 files changed, 48 insertions(+)
 create mode 100644 web/src/utils/theme.ts

diff --git a/web/index.html b/web/index.html
index a5fa766..60151f2 100644
--- a/web/index.html
+++ b/web/index.html
@@ -4,6 +4,20 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Homelab Manager</title>
+    <script>
+      (function () {
+        try {
+          var stored = localStorage.getItem("hlm-theme");
+          var theme =
+            stored === "light" || stored === "dark"
+              ? stored
+              : window.matchMedia("(prefers-color-scheme: dark)").matches
+                ? "dark"
+                : "light";
+          document.documentElement.setAttribute("data-bs-theme", theme);
+        } catch (e) {}
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/web/src/layout/AppShell.tsx b/web/src/layout/AppShell.tsx
index 4d36ae2..39eddd1 100644
--- a/web/src/layout/AppShell.tsx
+++ b/web/src/layout/AppShell.tsx
@@ -18,8 +18,11 @@ import {
   IconStethoscope,
   IconSettings,
   IconMenu2,
+  IconSun,
+  IconMoon,
 } from "@tabler/icons-react";
 import type { CurrentUser } from "../api/client";
+import { getTheme, setTheme, type Theme } from "../utils/theme";
 
 interface NavItem {
   to: string;
@@ -51,10 +54,17 @@ const roleRank: Record<CurrentUser["role"], number> = { viewer: 0, operator: 1,
 
 export default function AppShell({ user, children }: { user: CurrentUser; children: ReactNode }) {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [theme, setThemeState] = useState<Theme>(() => getTheme());
   const visibleItems = NAV_ITEMS.filter(
     (item) => !item.minRole || roleRank[user.role] >= roleRank[item.minRole],
   );
 
+  function toggleTheme() {
+    const next: Theme = theme === "dark" ? "light" : "dark";
+    setTheme(next);
+    setThemeState(next);
+  }
+
   return (
     <div className="page">
       <aside className="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
@@ -87,6 +97,14 @@ export default function AppShell({ user, children }: { user: CurrentUser; childr
               ))}
             </ul>
             <div className="navbar-footer px-3">
+              <button
+                type="button"
+                className="btn btn-outline-secondary btn-sm w-100 mb-2 d-flex align-items-center justify-content-center gap-2"
+                onClick={toggleTheme}
+              >
+                {theme === "dark" ? <IconSun size={16} /> : <IconMoon size={16} />}
+                {theme === "dark" ? "Light mode" : "Dark mode"}
+              </button>
               <div className="text-secondary small mb-2">
                 Signed in as {user.name ?? user.email ?? user.sub} · {user.role}
               </div>
diff --git a/web/src/utils/theme.ts b/web/src/utils/theme.ts
new file mode 100644
index 0000000..b27a43e
--- /dev/null
+++ b/web/src/utils/theme.ts
@@ -0,0 +1,16 @@
+export type Theme = "light" | "dark";
+
+const THEME_KEY = "hlm-theme";
+
+export function getTheme(): Theme {
+  return document.documentElement.getAttribute("data-bs-theme") === "dark" ? "dark" : "light";
+}
+
+export function setTheme(theme: Theme): void {
+  document.documentElement.setAttribute("data-bs-theme", theme);
+  try {
+    localStorage.setItem(THEME_KEY, theme);
+  } catch {
+    // localStorage unavailable (private browsing etc.) — theme still applies for this page load
+  }
+}