diff --git a/frontend/index.html b/frontend/index.html
index 67a2fff..796f71b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,5 +1,5 @@
-
+
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index f4b056d..c120ad4 100644
--- 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 (
-