website/layouts/partials/js-global.html

67 lines
1.3 KiB
HTML

<script>
function openNavDrawer() {
navDrawerOverlay.classList.toggle('d-none')
navDrawer.style.transform = 'translate(0)'
}
function closeNavDrawer() {
navDrawerOverlay.classList.toggle('d-none')
navDrawer.style.transform = 'translate(100%)'
}
function currentTheme() {
var _isDark = JSON.parse(localStorage.getItem('themeIsDark'))
return _isDark
}
function storeTheme(_isDark) {
localStorage.setItem('themeIsDark', _isDark)
}
function setThemeTo(_isDark) {
var elems = [
...document.body.getElementsByTagName("*"),
document.body,
]
elems.forEach(el => {
if (_isDark) {
el.classList.remove('light')
el.classList.add('dark')
} else {
el.classList.remove('dark')
el.classList.add('light')
}
})
initToggle(_isDark)
storeTheme(_isDark)
}
function toggleTheme() {
var th = currentTheme()
if (th === null) {
th = window.matchMedia("(prefers-color-scheme: dark)").matches
}
setThemeTo(!th)
}
function initToggle(_isDark) {
if (_isDark) {
thToggle.innerHTML = '<i class="material-icons">wb_sunny</i>'
} else {
thToggle.innerHTML = '<i class="material-icons">brightness_2</i>'
}
}
(function() {
var th = currentTheme()
if (th === null) {
initToggle(window.matchMedia("(prefers-color-scheme: dark)").matches)
return
}
setThemeTo(th)
initToggle(th)
})()
</script>