Add a dark mode toggle

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>
This commit is contained in:
bobbanandClaude Sonnet 5 committed 2026-09-19 01:51:59 +02:00
1 parent 82ed25b63f
commit 5c35080e22
3 files changed
+48

No files matched your search

+14
View File
@@ -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>