adding appearance toggle (light/dark mode)

2026-05-03 10:17:12 +02:00
parent d5e3fcf438
commit eaea202c49
6 changed files with 145 additions and 16 deletions
@@ -63,6 +63,35 @@ export default function RootLayout({
 }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en-GB" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function () {
+                var key = "novarix-theme";
+                var root = document.documentElement;
+                var theme = "light";
+
+                try {
+                  var saved = window.localStorage.getItem(key);
+                  if (saved === "light" || saved === "dark") {
+                    theme = saved;
+                  } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                    theme = "dark";
+                  }
+                } catch (error) {
+                  if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                    theme = "dark";
+                  }
+                }
+
+                root.dataset.theme = theme;
+                root.style.colorScheme = theme;
+              })();
+            `,
+          }}
+        />
+      </head>
      <body>
        {children}
        <CookieBanner />