(() => {
'use strict'
const getStoredTheme = () => localStorage.getItem('theme')
const setStoredTheme = theme => localStorage.setItem('theme', theme)
const getPreferredTheme = () => {
const storedTheme = getStoredTheme()
if (storedTheme) {
return storedTheme
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '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)
}
}
const toggleLogo = (theme) => {
if (theme === 'light') {
document.getElementById('logo-dark').classList.add('d-none')
document.getElementById('logo-light').classList.remove('d-none')
} else if (theme === 'dark') {
document.getElementById('logo-dark').classList.remove('d-none')
document.getElementById('logo-light').classList.add('d-none')
}
}
setTheme(getPreferredTheme())
toggleLogo(getPreferredTheme())
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
const storedTheme = getStoredTheme()
if (storedTheme !== 'light' && storedTheme !== 'dark') {
setTheme(getPreferredTheme())
toggleLogo(getPreferredTheme());
}
})
})()