Move dark mode to html tag and make sure bg is set correctly (#110)

MeshAddicts · Sep 12, 2024 · 46da102 · 46da102
1 parent 3e7c0f8
commit 46da102
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark:bg-gray-950">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
@@ -7,6 +7,16 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
   const { pathname } = useLocation();
   const [isDark, setIsDark] = useState(false);
 
+  // make sure the root element is updated with the dark class
+  //  move this out eventually
+  useEffect(() => {
+    if (isDark) {
+      document.documentElement.classList.add("dark", "bg-gray-950");
+    } else {
+      document.documentElement.classList.remove("dark", "bg-gray-950");
+    }
+  }, [isDark]);
+
   useEffect(() => {
     // set the initial state of the theme based on the user's preference
     if (
@@ -46,7 +56,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
   }, []);
 
   return (
-    <div className={isDark ? "dark" : ""}>
+    <div>
       <Menu isDark={isDark} onDarkChange={(dark) => setIsDark(dark)} />
 
       <div