Handle theme change
This commit is contained in:
Ben Grant
parent
6220e599cf
commit
90352503b3
|
|
@ -1,6 +1,6 @@
|
|||
'use client'
|
||||
|
||||
import { useCallback, useRef, useState } from 'react'
|
||||
import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { maps } from 'hue-map'
|
||||
import { Settings as SettingsIcon } from 'lucide-react'
|
||||
|
|
@ -33,6 +33,12 @@ const Settings = () => {
|
|||
}
|
||||
}, [])
|
||||
|
||||
// Use user theme preference
|
||||
useEffect(() => {
|
||||
document.body.classList.toggle('light', store?.theme === 'Light')
|
||||
document.body.classList.toggle('dark', store?.theme === 'Dark')
|
||||
}, [store?.theme])
|
||||
|
||||
return <>
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -50,79 +56,81 @@ const Settings = () => {
|
|||
<div onClick={e => e.stopPropagation()}>
|
||||
<span className={styles.heading}>{t('options.name')}</span>
|
||||
|
||||
<ToggleField
|
||||
label={t('options.weekStart.label')}
|
||||
name="weekStart"
|
||||
options={{
|
||||
'Sunday': t('options.weekStart.options.Sunday'),
|
||||
'Monday': t('options.weekStart.options.Monday'),
|
||||
}}
|
||||
value={store?.weekStart === 0 ? 'Sunday' : 'Monday'}
|
||||
onChange={value => store?.setWeekStart(value === 'Sunday' ? 0 : 1)}
|
||||
/>
|
||||
{store && <>
|
||||
<ToggleField
|
||||
label={t('options.weekStart.label')}
|
||||
name="weekStart"
|
||||
options={{
|
||||
'Sunday': t('options.weekStart.options.Sunday'),
|
||||
'Monday': t('options.weekStart.options.Monday'),
|
||||
}}
|
||||
value={store?.weekStart === 0 ? 'Sunday' : 'Monday'}
|
||||
onChange={value => store?.setWeekStart(value === 'Sunday' ? 0 : 1)}
|
||||
/>
|
||||
|
||||
<ToggleField
|
||||
label={t('options.timeFormat.label')}
|
||||
name="timeFormat"
|
||||
options={{
|
||||
'12h': t('options.timeFormat.options.12h'),
|
||||
'24h': t('options.timeFormat.options.24h'),
|
||||
}}
|
||||
value={store?.timeFormat ?? '12h'}
|
||||
onChange={value => store?.setTimeFormat(value)}
|
||||
/>
|
||||
<ToggleField
|
||||
label={t('options.timeFormat.label')}
|
||||
name="timeFormat"
|
||||
options={{
|
||||
'12h': t('options.timeFormat.options.12h'),
|
||||
'24h': t('options.timeFormat.options.24h'),
|
||||
}}
|
||||
value={store?.timeFormat ?? '12h'}
|
||||
onChange={value => store?.setTimeFormat(value)}
|
||||
/>
|
||||
|
||||
<ToggleField
|
||||
label={t('options.theme.label')}
|
||||
name="theme"
|
||||
options={{
|
||||
'System': t('options.theme.options.System'),
|
||||
'Light': t('options.theme.options.Light'),
|
||||
'Dark': t('options.theme.options.Dark'),
|
||||
}}
|
||||
value={store?.theme ?? 'System'}
|
||||
onChange={value => store?.setTheme(value)}
|
||||
/>
|
||||
<ToggleField
|
||||
label={t('options.theme.label')}
|
||||
name="theme"
|
||||
options={{
|
||||
'System': t('options.theme.options.System'),
|
||||
'Light': t('options.theme.options.Light'),
|
||||
'Dark': t('options.theme.options.Dark'),
|
||||
}}
|
||||
value={store?.theme ?? 'System'}
|
||||
onChange={value => store?.setTheme(value)}
|
||||
/>
|
||||
|
||||
<SelectField
|
||||
label={t('options.colormap.label')}
|
||||
name="colormap"
|
||||
options={{
|
||||
'crabfit': t('options.colormap.classic'),
|
||||
...Object.fromEntries(Object.keys(maps).sort().map(palette => [
|
||||
palette,
|
||||
unhyphenate(palette)
|
||||
])),
|
||||
}}
|
||||
isSmall
|
||||
value={store?.colormap}
|
||||
onChange={event => store?.setColormap(event.target.value)}
|
||||
/>
|
||||
<SelectField
|
||||
label={t('options.colormap.label')}
|
||||
name="colormap"
|
||||
options={{
|
||||
'crabfit': t('options.colormap.classic'),
|
||||
...Object.fromEntries(Object.keys(maps).sort().map(palette => [
|
||||
palette,
|
||||
unhyphenate(palette)
|
||||
])),
|
||||
}}
|
||||
isSmall
|
||||
value={store?.colormap}
|
||||
onChange={event => store?.setColormap(event.target.value)}
|
||||
/>
|
||||
|
||||
<ToggleField
|
||||
label={t('options.highlight.label')}
|
||||
name="highlight"
|
||||
description={t('options.highlight.title')}
|
||||
options={{
|
||||
'Off': t('options.highlight.options.Off'),
|
||||
'On': t('options.highlight.options.On'),
|
||||
}}
|
||||
value={store?.highlight ? 'On' : 'Off'}
|
||||
onChange={value => store?.setHighlight(value === 'On')}
|
||||
/>
|
||||
<ToggleField
|
||||
label={t('options.highlight.label')}
|
||||
name="highlight"
|
||||
description={t('options.highlight.title')}
|
||||
options={{
|
||||
'Off': t('options.highlight.options.Off'),
|
||||
'On': t('options.highlight.options.On'),
|
||||
}}
|
||||
value={store?.highlight ? 'On' : 'Off'}
|
||||
onChange={value => store?.setHighlight(value === 'On')}
|
||||
/>
|
||||
|
||||
<SelectField
|
||||
label={t('options.language.label')}
|
||||
name="language"
|
||||
id="language"
|
||||
options={{
|
||||
...Object.fromEntries(Object.entries(languageDetails).map(([id, details]) => [id, details.name])),
|
||||
...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' },
|
||||
}}
|
||||
isSmall
|
||||
value={i18n.language}
|
||||
onChange={e => i18n.changeLanguage(e.target.value).then(() => router.refresh())}
|
||||
/>
|
||||
<SelectField
|
||||
label={t('options.language.label')}
|
||||
name="language"
|
||||
id="language"
|
||||
options={{
|
||||
...Object.fromEntries(Object.entries(languageDetails).map(([id, details]) => [id, details.name])),
|
||||
...process.env.NODE_ENV !== 'production' && { 'cimode': 'DEV' },
|
||||
}}
|
||||
isSmall
|
||||
value={i18n.language}
|
||||
onChange={e => i18n.changeLanguage(e.target.value).then(() => router.refresh())}
|
||||
/>
|
||||
</>}
|
||||
</div>
|
||||
</dialog>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ const ToggleField = <TValue extends string>({
|
|||
id={`${name}-${key}`}
|
||||
checked={value === key}
|
||||
onChange={() => onChange(key as TValue)}
|
||||
onClick={() => onChange(key as TValue)}
|
||||
/>
|
||||
<label className={styles.button} htmlFor={`${name}-${key}`}>{label as React.ReactNode}</label>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue