67 lines
1.3 KiB
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>
|