Dark Mode

Kelp comes with a default light theme and optional dark theme out-of-the-box.

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/js/dark-mode-auto.js"
></script>

Why doesn’t Kelp doesn’t use CSS media queries for dark mode?

The prefers-color-scheme: dark media query can be used to detect a user’s OS dark mode settings and automatically change the color scheme in your CSS.

@media (prefers-color-scheme: dark) {
	/* Update CSS variables */
}

While simpler than JavaScript, Kelp does not use this approach for two reasons…

Sometimes a visitor wants their OS in dark mode, but a website in light mode (or vice versa).
Some developers may not want dark mode on their site, or might only want dark mode.

Relying on a class instead of a media query more easily supports a wide range of use cases.

You can add a color mode switcher and let users choose.
You can override specific sections of a page to different from the main color theme.
You can create a site that’s only light mode or only dark mode.
You can automatically toggle dark mode to match the user’s OS settings.

In other words, a little bit of JavaScript adds a lot of flexibility and actually reduces the amount of total code that needs to be included.