WIP: dark mode

2025-09-08 13:14:04 +02:00
parent a596422056
commit eb0585072d
7 changed files with 59 additions and 16 deletions
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -1,15 +1,26 @@
 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 /> {/* Hier wird der Seiteninhalt eingebettet */}
-        <NextScript /> {/* Fügt Next.js-Skripte für die Seite hinzu */}
+        <Main />
+        <NextScript />
      </body>
    </Html>
  );