Dekker1/dekker.one
1
0
Fork 0
Code Issues Pull Requests Activity

Fix colouring inconsistency in ThemeSelector

Browse Source
This commit is contained in:
Jip J. Dekker 2023-06-27 19:09:58 +10:00
parent d7a405eea1
commit 1afcd59581
No known key found for this signature in database
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ThemeSelector.jsx
View File

@ -56,7 +56,7 @@ export function ThemeSelector(props) {
<SunIcon className="hidden h-6 w-6 fill-zinc-100 stroke-zinc-500 transition group-hover:fill-zinc-200 group-hover:stroke-zinc-700 [:not(.dark)[data-theme=system]_&]:block" />
<MoonIcon className="hidden h-6 w-6 fill-zinc-700 stroke-zinc-500 transition group-hover:stroke-zinc-400 [.dark[data-theme=system]_&]:block" />
</Listbox.Button>
<Listbox.Options className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/5">
<Listbox.Options className="absolute left-1/2 top-full mt-3 w-36 -translate-x-1/2 space-y-1 rounded-xl bg-white p-3 text-sm font-medium shadow-md shadow-black/5 ring-1 ring-black/5 dark:bg-zinc-800 dark:ring-white/5">
{themes.map((theme) => (
<Listbox.Option
key={theme.value}
@ -75,7 +75,7 @@ export function ThemeSelector(props) {
>
{({ selected }) => (
<>
<div className="rounded-md bg-white p-1 shadow ring-1 ring-slate-900/5 dark:bg-slate-700 dark:ring-inset dark:ring-white/5">
<div className="rounded-md bg-white p-1 shadow ring-1 ring-zinc-900/5 dark:bg-zinc-700 dark:ring-inset dark:ring-white/5">
<theme.icon
className={clsx(
'h-4 w-4',