49 lines
1.8 KiB
JavaScript
49 lines
1.8 KiB
JavaScript
class ColorScheme {
|
|
|
|
static #localStorageKey = 'color_scheme'
|
|
static options = ['dark', 'light']
|
|
|
|
static set scheme(name) {
|
|
document.documentElement.setAttribute('data-color-scheme', name)
|
|
localStorage.setItem(this.#localStorageKey, name)
|
|
}
|
|
|
|
static get scheme() {
|
|
return document.documentElement.dataset.colorScheme
|
|
}
|
|
|
|
static {
|
|
if (localStorage.getItem(this.#localStorageKey)) {
|
|
// user has previously made a manual color scheme selection
|
|
ColorScheme.scheme = localStorage.getItem(this.#localStorageKey)
|
|
} else if (window.matchMedia('(prefers-color-scheme: light)').matches === true) {
|
|
// user has not made a manual color scheme selection and has a 'light' preference
|
|
ColorScheme.scheme = 'light'
|
|
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches === true) {
|
|
// user has not made a manual color scheme selection and has a 'dark' preference
|
|
ColorScheme.scheme = 'dark'
|
|
} else {
|
|
ColorScheme.scheme = ColorScheme.options[0]
|
|
}
|
|
|
|
const nextSchemeBtns = document.querySelectorAll('[data-color-scheme-next]')
|
|
for (const btn of nextSchemeBtns) {
|
|
btn.addEventListener('click', ColorScheme.next)
|
|
}
|
|
|
|
const setSchemeBtns = document.querySelectorAll('[data-color-scheme-set]')
|
|
for (const btn of setSchemeBtns) {
|
|
btn.addEventListener('click', () => { ColorScheme.scheme = btn.dataset.colorSchemeSet })
|
|
}
|
|
}
|
|
|
|
static next() {
|
|
const optionPos = ColorScheme.options.indexOf(ColorScheme.scheme) + 1
|
|
if (optionPos === ColorScheme.options.length) {
|
|
ColorScheme.scheme = ColorScheme.options[0]
|
|
} else {
|
|
ColorScheme.scheme = ColorScheme.options[optionPos]
|
|
}
|
|
}
|
|
}
|