From 46da102d728685eb55a0c5d0e174256b8089125f Mon Sep 17 00:00:00 2001 From: Matthew Davies Date: Thu, 12 Sep 2024 14:10:02 -0700 Subject: [PATCH] Move dark mode to html tag and make sure bg is set correctly (#110) --- frontend/index.html | 2 +- frontend/src/components/Layout.tsx | 12 +++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) 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 ( -
+
setIsDark(dark)} />