You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import { useState } from 'react'
|
|
import { ACCENTS, getAccent, getThemeMode, setAccent, setThemeMode, type Accent } from './theme'
|
|
|
|
const SWATCH: Record<Accent, string> = {
|
|
indigo: '#4f5df0',
|
|
blue: '#2f7ce8',
|
|
emerald: '#14957a',
|
|
violet: '#8250df',
|
|
rose: '#d4497c',
|
|
amber: '#b97e10',
|
|
}
|
|
|
|
/** Compact mode toggle + accent picker; drops into any header. */
|
|
export function ThemeSwitcher() {
|
|
const [mode, setMode] = useState(getThemeMode())
|
|
const [accent, setAccentState] = useState(getAccent())
|
|
|
|
return (
|
|
<div className="wf-themer" title="Theme">
|
|
{ACCENTS.map((a) => (
|
|
<button
|
|
key={a}
|
|
type="button"
|
|
className={`swatch${a === accent ? ' active' : ''}`}
|
|
style={{ background: SWATCH[a] }}
|
|
aria-label={`Accent ${a}`}
|
|
onClick={() => {
|
|
setAccent(a)
|
|
setAccentState(a)
|
|
}}
|
|
/>
|
|
))}
|
|
<button
|
|
type="button"
|
|
className="mode"
|
|
onClick={() => {
|
|
const next = mode === 'light' ? 'dark' : 'light'
|
|
setThemeMode(next)
|
|
setMode(next)
|
|
}}
|
|
>
|
|
{mode === 'light' ? '☾ Dark' : '☀ Light'}
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|