From 2d13564a729c66ca34a698a71241a2da90d7e877 Mon Sep 17 00:00:00 2001 From: adriandelgg Date: Thu, 30 Jun 2022 13:18:26 -0500 Subject: [PATCH] Updated DarkModeToggle --- frontend/src/helpers/DarkModeToggle.tsx | 29 ++++++++++++++++++++----- 1 file changed, 23 insertions(+), 6 deletions(-) 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 (