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

4
pages/_app.tsx
View File

@@ -148,11 +148,11 @@ function AppContent({
}, [pathname, dispatch]);
return (
<div className="flex flex-col h-screen overflow-hidden bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<div className="flex flex-col h-screen overflow-hidden bg-[var(--color-background)] text-[var(--color-fg)]">
<Header />
<div className="flex flex-grow w-full">
<Navigation className="w-56" />
<main className="w-full flex-grow bg-white dark:bg-gray-900">
<main className="w-full flex-grow bg-[var(--color-surface)] dark:bg-[var(--color-surface)] border-l border-[var(--color-border)]">
{sessionExpired && (
<div className="bg-red-500 text-white p-4 text-center">
❌ Ihre Sitzung ist abgelaufen oder die Verbindung ist

24
pages/_document.tsx
View File

@@ -1,26 +1,22 @@
import { Html, Head, Main, NextScript } from "next/document";
/**
* Custom Document to inject an early theme script so the dark-mode preference
* (stored in localStorage under key 'theme': 'dark' | 'light') is applied
* before the first paint. This verhindert ein "Flash" von Light-Mode beim
* Seitenwechsel / Reload in der statisch gebauten Produktion.
*/
export default function Document() {
const setThemeScript = `(()=>{try{const k='theme';const t=localStorage.getItem(k);const m=window.matchMedia('(prefers-color-scheme: dark)').matches;const useDark = t? t==='dark' : m;const c=document.documentElement.classList;useDark?c.add('dark'):c.remove('dark');}catch(e){/* ignore */}})();`;
return (
<Html lang="de">
<Head>
{/* Füge Meta-Tags, CSS-Links und andere Header-Inhalte hier hinzu */}
<link rel="icon" href="/favicon.png" type="image/png" />
{/* Early inline script (no external blocking) */}
<script
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: setThemeScript }}
/>
</Head>
<body>
<Main />
<NextScript />
{/* Theme init (executed before React hydration) */}
<script
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{
__html: `(() => { try { const ls = localStorage.getItem('theme'); const mql = window.matchMedia('(prefers-color-scheme: dark)'); const wantDark = ls === 'dark' || (!ls && mql.matches); if (wantDark) document.documentElement.classList.add('dark'); } catch(e) {} })();`,
}}
/>
<Main /> {/* Hier wird der Seiteninhalt eingebettet */}
<NextScript /> {/* Fügt Next.js-Skripte für die Seite hinzu */}
</body>
</Html>
);