diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 832d9b2..5dc9a12 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,7 +9,6 @@ import { Poppins, Lexend, Montserrat, Roboto, Inter } from "next/font/google"; import { ReactLenis } from "@/utils/lenis"; import { Toaster } from "@/components/ui/sonner"; import MainNav from "@/components/core/MainNav"; -import Head from "next/head"; import { ThemeInitScript } from "@/components/ui/ThemeInitScript"; import { GoogleAnalytics } from "@next/third-parties/google"; @@ -153,12 +152,10 @@ export default function RootLayout({ }>) { return ( - + {process.env.NEXT_PUBLIC_ENABLE_UMAMI === "true" && } - - - + diff --git a/src/components/ui/ThemeInitScript.tsx b/src/components/ui/ThemeInitScript.tsx index 0c8d698..99bbe7a 100644 --- a/src/components/ui/ThemeInitScript.tsx +++ b/src/components/ui/ThemeInitScript.tsx @@ -1,15 +1,43 @@ -export function ThemeInitScript() { +import Script from "next/script"; + +type ThemeInitScriptProps = { + defaultTheme?: "dark" | "light" | "system"; + storageKey?: string; +}; + +export function ThemeInitScript({ + defaultTheme = "system", + storageKey = "notes-buddy-theme", +}: ThemeInitScriptProps) { const script = ` (function() { try { - const storedTheme = localStorage.getItem('theme'); - if (storedTheme === 'dark' ) { - document.documentElement.classList.add('dark'); - } else { - document.documentElement.classList.remove('dark'); + var storageKey = ${JSON.stringify(storageKey)}; + var defaultTheme = ${JSON.stringify(defaultTheme)}; + var storedTheme = localStorage.getItem(storageKey) || defaultTheme; + var validTheme = storedTheme === 'dark' || storedTheme === 'light' || storedTheme === 'system'; + + if (!validTheme) { + storedTheme = defaultTheme; } + + var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + var resolvedTheme = storedTheme === 'system' + ? (prefersDark ? 'dark' : 'light') + : storedTheme; + + document.documentElement.classList.remove('light', 'dark'); + document.documentElement.classList.add(resolvedTheme); + document.documentElement.style.colorScheme = resolvedTheme; } catch (e) {} })(); `; - return