mirror of
https://old.git.ood.ovh/flambyte/RUX.git
synced 2025-04-29 05:12:06 +02:00
dev(theme): Try theme switcher
This commit is contained in:
parent
04f10627a9
commit
9d197e1363
1 changed files with 21 additions and 0 deletions
21
assets/js/theme.js
Normal file
21
assets/js/theme.js
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
// https://web.dev/building-a-theme-switch-component/
|
||||||
|
const storageKey = 'theme-preference'
|
||||||
|
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
|
||||||
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({matches:isDark}) => {
|
||||||
|
theme.value = isDark ? 'dark' : 'light'
|
||||||
|
setPreference()
|
||||||
|
})
|
Loading…
Add table
Reference in a new issue