oppi.li
juli.ee
+7
-7
src/components/settings.tsx
+7
-7
src/components/settings.tsx
···
78
78
<div class="starting:opacity-0 dark:bg-dark-300 absolute top-12 rounded-md bg-zinc-100 p-4 text-slate-900 transition-opacity duration-300 dark:text-slate-100">
79
79
<h3 class="border-b-0.5 mb-2 border-neutral-500 pb-2 font-bold">Settings</h3>
80
80
<h4 class="mb-1 font-semibold">Theme</h4>
81
-
<div class="w-xs flex gap-2 overflow-hidden">
81
+
<div class="w-xs flex gap-2">
82
82
<button
83
83
classList={{
84
84
"basis-1/3 py-1 rounded-lg": true,
85
-
"bg-transparent hover:bg-zinc-200 dark:hover:bg-dark-100": !theme().system,
86
-
"bg-neutral-500 text-slate-100": theme().system,
85
+
"bg-transparent hover:bg-light-700 dark:hover:bg-dark-200": !theme().system,
86
+
"bg-zinc-200 dark:bg-neutral-600 font-semibold": theme().system,
87
87
}}
88
88
onclick={() =>
89
89
updateTheme({
···
98
98
<button
99
99
classList={{
100
100
"basis-1/3 py-1 rounded-lg": true,
101
-
"bg-transparent hover:bg-zinc-200 dark:hover:bg-dark-100":
101
+
"bg-transparent hover:bg-light-700 dark:hover:bg-dark-200":
102
102
theme().color !== "light" || theme().system,
103
-
"bg-neutral-500 text-slate-100": theme().color === "light" && !theme().system,
103
+
"bg-zinc-200 font-semibold": theme().color === "light" && !theme().system,
104
104
}}
105
105
onclick={() => updateTheme({ color: "light", system: false })}
106
106
>
···
109
109
<button
110
110
classList={{
111
111
"basis-1/3 py-1 rounded-lg": true,
112
-
"bg-transparent hover:bg-zinc-200 dark:hover:bg-dark-100":
112
+
"bg-transparent hover:bg-light-700 dark:hover:bg-dark-200":
113
113
theme().color !== "dark" || theme().system,
114
-
"bg-neutral-500": theme().color === "dark" && !theme().system,
114
+
"bg-neutral-600 font-semibold": theme().color === "dark" && !theme().system,
115
115
}}
116
116
onclick={() => updateTheme({ color: "dark", system: false })}
117
117
>