Crudhunt
Getting Started

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-themes="true" data-theme-mode="light" lang="en" dir="ltr">
	<head>
		<!--Your Tailwind styles -->
		<link href="css/styles.css" rel="stylesheet" />
	</head>
	<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>
		<!--ReUI JavaScript bundle -->
		<script src="./node_modules/@keenthemes/reui/dist/reui.min.js"></script>
	</body>
</html>

Theme Switch

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

PreviouseInstallationNextRTL