improved theme selector focused item contrast in light theme (#1508)

solidjs · May 28, 2024 · c3290f1 · c3290f1
1 parent 9fd3073
commit c3290f1
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/docs/components/theme-toggle.tsx b/docs/components/theme-toggle.tsx
@@ -22,15 +22,15 @@ export function ThemeToggle() {
           <span class="sr-only">Toggle theme</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent>
-        <DropdownMenuItem onSelect={() => setColorMode("light")}>
+        <DropdownMenuItem class="focus:text-slate-200" onSelect={() => setColorMode("light")}>
           <SunIcon class="mr-2 size-4 dark:text-slate-200 dark:group-hover:text-slate-300" />
           <span>Light</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => setColorMode("dark")}>
+        <DropdownMenuItem class="focus:text-slate-200" onSelect={() => setColorMode("dark")}>
           <MoonIcon class="mr-2 size-4" />
           <span>Dark</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onSelect={() => setColorMode("system")}>
+        <DropdownMenuItem class="focus:text-slate-200" onSelect={() => setColorMode("system")}>
           <MonitorIcon class="mr-2 size-4" />
           <span>System</span>
         </DropdownMenuItem>