30 lines
820 B
TypeScript
30 lines
820 B
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);
|
|
const label = `Switch to ${nextTheme} theme`;
|
|
|
|
return (
|
|
<button
|
|
aria-label={label}
|
|
aria-pressed={theme === "dark"}
|
|
className="theme-toggle"
|
|
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>
|
|
</button>
|
|
);
|
|
}
|