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>
|