Bootstrap 5.3.0 emphasizes dark mode, custom colors

Bootstrap 5.3.0, the latest version of the CSS, JavaScript, and HTML web framework, has arrived with an emphasis on dark mode and custom color modes.

The final stable release of this update to the mobile-first application framework was announced May 30 and can be accessed from GetBootstrap.com. In this version, Bootstrap’s core was rewritten to offer “first class” support for dark mode, which is opt-in by default. Bootstrap also now supports any number of color modes for building custom themes or more-nuanced color modes. Dark mode styles are generated via a new color-mode() Sass mixin, allowing developers to write styles specific to a particular color mode. A new _variables-dark.scss stylesheet, meanwhile, houses dark-mode-specific Sass variables. Also in Bootstrap 5.3.0:

• A revamped color palette includes all new Sass variables, CSS variables, and utilities for setting color, background-color, and border-color.
• Foreground and background colors have been expanded to include new secondary, tertiary, and emphasis colors, while theme colors have been expanded to include subtle background colors.
• Link styling was improved, with new link helpers and utilities.
• Navs have new :focus_visible styles that better match custom button focus styles.
• CSS variable-based border-width utilities were reverted to set their property directly, as was the case prior to version 5.2.0. (This avoids inheritance issues across nested elements, including tables.)

Moving forward, plans for Bootstrap 5.4.0 call for improving the utilities API and related code. Patch releases for 5.3.x are planned to address any issues over the coming weeks.