Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: dark mode

Browse Source
This commit is contained in:
ISA
2025-09-08 15:01:34 +02:00
parent 12d3a17f60
commit d163df0d96
30 changed files with 380 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/header/Header.tsx
View File

@@ -109,48 +109,43 @@ function Header() {
}, [deviceName, dispatch]);
//----------------------------------------------------------------
// Dark/Light Mode Toggle (persist in localStorage)
const [isDark, setIsDark] = useState<boolean>(() => {
if (typeof window !== "undefined") {
return document.documentElement.classList.contains("dark");
}
return false;
});
// Dark/Light Mode Toggle (persisted)
const [isDark, setIsDark] = useState(false);
// Initial state from html class / localStorage (set by _document script before hydration)
useEffect(() => {
if (typeof window === "undefined") return;
const html = document.documentElement;
const stored = localStorage.getItem("theme");
const active = stored ? stored === "dark" : html.classList.contains("dark");
setIsDark(active);
}, []);
// Apply + persist when toggled
useEffect(() => {
if (typeof window === "undefined") return;
const html = document.documentElement;
if (isDark) {
html.classList.add("dark");
try {
localStorage.setItem("theme", "dark");
} catch {
/* ignore storage write errors */
}
localStorage.setItem("theme", "dark");
} else {
html.classList.remove("dark");
try {
localStorage.setItem("theme", "light");
} catch {
/* ignore storage write errors */
}
localStorage.setItem("theme", "light");
}
}, [isDark]);
// Sync if another tab changes the theme
// Keyboard shortcut Alt + D to toggle theme
useEffect(() => {
const handler = (e: StorageEvent) => {
if (e.key === "theme" && e.newValue) {
setIsDark(e.newValue === "dark");
const handler = (e: KeyboardEvent) => {
if (e.altKey && (e.key === "d" || e.key === "D")) {
e.preventDefault();
setIsDark((d) => !d);
}
};
window.addEventListener("storage", handler);
return () => window.removeEventListener("storage", handler);
window.addEventListener("keydown", handler);
return () => window.removeEventListener("keydown", handler);
}, []);
return (
<header className="bg-gray-300 dark:bg-gray-800 flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-black dark:text-white ">
<header className="bg-[var(--color-surface)] dark:bg-[var(--color-surface)]/90 backdrop-blur flex justify-between items-center w-full h-[13vh] laptop:h-[10vh] relative text-[var(--color-fg)] dark:text-[var(--color-fg)] shadow-sm border-b border-[var(--color-border)]">
<div
className="absolute transform -translate-y-1/2
left-[8%] sm:left-[8%] md:left-[8%] lg:left-[8%] xl:left-[6%] 2xl:left-[2%] laptop:left-[4%] laptop:
@@ -181,10 +176,10 @@ function Header() {
priority
/>
<div className="flex flex-col leading-tight whitespace-nowrap">
<h2 className="text-xl laptop:text-base xl:text-lg font-bold text-gray-900 dark:text-gray-100">
<h2 className="text-xl laptop:text-base xl:text-lg font-bold text-[var(--color-fg)]">
Meldestation
</h2>
<p className="text-gray-600 dark:text-gray-300 text-lg laptop:text-sm xl:text-base truncate max-w-[20vw]">
<p className="text-[var(--color-fg-muted)] text-lg laptop:text-sm xl:text-base truncate max-w-[20vw]">
{deviceName}
</p>
</div>
@@ -196,19 +191,13 @@ function Header() {
<button
aria-label={isDark ? "Light Mode" : "Dark Mode"}
onClick={() => setIsDark((d) => !d)}
className="rounded-full p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition"
className="rounded-full p-2 bg-[var(--color-surface-alt)]/80 hover:bg-[var(--color-surface-alt)] dark:bg-[var(--color-surface-alt)]/60 dark:hover:bg-[var(--color-surface-alt)] transition border border-[var(--color-border)]"
title={isDark ? "Light Mode" : "Dark Mode"}
>
{isDark ? (
<Icon
icon="mdi:weather-night"
className="text-xl text-yellow-300"
/>
<Icon icon="mdi:weather-night" className="text-xl text-yellow-300" />
) : (
<Icon
icon="mdi:white-balance-sunny"
className="text-xl text-yellow-500"
/>
<Icon icon="mdi:white-balance-sunny" className="text-xl text-yellow-500" />
)}
</button>
</div>
@@ -219,7 +208,7 @@ function Header() {
<button
onClick={handleLogout}
aria-label="Abmelden"
className="bg-littwin-blue text-white px-4 py-2 rounded"
className="px-4 py-2 rounded bg-[var(--color-accent)] text-white hover:brightness-110 shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-ring)] focus:ring-offset-2 focus:ring-offset-[var(--color-background)] transition"
>
Abmelden
</button>
@@ -229,7 +218,7 @@ function Header() {
{/* Warnhinweis, wenn der Admin angemeldet ist */}
{isAdminLoggedIn && (
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-full xl:w-1/4 2xl:w-1/4 h-8 bg-yellow-400 text-center py-2 text-black font-bold">
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 w-full xl:w-1/4 2xl:w-1/4 h-8 bg-[var(--color-warning)] text-center py-2 text-black font-bold tracking-wide">
Admin-Modus aktiv
</div>
)}