website/layouts/partials/js-global.html

<script>
	function openNavDrawer() {
		navDrawerOverlay.classList.remove('d-none')
		navDrawer.style.transform = 'translate(0)'
	}

	function closeNavDrawer() {
		navDrawerOverlay.classList.add('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()
	})()
</script>