my-module-dark-theme/index.js at main · antgnatov/my-module-dark-theme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Module Dark and Light Theme
export function modeInit() {
	//============ DARK LIGHT THEME ============================================================================================================================================
	// Switch function
	const switchTheme = () => {
		// Get root element and data-theme value
		const rootElem = document.documentElement;
		let dataTheme = rootElem.getAttribute('data-theme');
		let newTheme = rootElem.getAttribute('data-theme');
		newTheme = (dataTheme === 'light') ? 'dark' : 'light';
		// Set the new HTML attribute
		rootElem.setAttribute('data-theme', newTheme);
		// Set the new local storage item
		localStorage.setItem('theme', newTheme);
	}
	//Add event listener for the theme switcher
	document.querySelector('#theme-switcher').addEventListener('click', switchTheme);
}