Updated DarkModeToggle

adriandelgg · Jun 30, 2022 · 2d13564 · 2d13564
1 parent bf819f0
commit 2d13564
Showing 1 changed file with 23 additions and 6 deletions.
diff --git 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 (