vielle.dev
forked from
pds.ls/pdsls
atproto explorer
reduce size of theme selection
handle.invalid
+8
-18
src/components/settings.tsx
+8
-18
src/components/settings.tsx
···
7
const isDarkMode =
8
localStorage.theme === "dark" ||
9
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
10
-
return {
11
-
color: isDarkMode ? "dark" : "light",
12
-
system: !("theme" in localStorage),
13
-
};
14
};
15
16
export const [theme, setTheme] = createSignal(getInitialTheme());
···
22
const themeEvent = () => {
23
if (!theme().system) return;
24
const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
25
-
setTheme(
26
-
isDark ?
27
-
{ color: "dark", system: theme().system }
28
-
: { color: "light", system: theme().system },
29
-
);
30
document.documentElement.classList.toggle("dark", isDark);
31
};
32
···
41
const updateTheme = (newTheme: { color: string; system: boolean }) => {
42
setTheme(newTheme);
43
document.documentElement.classList.toggle("dark", newTheme.color === "dark");
44
-
if (newTheme.system) {
45
-
localStorage.removeItem("theme");
46
-
} else {
47
-
localStorage.theme = newTheme.color;
48
-
}
49
};
50
51
return (
···
87
Hide media embeds
88
</label>
89
</div>
90
-
<div class="dark:shadow-dark-900/80 dark:bg-dark-100 flex items-center gap-1 rounded-full bg-white p-0.5 text-lg shadow-sm">
91
<button
92
name="System Theme"
93
classList={{
94
-
"p-1.5 flex items-center rounded-full": true,
95
"bg-neutral-200 dark:bg-dark-400": theme().system,
96
}}
97
onclick={() =>
···
109
<button
110
name="Light Theme"
111
classList={{
112
-
"p-1.5 flex items-center rounded-full": true,
113
"bg-neutral-200": theme().color === "light" && !theme().system,
114
}}
115
onclick={() => updateTheme({ color: "light", system: false })}
···
119
<button
120
name="Dark Theme"
121
classList={{
122
-
"p-1.5 flex items-center rounded-full": true,
123
"bg-dark-400": theme().color === "dark" && !theme().system,
124
}}
125
onclick={() => updateTheme({ color: "dark", system: false })}
···
7
const isDarkMode =
8
localStorage.theme === "dark" ||
9
(!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
10
+
return { color: isDarkMode ? "dark" : "light", system: !("theme" in localStorage) };
11
};
12
13
export const [theme, setTheme] = createSignal(getInitialTheme());
···
19
const themeEvent = () => {
20
if (!theme().system) return;
21
const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
22
+
setTheme({ color: isDark ? "dark" : "light", system: theme().system });
23
document.documentElement.classList.toggle("dark", isDark);
24
};
25
···
34
const updateTheme = (newTheme: { color: string; system: boolean }) => {
35
setTheme(newTheme);
36
document.documentElement.classList.toggle("dark", newTheme.color === "dark");
37
+
if (newTheme.system) localStorage.removeItem("theme");
38
+
else localStorage.theme = newTheme.color;
39
};
40
41
return (
···
77
Hide media embeds
78
</label>
79
</div>
80
+
<div class="dark:shadow-dark-900/80 dark:bg-dark-100 flex items-center gap-1 rounded-full bg-white p-0.5 shadow-sm">
81
<button
82
name="System Theme"
83
classList={{
84
+
"p-1 flex items-center rounded-full": true,
85
"bg-neutral-200 dark:bg-dark-400": theme().system,
86
}}
87
onclick={() =>
···
99
<button
100
name="Light Theme"
101
classList={{
102
+
"p-1 flex items-center rounded-full": true,
103
"bg-neutral-200": theme().color === "light" && !theme().system,
104
}}
105
onclick={() => updateTheme({ color: "light", system: false })}
···
109
<button
110
name="Dark Theme"
111
classList={{
112
+
"p-1 flex items-center rounded-full": true,
113
"bg-dark-400": theme().color === "dark" && !theme().system,
114
}}
115
onclick={() => updateTheme({ color: "dark", system: false })}