Sha256: b75c046c6eb493589616d2aa03b992fcce355a054d73f0632e56fbbcce83747e
Contents?: true
Size: 1.37 KB
Versions: 5
Compression:
Stored size: 1.37 KB
Contents
/*
* There are two color palettes on CSS for the data-theme: 'light' and 'dark'.
* Initially the script check if a theme is set in session storage and alternatively listens to a MediaQuery callback looking for "prefers-color-scheme: dark".
*/
const themeButton = {
'light': '<i class="fas fa-adjust" aria-hidden="true"></i>',
'dark': '<i class="fas fa-adjust fa-rotate-180" aria-hidden="true"></i>'
}
const currentTheme = () => sessionStorage.getItem('theme')
function setMode(theme) {
document.documentElement.setAttribute('data-theme', theme)
sessionStorage.setItem('theme', theme)
document.getElementById('theme-toggle').innerHTML = themeButton[theme]
}
function themeToggle() {
let sessionPrefers = currentTheme()
if (sessionPrefers === 'light') {
setMode('dark')
} else {
setMode('light')
}
}
window.onload = function bootstrapTheme() {
if (isAutoTheme) {
if (!currentTheme()) {
// Load browser's preference
let browserPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
browserPrefersDark.addEventListener('change', () => {
if (browserPrefersDark.matches) sessionStorage.setItem('theme', 'dark')
});
}
// Load theme
let sessionPrefers = currentTheme()
setMode(sessionPrefers ? sessionPrefers : 'light')
}
}
Version data entries
5 entries across 5 versions & 1 rubygems