You can apply either theme to your entire website, or selectively override specific elements using the .kelp-theme-light and .kelp-theme-dark classes.

<body class="kelp-theme-dark">
	The site uses the dark theme.

	<div class="kelp-theme-light">
		This section uses the light theme.
	</div>
</body>

If no class is set, Kelp uses the light theme by default.

If you want your website to automatically set dark mode or light mode based on the user’s OS system settings, load the dark-mode-auto.js script in the <head> element.

<script 
	src="https://cdn.jsdelivr.net/npm/kelpui@0.2.0/js/dark-mode-auto.js"
></script>