36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import type { UiTheme } from "../theme";
|
|
import { getNextUiTheme } from "../theme";
|
|
import { IconGlyph } from "./IconGlyph";
|
|
|
|
export interface ThemeToggleProps {
|
|
theme: UiTheme;
|
|
onThemeChange: (theme: UiTheme) => void;
|
|
}
|
|
|
|
export function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
|
|
const nextTheme = getNextUiTheme(theme);
|
|
|
|
return (
|
|
<button
|
|
aria-label="Light theme"
|
|
aria-pressed={theme === "light"}
|
|
className="theme-toggle"
|
|
data-ui-theme-current={theme}
|
|
data-ui-theme-toggle="true"
|
|
onClick={() => onThemeChange(nextTheme)}
|
|
type="button"
|
|
>
|
|
<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>
|
|
);
|
|
}
|