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