website/layouts/partials/js-global.html

<script>
	function openNavDrawer() {
		navDrawerOverlay.classList.toggle('d-none')
		navDrawer.style.transform = 'translate(0)'
		window.location.hash = '#nav'
	}

	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)
		closeNavDrawer()
	})()

	if (window.location.hash == '#nav') {
		history.replaceState("", document.title, window.location.pathname);
	}

	window.addEventListener('hashchange', function(e) {
		if (window.location.hash == '') {
			closeNavDrawer()
			history.replaceState("", document.title, window.location.pathname);
		}
	})
</script>