Fix #143 - Put 'dark' class on html as soon as possible (#144)

* Put 'dark' class on html as soon as possible * Some fixes * Addess suggestion
FrancescoXX · Oct 1, 2024 · 3a7cd4c · 3a7cd4c
1 parent 29d27a3
commit 3a7cd4c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -14,9 +14,24 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const initDarkModeDetection = `
+(function () {
+const isDarkModePreferred = window.matchMedia('(prefers-color-scheme: dark)').matches;
+const themeChosen = localStorage.theme;
+if ((!themeChosen && isDarkModePreferred) || themeChosen === "dark") {
+  document.documentElement.classList.add("dark");
+  localStorage.theme = 'dark';
+}
+})()`;
+
   return (
     <html lang="en">
       <head>
+      <script
+          type="application/javascript"
+          id="dark-mode-detection"
+          dangerouslySetInnerHTML={{ __html: initDarkModeDetection }}
+        ></script>        
       <meta property="og:title" content="Rustcrab" />
         <meta
           property="og:description"

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -12,18 +12,12 @@ export default function Header() {
   const [starsCount, setStarsCount] = useState<number | null>(null);
 
   useEffect(() => {
-    if (
-      localStorage.theme === "dark" ||
-      (!("theme" in localStorage) &&
-        window.matchMedia("(prefers-color-scheme: dark)").matches)
-    ) {
-      document.documentElement.classList.add("dark");
+    if (localStorage.theme === "dark") {
       setDarkMode(true);
-    } else {
-      document.documentElement.classList.remove("dark");
-      setDarkMode(false);
     }
+  }, []);
 
+  useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 0);
     };