Enable dark mode support for your site with KTThemeSwitch
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>KtUI's Theme Switch component handles theme mode switching based on user interactions via toggle button or dropdown menu.