Dark mode is not easy ... I discussed (and proved) this concept at length back in May 2020 in my quasi-white-paper The Definitive Guide to Dark Mode and Bootstrap 4 (Also on GitHub.) And subsequently also churned the Bootstrap 5 variant (This page!) (Also on GitHub.)
There are huge contentions around how to make "dark mode" available. For example:
prefers-color-schememedia query implementation.
prefers-reduced-motiondoes in 5),
I guess it comes down to time ... both to decide on how to do this, and then churn the code, and then test it.
This body of work explores three methods described in the ".. Definitive Guide .." piece:
bootstrap-night - Two independent theme CSS files, auto-loaded, but with JS to offer toggle button and media query awareness,
bootstrap-nightshade - One CSS file,
body class driven and with a JS library to offer toggle button,
bootstrap-dark - Pure form (uses the
prefers-color-scheme CSS media query) one CSS file that offers auto OS switching dark mode.
There are a few additional techniques that can be used, but these would use the same patterns as above, but with slight variations. For example:
bootstrap-nightfall - A Bootstrap plugin; add it in after the bootstrap.css to make Bootstrap dark.
bootstrap-nightshade example shows how one can use a whole-document class to drive the theme,
and using the
darkmde.js library can further enhance the experience by providing an interactive selection
whilst still honoring the prefers-color-scheme media query.
But using classes comes with its own conundrum. If the choice is to use data attribues,
bootstrap-blackbox.css file can be used.
bootstrap-unlit - The default
bootstrap-dark.css file is set that light if default/author preference, and dark is the optional.
bootstrap-unlit.css file gives one the same outcome, but with dark as the default/author preference, and light is the optional.
bootstrap-dark-plugin.css is essensially the
bootstrap-dark.css without the original
i.e., just the media query and then the dark color scheme.
This is useful if you want to use the original CSS or even if you want to use an alternative Bootstrap CSS, but also want to dark-mode enable that.