Merge pull request #651 from dzcode-io/fix/fallback-to-user-pref-insteadof-dark-mode

fix: fallback to user prefered mode instead of assuming dark mode for first-time theme load

Author: ZibanPirate

web/src/components/top-bar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useMemo, useLayoutEffect, useState, useCallback } from "react";
+import { useMemo, useLayoutEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
 import logoWide from "src/assets/svg/logo-wide.svg";
 import logoSquare from "src/assets/svg/logo-square.svg";
@@ -18,6 +18,8 @@ export interface TopBarProps {
   links: Array<{ localeKey: DictionaryKeys<"navbar-section">; href: string }>;
 }
 
+type Theme = "light" | "dark";
+
 export function TopBar({ version, links }: TopBarProps): JSX.Element {
   const { pathname } = useLocation();
   const languageLessPathname = useMemo(() => stripLanguageCodeFromHRef(pathname), [pathname]);
@@ -41,25 +43,17 @@ export function TopBar({ version, links }: TopBarProps): JSX.Element {
 
   const { localize } = useLocale();
 
-  const [isDark, setIsDark] = useState(() => {
-    const savedTheme = localStorage.getItem("theme");
-    const isDark = savedTheme === "dark";
-    return savedTheme ? isDark : true; // default should be dark
+  const [theme, setTheme] = useState((): Theme => {
+    const savedTheme = localStorage.getItem("theme") || "";
+    if (["light", "dark"].includes(savedTheme)) return savedTheme as Theme;
+
+    return window.matchMedia?.("(prefers-color-scheme: light)")?.matches ? "light" : "dark";
   });
 
   useLayoutEffect(() => {
-    const theme = localStorage.getItem("theme");
-    if (theme) {
-      document.documentElement.setAttribute("data-theme", theme);
-    }
-  }, []);
-
-  const toggleTheme = useCallback(() => {
-    const newTheme = isDark ? "light" : "dark";
-    setIsDark(!isDark);
-    localStorage.setItem("theme", newTheme);
-    document.documentElement.setAttribute("data-theme", newTheme);
-  }, [isDark, setIsDark]);
+    localStorage.setItem("theme", theme);
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
 
   return (
     <div className="bg-neutral">
@@ -133,12 +127,12 @@ export function TopBar({ version, links }: TopBarProps): JSX.Element {
               <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
             </svg>
             <input
-              onClick={toggleTheme}
+              onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
               id="theme-toggle"
               type="checkbox"
               value="dzcodeLight"
               className="theme-controller toggle"
-              checked={!isDark}
+              checked={theme === "light"}
             />
             <svg
               xmlns="http://www.w3.org/2000/svg"