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
const keyEvent = (event: KeyboardEvent) => {
28
if (modal() && event.key == "Escape") setOpenSettings(false);
29
};
30
31
onMount(() => {
32
window.addEventListener("keydown", keyEvent);
33
window.addEventListener("click", clickEvent);
34
});
35
36
onCleanup(() => {
37
window.removeEventListener("keydown", keyEvent);
38
window.removeEventListener("click", clickEvent);
39
});
40
41
createEffect(() => {
···
72
<button
73
classList={{
74
"basis-1/3 p-2": true,
75
-
"hover:bg-slate-200 dark:hover:bg-dark-200":
76
-
!theme().system,
77
"bg-neutral-500 text-slate-100": theme().system,
78
}}
79
onclick={() =>
···
27
const keyEvent = (event: KeyboardEvent) => {
28
if (modal() && event.key == "Escape") setOpenSettings(false);
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
+
};
40
41
onMount(() => {
42
window.addEventListener("keydown", keyEvent);
43
window.addEventListener("click", clickEvent);
44
+
window
45
+
.matchMedia("(prefers-color-scheme: dark)")
46
+
.addEventListener("change", themeEvent);
47
});
48
49
onCleanup(() => {
50
window.removeEventListener("keydown", keyEvent);
51
window.removeEventListener("click", clickEvent);
52
+
window
53
+
.matchMedia("(prefers-color-scheme: dark)")
54
+
.removeEventListener("change", themeEvent);
55
});
56
57
createEffect(() => {
···
88
<button
89
classList={{
90
"basis-1/3 p-2": true,
91
+
"hover:bg-slate-200 dark:hover:bg-dark-200": !theme().system,
92
"bg-neutral-500 text-slate-100": theme().system,
93
}}
94
onclick={() =>