fix: theme loading issue (#84)

* Load theme earlier to avoid fouc

* fix system preference

* Renaming variables

Author: Balastrong

cypress/e2e/darkmode.spec.cy.ts

@@ -2,7 +2,7 @@ describe("DarkMode test", () => {
   beforeEach(() => {
     cy.visit("http://localhost:3000");
     cy.wait(3000);
-    cy.get('[data-testid="darkModeButton"]').click();
+    cy.get('[data-testid="themeSelectorButton"]').click();
   });
 
   it("should select light Mode", () => {
@@ -27,7 +27,7 @@ describe("DarkMode test", () => {
       },
     });
     cy.wait(3000);
-    cy.get('[data-testid="darkModeButton"]').click();
+    cy.get('[data-testid="themeSelectorButton"]').click();
     cy.get('[data-testid="system-mode-option"]').click();
     cy.get("html").should("have.data", "theme", "custom-dark");
   });

src/components/Header.tsx

@@ -2,7 +2,7 @@ import { MAIN_LOGIN_PROVIDER } from "@/pages/api/auth/[...nextauth]";
 import { signIn, signOut, useSession } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
-import { DarkModeDropdown } from "./DarkModeDropdown";
+import { ThemeSelector } from "./ThemeSelector";
 
 export const Header = () => {
   const { data: session, status } = useSession();
@@ -60,7 +60,7 @@ export const Header = () => {
             </ul>
           </div>
           <div className="navbar-end">
-            <DarkModeDropdown />
+            <ThemeSelector />
             {status === "authenticated" ? (
               <div className="dropdown dropdown-end">
                 <label tabIndex={0} className="btn btn-ghost btn-circle avatar">

src/components/DarkModeDropdown.test.tsx src/components/ThemeSelector.test.tsxsrc/components/DarkModeDropdown.test.tsx renamed to src/components/ThemeSelector.test.tsx

@@ -1,18 +1,18 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { describe, test, expect } from "vitest";
-import { DarkModeDropdown } from "./DarkModeDropdown";
+import { ThemeSelector } from "./ThemeSelector";
 
-describe("DarkModeDropdown", () => {
+describe("ThemeSelector", () => {
   test("should change light Icon if click Dark mode", () => {
-    render(<DarkModeDropdown />);
+    render(<ThemeSelector />);
 
-    const button = screen.getByTestId("darkModeButton");
+    const button = screen.getByTestId("themeSelectorButton");
     fireEvent.click(button);
 
     const darkModeItem = screen.getByTestId("dark-mode-option");
     fireEvent.click(darkModeItem);
 
-    const buttonEdited = screen.getByTestId("darkModeButton");
+    const buttonEdited = screen.getByTestId("themeSelectorButton");
     const darkModeSvg = buttonEdited.firstElementChild as SVGElement;
     const testidValue = darkModeSvg.dataset.testid;
 
@@ -25,14 +25,14 @@ describe("DarkModeDropdown", () => {
   });
 
   test("should change to System Preference", () => {
-    render(<DarkModeDropdown />);
+    render(<ThemeSelector />);
 
-    const button = screen.getByTestId("darkModeButton");
+    const button = screen.getByTestId("themeSelectorButton");
     fireEvent.click(button);
     const systemItem = screen.getByTestId("system-mode-option");
     fireEvent.click(systemItem);
 
-    const buttonEdited = screen.getByTestId("darkModeButton");
+    const buttonEdited = screen.getByTestId("themeSelectorButton");
     const systemSvg = buttonEdited.firstElementChild as SVGAElement;
     const testidValue = systemSvg.dataset.testid;
 

src/components/DarkModeDropdown.tsx src/components/ThemeSelector.tsxsrc/components/DarkModeDropdown.tsx renamed to src/components/ThemeSelector.tsx

@@ -1,45 +1,39 @@
 import { useEffect, useState } from "react";
 
-type DarkModeOptions = "custom-dark" | "light" | "system";
+type ThemeOptions = "custom-dark" | "light" | "system";
 
-export function DarkModeDropdown() {
-  const [darkModeOption, setDarkModeOption] =
-    useState<DarkModeOptions>("light");
+export function ThemeSelector() {
+  const [selectedTheme, setSelectedTheme] = useState<ThemeOptions | undefined>(
+    undefined
+  );
 
   useEffect(() => {
-    if (
-      localStorage.theme === "light" ||
-      (!("theme" in localStorage) &&
-        !window.matchMedia("(prefers-color-scheme:dark)").matches)
-    ) {
-      setDocumentElement("light");
-    } else {
-      setDocumentElement("custom-dark");
+    const theme = localStorage.getItem("theme") as ThemeOptions;
+    if (theme) {
+      setSelectedTheme(theme);
     }
   }, []);
 
   function onClick($event: React.MouseEvent<HTMLLIElement>) {
     $event.stopPropagation();
     const li = $event.currentTarget as HTMLLIElement;
-    setDocumentElement(li.id as DarkModeOptions);
+    setDocumentElement(li.id as ThemeOptions);
   }
 
-  const setDocumentElement = (theme: DarkModeOptions) => {
-    setDarkModeOption(theme);
-    theme === "system"
-      ? setSystemPreferenceTheme()
-      : setLightOrDarkTheme(theme);
+  const setDocumentElement = (theme: ThemeOptions) => {
+    setSelectedTheme(theme);
+    theme === "system" ? setSystemPreferenceTheme() : setTheme(theme);
   };
 
-  const buttonIcon = getButtonIconByOption(darkModeOption);
+  const buttonIcon = getButtonIconByOption(selectedTheme);
 
   return (
     <>
       <div className="dropdown dropdown-bottom dropdown-end">
         <label
           tabIndex={0}
           className="btn btn-circle btn-ghost m-1"
-          data-testid="darkModeButton"
+          data-testid="themeSelectorButton"
         >
           {buttonIcon}
         </label>
@@ -119,30 +113,26 @@ const SystemPreference = () => (
   </svg>
 );
 
-const getButtonIconByOption = (option: DarkModeOptions) => {
+const getButtonIconByOption = (option: ThemeOptions | undefined) => {
   switch (option) {
-    case "light": {
+    case "light":
       return <LightMode />;
-    }
-    case "custom-dark": {
+
+    case "custom-dark":
       return <DarkMode />;
-    }
-    case "system": {
+
+    default:
       return <SystemPreference />;
-    }
   }
 };
 
 const setSystemPreferenceTheme = () => {
   const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  setTheme(isDark ? "custom-dark" : "light");
   localStorage.removeItem("theme");
-  document.documentElement.dataset.theme = isDark ? "custom-dark" : "light";
-  isDark
-    ? document.documentElement.classList.add("dark")
-    : document.documentElement.classList.remove("dark");
 };
 
-const setLightOrDarkTheme = (theme: "custom-dark" | "light") => {
+const setTheme = (theme: "custom-dark" | "light") => {
   localStorage.theme = theme;
   document.documentElement.dataset.theme = theme;
   theme === "custom-dark"

src/pages/_document.tsx

@@ -5,6 +5,22 @@ export default function Document() {
     <Html lang="en" data-theme="light">
       <Head />
       <body className="light-mode dark:dark-mode">
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                var theme = localStorage.getItem('theme');
+                if (theme === "custom-dark" || (!theme && window.matchMedia("(prefers-color-scheme:dark)").matches)) {
+                  document.documentElement.dataset.theme = "custom-dark";
+                  document.documentElement.classList.add("dark")
+                } else {
+                  document.documentElement.dataset.theme = "light";
+                  document.documentElement.classList.remove("dark");
+                }
+              })()
+            `,
+          }}
+        />
         <Main />
         <NextScript />
       </body>