atmosphere explorer
pds.ls
tool
typescript
atproto
restyle theme selector
+5
-3
+5
-3
src/components/theme.tsx
+5
-3
src/components/theme.tsx
···
28
28
return (
29
29
<button
30
30
classList={{
31
-
"p-1.5 flex items-center rounded-full": true,
32
-
"bg-neutral-200 dark:bg-neutral-600": theme() === props.theme,
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":
33
+
theme() === props.theme,
34
+
"border-transparent": theme() !== props.theme,
33
35
}}
34
36
onclick={() => updateTheme(props.theme)}
35
37
>
···
39
41
};
40
42
41
43
return (
42
-
<div class="mt-2 flex items-center justify-between gap-1 text-base">
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">
43
45
<ThemeButton theme="system" icon="lucide--monitor" />
44
46
<ThemeButton theme="light" icon="lucide--sun" />
45
47
<ThemeButton theme="dark" icon="lucide--moon" />