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 built-in in Bootstrap 5.3.
You can use the window.matchMedia('(prefers-color-scheme: dark)').matches query to detect the 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 a cookie to store the user's choice and have the choice available server-side for server prerendering on the next visit.
We use PersistentComponentState to pass the prerendered color mode to the Blazor WebAssembly client.
We use two different implementations of IDocColorModeResolver to resolve the color mode on the 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 only resolves when the application starts.