85 lines
2.4 KiB
JavaScript
85 lines
2.4 KiB
JavaScript
/**
|
|
* Switch between light and dark themes (color modes)
|
|
*/
|
|
|
|
;(() => {
|
|
'use strict'
|
|
|
|
const getStoredTheme = () => localStorage.getItem('theme')
|
|
const setStoredTheme = (theme) => localStorage.setItem('theme', theme)
|
|
|
|
const getPreferredTheme = () => {
|
|
const storedTheme = getStoredTheme()
|
|
if (storedTheme) {
|
|
return storedTheme
|
|
}
|
|
|
|
// Set default theme to 'light'.
|
|
// Possible options: 'dark' or system color mode (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
|
|
return 'light'
|
|
}
|
|
|
|
const setTheme = (theme) => {
|
|
if (theme === 'auto') {
|
|
document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
|
|
} else {
|
|
document.documentElement.setAttribute('data-bs-theme', theme)
|
|
}
|
|
}
|
|
|
|
setTheme(getPreferredTheme())
|
|
|
|
const showActiveTheme = (theme, focus = false) => {
|
|
const themeSwitcher = document.querySelector('.theme-switcher')
|
|
|
|
if (!themeSwitcher) {
|
|
return
|
|
}
|
|
|
|
const activeThemeIcon = document.querySelector('.theme-icon-active i')
|
|
const btnToActive = document.querySelector(
|
|
`[data-bs-theme-value="${theme}"]`
|
|
)
|
|
const iconOfActiveBtn = btnToActive.querySelector('.theme-icon i').className
|
|
|
|
document.querySelectorAll('[data-bs-theme-value]').forEach((element) => {
|
|
element.classList.remove('active')
|
|
element.setAttribute('aria-pressed', 'false')
|
|
})
|
|
|
|
btnToActive.classList.add('active')
|
|
btnToActive.setAttribute('aria-pressed', 'true')
|
|
activeThemeIcon.className = iconOfActiveBtn
|
|
themeSwitcher.setAttribute(
|
|
'aria-label',
|
|
`Toggle theme (${btnToActive.dataset.bsThemeValue})`
|
|
)
|
|
|
|
if (focus) {
|
|
themeSwitcher.focus()
|
|
}
|
|
}
|
|
|
|
window
|
|
.matchMedia('(prefers-color-scheme: dark)')
|
|
.addEventListener('change', () => {
|
|
const storedTheme = getStoredTheme()
|
|
if (storedTheme !== 'light' && storedTheme !== 'dark') {
|
|
setTheme(getPreferredTheme())
|
|
}
|
|
})
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
showActiveTheme(getPreferredTheme())
|
|
|
|
document.querySelectorAll('[data-bs-theme-value]').forEach((toggle) => {
|
|
toggle.addEventListener('click', () => {
|
|
const theme = toggle.getAttribute('data-bs-theme-value')
|
|
setStoredTheme(theme)
|
|
setTheme(theme)
|
|
showActiveTheme(theme, true)
|
|
})
|
|
})
|
|
})
|
|
})()
|