fix(ui): align theme toggle with dashboard style

This commit is contained in:
vince 2026-06-20 01:33:27 +02:00
parent c84de9aaa9
commit 9c948bd746
7 changed files with 99 additions and 17 deletions

View file

@ -15,15 +15,22 @@ export function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
<button
aria-label={label}
className="theme-toggle"
data-ui-theme-current={theme}
data-ui-theme-toggle="true"
onClick={() => onThemeChange(nextTheme)}
type="button"
>
<IconGlyph
name={theme === "dark" ? "mdi:weather-night" : "mdi:white-balance-sunny"}
size="sm"
/>
<span>{theme === "dark" ? "Dark" : "Light"}</span>
<span className="theme-toggle__label">Theme</span>
<span className="theme-toggle__switch" aria-hidden="true">
<span className="theme-toggle__cell" data-active={theme === "dark"}>
<IconGlyph name="mdi:weather-night" size="sm" />
<span>Dark</span>
</span>
<span className="theme-toggle__cell" data-active={theme === "light"}>
<IconGlyph name="mdi:white-balance-sunny" size="sm" />
<span>Light</span>
</span>
</span>
</button>
);
}