atmosphere explorer
pds.ls
tool
typescript
atproto
move theme selection to settings page
+17
-11
+13
-8
src/components/theme.tsx
+13
-8
src/components/theme.tsx
···
24
24
else localStorage.theme = newTheme;
25
25
};
26
26
27
-
const ThemeButton = (props: { theme: string; icon: string }) => {
27
+
const ThemeOption = (props: { theme: string; icon: string; label: string }) => {
28
28
return (
29
29
<button
30
30
classList={{
31
-
"p-1.5 flex items-center rounded-full border-[0.5px]": true,
32
-
"bg-neutral-200/60 border-neutral-300/60 dark:border-neutral-500/60 dark:bg-neutral-600":
31
+
"flex items-center gap-2 rounded-xl border px-3 py-2": true,
32
+
"bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700":
33
33
theme() === props.theme,
34
-
"border-transparent": theme() !== props.theme,
34
+
"border-neutral-200 dark:border-neutral-600 hover:bg-neutral-100 dark:hover:bg-neutral-800":
35
+
theme() !== props.theme,
35
36
}}
36
37
onclick={() => updateTheme(props.theme)}
37
38
>
38
39
<span class={"iconify " + props.icon}></span>
40
+
<span>{props.label}</span>
39
41
</button>
40
42
);
41
43
};
42
44
43
45
return (
44
-
<div class="dark:bg-dark-100 dark:inset-shadow-dark-200 mt-2 flex items-center justify-between gap-1 rounded-full border-[0.5px] border-neutral-200/60 bg-white p-1 text-base text-neutral-800 inset-shadow-sm dark:border-neutral-600 dark:text-neutral-300">
45
-
<ThemeButton theme="system" icon="lucide--monitor" />
46
-
<ThemeButton theme="light" icon="lucide--sun" />
47
-
<ThemeButton theme="dark" icon="lucide--moon" />
46
+
<div class="flex flex-col gap-0.5">
47
+
<label class="select-none">Theme</label>
48
+
<div class="flex gap-2">
49
+
<ThemeOption theme="system" icon="lucide--monitor" label="System" />
50
+
<ThemeOption theme="light" icon="lucide--sun" label="Light" />
51
+
<ThemeOption theme="dark" icon="lucide--moon" label="Dark" />
52
+
</div>
48
53
</div>
49
54
);
50
55
};
+1
-2
src/layout.tsx
+1
-2
src/layout.tsx
···
9
9
import { NavBar } from "./components/navbar.jsx";
10
10
import { NotificationContainer } from "./components/notification.jsx";
11
11
import { Search, SearchButton, showSearch } from "./components/search.jsx";
12
-
import { themeEvent, ThemeSelection } from "./components/theme.jsx";
12
+
import { themeEvent } from "./components/theme.jsx";
13
13
import { resolveHandle } from "./utils/api.js";
14
14
15
15
export const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;
···
161
161
newTab
162
162
external
163
163
/>
164
-
<ThemeSelection />
165
164
</DropdownMenu>
166
165
</MenuProvider>
167
166
</div>
+3
-1
src/views/settings.tsx
+3
-1
src/views/settings.tsx
···
1
1
import { createSignal } from "solid-js";
2
2
import { TextInput } from "../components/text-input.jsx";
3
+
import { ThemeSelection } from "../components/theme.jsx";
3
4
4
5
export const [hideMedia, setHideMedia] = createSignal(localStorage.hideMedia === "true");
5
6
···
9
10
<div class="flex items-center gap-1 font-semibold">
10
11
<span>Settings</span>
11
12
</div>
12
-
<div class="flex flex-col gap-2">
13
+
<div class="flex flex-col gap-3">
13
14
<div class="flex flex-col gap-0.5">
14
15
<label for="plcDirectory" class="select-none">
15
16
PLC Directory
···
24
25
}}
25
26
/>
26
27
</div>
28
+
<ThemeSelection />
27
29
<div class="flex justify-between">
28
30
<div class="flex items-center gap-1">
29
31
<input