website/islands/ThemePicker.tsx

56 lines
1.5 KiB
TypeScript

import { useComputed, useSignal, useSignalEffect } from '@preact/signals'
import { IS_BROWSER } from '$fresh/runtime.ts'
export default function ThemePicker() {
const colorSchemeQuery = '(prefers-color-scheme: dark)'
const colorSchemeDark = useSignal(
IS_BROWSER ? matchMedia('(prefers-color-scheme: dark)').matches : false,
)
if (IS_BROWSER) {
matchMedia(colorSchemeQuery).addEventListener(
'change',
(event) => colorSchemeDark.value = event.matches,
)
}
type Theme = 'system' | 'light' | 'dark'
const theme = useSignal<Theme>(
localStorage.getItem('$cohabit.theme') as Theme ?? 'system',
)
const themeIcon = useComputed(() => {
if (theme.value === 'light') {
return <i class='ri-sun-line'></i>
}
if (theme.value === 'dark') {
return <i class='ri-moon-line'></i>
}
//If not forced use system
if (colorSchemeDark.value) {
return <i class='ri-moon-line'></i>
}
return <i class='ri-sun-line'></i>
})
useSignalEffect(() => {
localStorage.setItem('$cohabit.theme', theme.value)
document.body.setAttribute('data-theme', theme.value)
})
return (
<label class='islands__theme_picker' title={'Sélectionner un thème'}>
<span>{themeIcon}</span>
<select
value={theme}
onChange={(event) =>
theme.value = (event.target as HTMLSelectElement).value as Theme}
>
<option value='system'>Système</option>
<option value='light'>Light</option>
<option value='dark'>Dark</option>
</select>
</label>
)
}