forked from
pds.ls/pdsls
atmosphere explorer
restyle settings
+45
-29
+10
-11
src/components/theme.tsx
+10
-11
src/components/theme.tsx
···
8
8
9
9
export const ThemeSelection = () => {
10
10
const [theme, setTheme] = createSignal(
11
-
localStorage.getItem("theme") === null ? "system"
11
+
localStorage.getItem("theme") === null ? "auto"
12
12
: localStorage.theme === "dark" ? "dark"
13
13
: "light",
14
14
);
···
18
18
document.documentElement.classList.toggle(
19
19
"dark",
20
20
newTheme === "dark" ||
21
-
(newTheme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches),
21
+
(newTheme === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches),
22
22
);
23
-
if (newTheme === "system") localStorage.removeItem("theme");
23
+
if (newTheme === "auto") localStorage.removeItem("theme");
24
24
else localStorage.theme = newTheme;
25
25
};
26
26
27
-
const ThemeOption = (props: { theme: string; icon: string; label: string }) => {
27
+
const ThemeOption = (props: { theme: string; label: string }) => {
28
28
return (
29
29
<button
30
30
classList={{
31
-
"flex items-center gap-2 rounded-xl border px-3 py-2": true,
31
+
"flex items-center min-w-21 justify-center rounded-xl border px-3 py-2": true,
32
32
"bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700":
33
33
theme() === props.theme,
34
34
"border-neutral-200 dark:border-neutral-600 hover:bg-neutral-200/30 dark:hover:bg-neutral-800":
···
36
36
}}
37
37
onclick={() => updateTheme(props.theme)}
38
38
>
39
-
<span class={"iconify " + props.icon}></span>
40
-
<span>{props.label}</span>
39
+
{props.label}
41
40
</button>
42
41
);
43
42
};
44
43
45
44
return (
46
-
<div class="flex flex-col gap-0.5">
45
+
<div class="flex flex-col gap-1">
47
46
<label class="select-none">Theme</label>
48
47
<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" />
48
+
<ThemeOption theme="auto" label="Auto" />
49
+
<ThemeOption theme="light" label="Light" />
50
+
<ThemeOption theme="dark" label="Dark" />
52
51
</div>
53
52
</div>
54
53
);
+35
-18
src/views/settings.tsx
+35
-18
src/views/settings.tsx
···
6
6
7
7
const Settings = () => {
8
8
return (
9
-
<div class="flex w-full flex-col gap-3 px-2">
10
-
<div class="flex items-center gap-1 font-semibold">
11
-
<span>Settings</span>
12
-
</div>
9
+
<div class="flex w-full flex-col gap-2 px-2">
10
+
<div class="text-lg font-semibold">Settings</div>
13
11
<div class="flex flex-col gap-3">
14
-
<div class="flex flex-col gap-0.5">
12
+
<div class="flex flex-col gap-1">
15
13
<label for="plcDirectory" class="select-none">
16
14
PLC Directory
17
15
</label>
···
26
24
/>
27
25
</div>
28
26
<ThemeSelection />
29
-
<div class="flex justify-between">
30
-
<div class="flex items-center gap-1">
31
-
<input
32
-
id="disableMedia"
33
-
type="checkbox"
34
-
checked={localStorage.hideMedia === "true"}
35
-
onChange={(e) => {
36
-
localStorage.hideMedia = e.currentTarget.checked;
37
-
setHideMedia(e.currentTarget.checked);
27
+
<div class="flex flex-col gap-1">
28
+
<label class="select-none">Blob media preview</label>
29
+
<div class="flex gap-2">
30
+
<button
31
+
classList={{
32
+
"flex min-w-21 items-center justify-center gap-1 rounded-xl border px-3 py-2": true,
33
+
"border-neutral-300 bg-neutral-200/60 dark:border-neutral-500 dark:bg-neutral-700":
34
+
!hideMedia(),
35
+
"border-neutral-200 hover:bg-neutral-200/30 dark:border-neutral-600 dark:hover:bg-neutral-800":
36
+
hideMedia(),
37
+
}}
38
+
onClick={() => {
39
+
localStorage.hideMedia = "false";
40
+
setHideMedia(false);
41
+
}}
42
+
>
43
+
Show
44
+
</button>
45
+
<button
46
+
classList={{
47
+
"flex min-w-21 items-center justify-center gap-1 rounded-xl border px-3 py-2": true,
48
+
"border-neutral-300 bg-neutral-200/60 dark:border-neutral-500 dark:bg-neutral-700":
49
+
hideMedia(),
50
+
"border-neutral-200 hover:bg-neutral-200/30 dark:border-neutral-600 dark:hover:bg-neutral-800":
51
+
!hideMedia(),
38
52
}}
39
-
/>
40
-
<label for="disableMedia" class="select-none">
41
-
Hide media embeds
42
-
</label>
53
+
onClick={() => {
54
+
localStorage.hideMedia = "true";
55
+
setHideMedia(true);
56
+
}}
57
+
>
58
+
Hide
59
+
</button>
43
60
</div>
44
61
</div>
45
62
</div>