Bootstrap 5.3 introduced the dark color scheme and we added support for it in all our components.
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>
autocolor mode bult-in in Bootstrap 5.3.
window.matchMedia('(prefers-color-scheme: dark)').matchesquery to detect user's preference on startup and set the color mode accordingly.
You can use the script written by Bootstrap to do the job.
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.
PersistentComponentStateto pass prerendered color mode to Blazor WebAssembly client.
IDocColorModeResolverto resolve the color mode on server and client.
automode resolves only when application starts.