Dark color mode (theme)

Basic usage #

Bootstrap 5.3 introduced the dark color scheme and we added support for it in all our components.
Use the data-bs-theme="dark" attribute on the <html> element to enable it.
See the Bootstrap Dark mode documentation for more details.

<!doctype html>
<html lang="en" data-bs-theme="dark">
	<!-- ... -->
</html>

Color mode switcher #

Please note, there is no auto color mode bult-in in Bootstrap 5.3.
You can use window.matchMedia('(prefers-color-scheme: dark)').matches query to detect user's preference on startup and set the color mode accordingly.

JavaScript #

The color mode switcher has to be implemented with the help of JavaScript.
You can use the script written by Bootstrap to do the job.

Blazor #

If you want to integrate the color mode switcher into your Blazor application and support server-side prerendering, you can take a look at the implementation of DocColorModeSwitcher used for this documentation.

We use cookie to store user's choice and have the choice available server-side for server prerendering on next visit.
We use PersistentComponentState to pass prerendered color mode to Blazor WebAssembly client.
We use two different implementations of IDocColorModeResolver to resolve the color mode on server and client.
We did not implement the color mode switching when the system preference changes and the app is already running. The auto mode resolves only when application starts.