Recently, Bootstrap 5.3 entered its alpha phase with initial support for Dark Mode. However, there are significant bugs present in the current testing phase, particularly in color interpolation. If Dark Mode is not an immediate requirement, it may be advisable to wait for the stable release of Bootstrap 5.3 or contribute to its development.
It is important to note that neither Bootstrap 4 nor Bootstrap 5.2 offer Dark Mode support.
If Dark Mode functionality is essential while awaiting updates from Bootstrap, a temporary solution can be achieved by adjusting text and background colors using the following CSS:
@media (prefers-color-scheme: dark) {
color: #fff;
background: #000;
}
Subsequently, it is recommended to experiment and fine-tune these adjustments, preferably within a separate SASS file that can be discarded once Bootstrap's Dark Mode support is fully implemented.
Prior Explanation:
Within the context of Bootstrap, the term "Dark Mode" may be misleading as Bootstrap does incorporate color variations, such as $dark: $gray-900, and classes like .bg-dark. However, these elements do not constitute true Dark Mode, which relies on the operating system to switch website rendering based on:
@media (prefers-color-scheme: dark) {
Additionally, utilizing classes like bg-dark to simulate Dark Mode through manual class swapping using JavaScript can lead to unnecessary CPU usage. This approach overlooks a fundamental feature of the web and is not recommended.
For further information, refer to this comprehensive guide.
For optimal management of prefers-color-scheme: dark in Bootstrap 4 and 5, a simple method involves introducing an intermediary step by reassigning Bootstrap color SASS variables to CSS variables in your _variables.scss file. Despite the simplicity of this approach, it requires some effort but is effective in handling Dark Mode:
:root {
--body-bg: #fff;
--body-color: #000;
}
$white: var(--body-bg);
$black: var(--body-color);
$body-color: var(--body-color);
By incorporating this method, CSS variables can be easily adjusted to reflect Dark Mode preferences set by the operating system, providing a seamless transition within the Bootstrap framework.
While this process may seem labor-intensive due to Bootstrap's limitations in this aspect, taking the time to override color variables and implement CSS variables can significantly enhance Dark Mode customization within your Bootstrap projects.