Theme Init
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 class="h-full" data-theme="true" data-theme-mode="light" lang="en">
<head>
<!--Core styles-->
<link href="/dist/assets/css/styles.css" rel="stylesheet"/>
</head>
<body>
<!--begin::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-theme-mode')) {
themeMode = document.documentElement.getAttribute('data-theme-mode');
} else {
themeMode = defaultThemeMode;
}
if (themeMode === 'system') {
themeMode = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
document.documentElement.classList.add(themeMode);
}
</script>
<!--end::Theme mode setup on page load-->
<h1>
Hello world!
</h1>
<!--Core bundle script-->
<script src="/dist/assets/js/core.bundle.js">
</script>
</body>
</html>
Theme Mode
Metronic's
KTTheme Component
automatically handles theme mode switching based on user interactions via toggle button or dropdown menu.
Colors Mapping
While
Tailwind CSS Dark Mode
requires separate class setups for light and dark theme modes,
Metronic offers automatic support for dark mode using single CSS class via
Theme Colors Mapping
using CSS variables. This approach brings remarkable advantages such as:
Instant Dark Mode Support
Faster Development
Compact and Tidy HTML
Design System Consistency
Light Mode
Badge
Text
Dark Mode
Badge
Text
<!-- Input -->
<input class="input" placeholder="Input" type="text" value=""/>
<!-- Button -->
<button class="btn btn-primary">
Button
</button>
<!-- Badge -->
<span class="badge badge-success badge-outline">
Badge
</span>
<!-- Text -->
<span class="text-gray-700text-lg font-semibold">
Text
</span>