Bugfix/theme initial state (#214)

imnaK · web-flow · commit 9a0fd3827f17 · 2024-06-18T07:47:54.000+05:30
* fix: initial state of theme is undefined

* style: formatting semicolons
also removed a space after a meta tag lol?
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -36,12 +36,12 @@ function Links() {
 }
 
 export const ThemeToggleBtn = (props) => {
-  const [theme, setTheme] = createSignal("light");
+  const [theme, setTheme] = createSignal("");
 
   onMount(() => {
-    const localTheme = localStorage.theme
-    setTheme(localTheme)
-  })
+    const localTheme = localStorage.theme;
+    setTheme(localTheme);
+  });
 
   return (
     <button
diff --git a/src/entry-server.tsx b/src/entry-server.tsx
@@ -6,7 +6,7 @@ export default createHandler(() => (
       <html lang="en">
         <head>
           <meta charset="utf-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" /> 
+          <meta name="viewport" content="width=device-width, initial-scale=1" />
 
           {/* favicon & font */}
           <link rel="icon" type="image/svg+xml" href="/logo.svg" />
@@ -24,9 +24,11 @@ export default createHandler(() => (
 
           {assets}
 
-          {/* set saved theme  */}
+          {/* Check if a theme is saved in localStorage, if not, set it based on the system's theme preference */}
           <script>
-            document.querySelector("html").className = localStorage.theme
+            if (!localStorage.theme)
+              localStorage.theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+            document.querySelector("html").className = localStorage.theme;
           </script>
         </head>
         <body>
