forked from
pds.ls/pdsls
atproto explorer
restyle settings
+58
-61
+58
-61
src/components/settings.tsx
+58
-61
src/components/settings.tsx
···
56
56
<div class="i-lucide-settings" />
57
57
<span>Settings</span>
58
58
</div>
59
-
<h4 class="mb-1 font-semibold">Theme</h4>
60
-
<div class="flex w-full gap-1">
61
-
<button
62
-
classList={{
63
-
"basis-1/3 py-1 rounded-full justify-center flex items-center gap-1": true,
64
-
"bg-transparent hover:bg-neutral-100 dark:hover:bg-dark-200": !theme().system,
65
-
"bg-white dark:bg-dark-100 font-semibold": theme().system,
66
-
}}
67
-
onclick={() =>
68
-
updateTheme({
69
-
color:
70
-
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light",
71
-
system: true,
72
-
})
73
-
}
74
-
>
75
-
<div class="i-lucide-monitor" />
76
-
System
77
-
</button>
78
-
<button
79
-
classList={{
80
-
"basis-1/3 py-1 rounded-full justify-center flex items-center gap-1": true,
81
-
"bg-transparent hover:bg-neutral-100 dark:hover:bg-dark-200":
82
-
theme().color !== "light" || theme().system,
83
-
"bg-white font-semibold": theme().color === "light" && !theme().system,
84
-
}}
85
-
onclick={() => updateTheme({ color: "light", system: false })}
86
-
>
87
-
<div class="i-lucide-sun" />
88
-
Light
89
-
</button>
90
-
<button
91
-
classList={{
92
-
"basis-1/3 py-1 justify-center rounded-full flex items-center gap-1": true,
93
-
"bg-transparent hover:bg-neutral-100 dark:hover:bg-dark-200":
94
-
theme().color !== "dark" || theme().system,
95
-
"bg-dark-100 font-semibold": theme().color === "dark" && !theme().system,
96
-
}}
97
-
onclick={() => updateTheme({ color: "dark", system: false })}
98
-
>
99
-
<div class="i-lucide-moon" />
100
-
Dark
101
-
</button>
102
-
</div>
103
-
<div class="mt-2 flex flex-col gap-1">
104
-
<div class="flex flex-col gap-1">
105
-
<div class="flex flex-col gap-0.5">
106
-
<label for="plcDirectory" class="select-none font-semibold">
107
-
PLC Directory
108
-
</label>
109
-
<TextInput
110
-
id="plcDirectory"
111
-
value={localStorage.plcDirectory || "https://plc.directory"}
112
-
onInput={(e) => {
113
-
e.currentTarget.value.length ?
114
-
(localStorage.plcDirectory = e.currentTarget.value)
115
-
: localStorage.removeItem("plcDirectory");
116
-
}}
117
-
/>
118
-
</div>
59
+
<div class="flex flex-col gap-2">
60
+
<div class="flex flex-col gap-0.5">
61
+
<label for="plcDirectory" class="select-none">
62
+
PLC Directory
63
+
</label>
64
+
<TextInput
65
+
id="plcDirectory"
66
+
value={localStorage.plcDirectory || "https://plc.directory"}
67
+
onInput={(e) => {
68
+
e.currentTarget.value.length ?
69
+
(localStorage.plcDirectory = e.currentTarget.value)
70
+
: localStorage.removeItem("plcDirectory");
71
+
}}
72
+
/>
119
73
</div>
120
-
<div class="mt-2 flex flex-col gap-1">
74
+
<div class="flex justify-between">
121
75
<div class="flex items-center gap-1">
122
76
<input
123
77
id="disableMedia"
···
132
86
<label for="disableMedia" class="select-none">
133
87
Hide media embeds
134
88
</label>
89
+
</div>
90
+
<div class="dark:shadow-dark-900/80 dark:bg-dark-100 flex w-fit items-center gap-1 rounded-full bg-white p-0.5 text-lg shadow-sm">
91
+
<Tooltip text="System Theme">
92
+
<button
93
+
classList={{
94
+
"p-1.5 rounded-full": true,
95
+
"bg-neutral-200 dark:bg-dark-400": theme().system,
96
+
}}
97
+
onclick={() =>
98
+
updateTheme({
99
+
color:
100
+
window.matchMedia("(prefers-color-scheme: dark)").matches ?
101
+
"dark"
102
+
: "light",
103
+
system: true,
104
+
})
105
+
}
106
+
>
107
+
<div class="i-lucide-monitor" />
108
+
</button>
109
+
</Tooltip>
110
+
<Tooltip text="Light Theme">
111
+
<button
112
+
classList={{
113
+
"p-1.5 rounded-full": true,
114
+
"bg-neutral-200": theme().color === "light" && !theme().system,
115
+
}}
116
+
onclick={() => updateTheme({ color: "light", system: false })}
117
+
>
118
+
<div class="i-lucide-sun" />
119
+
</button>
120
+
</Tooltip>
121
+
<Tooltip text="Dark Theme">
122
+
<button
123
+
classList={{
124
+
"p-1.5 rounded-full": true,
125
+
"bg-dark-400": theme().color === "dark" && !theme().system,
126
+
}}
127
+
onclick={() => updateTheme({ color: "dark", system: false })}
128
+
>
129
+
<div class="i-lucide-moon" />
130
+
</button>
131
+
</Tooltip>
135
132
</div>
136
133
</div>
137
134
</div>