fix(ui): align theme toggle with dashboard style
This commit is contained in:
parent
c84de9aaa9
commit
9c948bd746
7 changed files with 99 additions and 17 deletions
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue