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>
 |