fix: persist dark mode

jesperorb · Mar 23, 2024 · 3f53205 · 3f53205
1 parent 7eb46ab
commit 3f53205
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/lib/components/ui/DarkModeToggle.svelte b/src/lib/components/ui/DarkModeToggle.svelte
@@ -13,10 +13,12 @@
 	const change = (event: Event) => {
 		const target = event.target as HTMLInputElement;
 		const element = browser ? document.querySelector('html') : null;
-		if (element) {
+		if (element && browser) {
 			if (target.checked) {
+				localStorage.setItem("dark-mode", "1");
 				element.setAttribute('data-dark-mode', 'true');
 			} else {
+				localStorage.removeItem("dark-mode");
 				element.removeAttribute('data-dark-mode');
 			}
 		}

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Page } from '@sveltejs/kit';
-	import { dev } from '$app/environment';
+	import { dev, browser } from '$app/environment';
 	import type { FormatMethodsKeys } from '$lib/format-methods';
 	import { page, navigating } from '$app/stores';
 
@@ -9,12 +9,18 @@
 	import SkipLink from '$lib/components/ui/SkipLink.svelte';
 	import ProgressBar from '$lib/components/ui/ProgressBar.svelte';
 	import Header from '$lib/components/ui/Header.svelte';
+	import { onMount } from 'svelte';
 
 	let routeId: FormatMethodsKeys | 'Playground';
 	const getRouteId = (page: Page<Record<string, string>>): void => {
 		routeId = page.route.id?.replace('/', '') as FormatMethodsKeys;
 	};
 	$: getRouteId($page);
+	onMount(() => {
+		if(browser && localStorage.getItem("dark-mode")) {
+			document.querySelector("html")?.setAttribute("data-dark-mode", "true");
+		}
+	})
 </script>
 
 <svelte:head>