diff --git a/frontend/src/helpers/DarkModeToggle.tsx b/frontend/src/helpers/DarkModeToggle.tsx index 0cc11c9..3fb152a 100644 --- a/frontend/src/helpers/DarkModeToggle.tsx +++ b/frontend/src/helpers/DarkModeToggle.tsx @@ -1,14 +1,31 @@ -import { useState } from "react"; -import { DarkModeSwitch } from "react-toggle-dark-mode"; +import { useLayoutEffect, useState } from 'react'; +import { DarkModeSwitch } from 'react-toggle-dark-mode'; export const DarkModeToggle = () => { - const [isDarkMode, setDarkMode] = useState(false); + const [isDarkMode, setDarkMode] = useState(true); + + // Checks local storage for dark mode + useLayoutEffect(() => { + const darkMode = globalThis.localStorage.getItem('darkMode'); + + const isDark = darkMode && JSON.parse(darkMode); + + if (!isDark) { + globalThis.document.documentElement.classList.add('dark'); + } else { + setDarkMode(isDark); + isDark + ? globalThis.document.documentElement.classList.add('dark') + : globalThis.document.documentElement.classList.remove('dark'); + } + }, []); const toggleDarkMode = (checked: boolean) => { + globalThis.localStorage.setItem('darkMode', JSON.stringify(checked)); setDarkMode(checked); - isDarkMode - ? document.documentElement.classList.remove("dark") - : document.documentElement.classList.add("dark"); + checked + ? globalThis.document.documentElement.classList.add('dark') + : globalThis.document.documentElement.classList.remove('dark'); }; return (