File size: 1,163 Bytes
c4b38e4
60216ec
c4b38e4
 
 
f08464b
c4b38e4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f08464b
c4b38e4
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39eb06d
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script lang="ts">
	import "../app.css";
	import { onMount } from "svelte";
	import { browser } from "$app/environment";
	import { page } from "$app/stores";

	type Theme = "light" | "dark" | "system" | null | undefined;

	let systemPrefersDark = false;

	function updateTheme(theme: Theme, systemPrefersDark: boolean) {
		if (theme === "dark" || (theme === "system" && systemPrefersDark)) {
			document.documentElement.classList.add("dark");
		} else {
			document.documentElement.classList.remove("dark");
		}
	}

	$: if (browser) {
		const theme = $page.url.searchParams.get("__theme") as Theme;
		updateTheme(theme, systemPrefersDark);
	}

	onMount(() => {
		if (browser) {
			const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
			systemPrefersDark = mediaQuery.matches;

			const handleChange = (event: MediaQueryListEvent) => {
				systemPrefersDark = event.matches;
				updateTheme($page.url.searchParams.get("__theme") as Theme, systemPrefersDark);
			};

			mediaQuery.addEventListener("change", handleChange);

			return () => mediaQuery.removeEventListener("change", handleChange);
		}
	});
</script>

<slot></slot>

<style></style>