27 lines
1017 B
TypeScript
27 lines
1017 B
TypeScript
import DarkMode from '@mui/icons-material/DarkMode'
|
|
import LightMode from '@mui/icons-material/LightMode'
|
|
import SettingsBrightness from '@mui/icons-material/SettingsBrightness'
|
|
import { IconButton, Tooltip, useColorScheme } from '@mui/material'
|
|
import type { ReactNode } from 'react'
|
|
|
|
type Mode = 'light' | 'dark' | 'system'
|
|
|
|
const NEXT: Record<Mode, Mode> = { light: 'dark', dark: 'system', system: 'light' }
|
|
|
|
const ICONS: Record<Mode, ReactNode> = { light: <LightMode />, dark: <DarkMode />, system: <SettingsBrightness /> }
|
|
|
|
/** An icon button cycling light, dark and system theme. MUI stores the choice; mode is undefined on the first render. */
|
|
export default function ThemeMenu() {
|
|
const { mode, setMode } = useColorScheme()
|
|
if (!mode) {
|
|
return null
|
|
}
|
|
return (
|
|
<Tooltip title={`Theme: ${mode}. Switch to ${NEXT[mode]}.`}>
|
|
<IconButton aria-label={`theme ${mode}, switch to ${NEXT[mode]}`} onClick={() => setMode(NEXT[mode])}>
|
|
{ICONS[mode]}
|
|
</IconButton>
|
|
</Tooltip>
|
|
)
|
|
}
|