53 lines
1.1 KiB
JavaScript
53 lines
1.1 KiB
JavaScript
const storageKey = 'theme-preference'
|
|
|
|
const onClick = () => {
|
|
// flip current value
|
|
theme.value = theme.value === 'light'
|
|
? 'dark'
|
|
: 'light'
|
|
|
|
setPreference()
|
|
}
|
|
|
|
const getColorPreference = () => {
|
|
if (localStorage.getItem(storageKey))
|
|
return localStorage.getItem(storageKey)
|
|
else
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
? 'dark'
|
|
: 'light'
|
|
}
|
|
|
|
const setPreference = () => {
|
|
localStorage.setItem(storageKey, theme.value)
|
|
reflectPreference()
|
|
}
|
|
|
|
const reflectPreference = () => {
|
|
document.firstElementChild
|
|
.setAttribute('data-new-ui-theme', theme.value)
|
|
|
|
document
|
|
.querySelector('#theme-toggle')
|
|
?.setAttribute('aria-label', theme.value)
|
|
}
|
|
|
|
const theme = {
|
|
value: getColorPreference(),
|
|
}
|
|
|
|
reflectPreference()
|
|
|
|
window.onload = () => {
|
|
reflectPreference()
|
|
document
|
|
.querySelector('#theme-toggle')
|
|
.addEventListener('click', onClick)
|
|
}
|
|
|
|
window
|
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
.addEventListener('change', ({matches:isDark}) => {
|
|
theme.value = isDark ? 'dark' : 'light'
|
|
setPreference()
|
|
}) |