KTUI
Docs
Dark Mode

Dark Mode

Enable dark mode support for your site with KTThemeSwitch

Initialization

Use the inline JavaScript code below to set the theme mode before the page renders. This ensures that the saved theme mode is displayed during page load, preventing content blinking.

<!DOCTYPE html>
<html data-kt-theme="true" data-kt-theme-mode="light" lang="en" dir="ltr">
	...
	<body>
		<!--Theme mode setup on page load-->
		<script>
			const defaultThemeMode = 'light'; // light|dark|system
			let themeMode;
			
			if ( document.documentElement ) {
				if ( localStorage.getItem('theme')) {
						themeMode = localStorage.getItem('theme');
				} else if ( document.documentElement.hasAttribute('data-kt-theme-mode')) {
					themeMode = document.documentElement.getAttribute('data-kt-theme-mode');
				} else {
					themeMode = defaultThemeMode;
				}
			
				if (themeMode === 'system') {
					themeMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
				}
			
				document.documentElement.classList.add(themeMode);
			}
		</script>
		<h1>
			Hello world!
		</h1>
		<!--KtUI JavaScript bundle -->
		<script src="./node_modules/@keenthemes/ktui/dist/ktui.min.js"></script>
	</body>
</html>

Theme Switch

KtUI's Theme Switch component handles theme mode switching based on user interactions via toggle button or dropdown menu.

PreviouseJavaScriptNextRTL