vielle.dev
forked from
pds.ls/pdsls
atproto explorer
dynamically switch theme with system changes
handle.invalid
+17
-2
src/components/settings.tsx
+17
-2
src/components/settings.tsx
···
27
27
const keyEvent = (event: KeyboardEvent) => {
28
28
if (modal() && event.key == "Escape") setOpenSettings(false);
29
29
};
30
+
const themeEvent = () => {
31
+
if (!theme().system) return;
32
+
const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
33
+
setTheme(
34
+
isDark ?
35
+
{ color: "dark", system: theme().system }
36
+
: { color: "light", system: theme().system },
37
+
);
38
+
document.documentElement.classList.toggle("dark", isDark);
39
+
};
30
40
31
41
onMount(() => {
32
42
window.addEventListener("keydown", keyEvent);
33
43
window.addEventListener("click", clickEvent);
44
+
window
45
+
.matchMedia("(prefers-color-scheme: dark)")
46
+
.addEventListener("change", themeEvent);
34
47
});
35
48
36
49
onCleanup(() => {
37
50
window.removeEventListener("keydown", keyEvent);
38
51
window.removeEventListener("click", clickEvent);
52
+
window
53
+
.matchMedia("(prefers-color-scheme: dark)")
54
+
.removeEventListener("change", themeEvent);
39
55
});
40
56
41
57
createEffect(() => {
···
72
88
<button
73
89
classList={{
74
90
"basis-1/3 p-2": true,
75
-
"hover:bg-slate-200 dark:hover:bg-dark-200":
76
-
!theme().system,
91
+
"hover:bg-slate-200 dark:hover:bg-dark-200": !theme().system,
77
92
"bg-neutral-500 text-slate-100": theme().system,
78
93
}}
79
94
onclick={() =>