The latest version of the widely-used CSS, JavaScript, and HTML web framework, Bootstrap 5.3.0, boasts significant enhancements with a keen focus on dark mode and custom color modes. With a rewritten core, this mobile-first application framework aims to make it easier for developers to incorporate these features in their projects.
The stable release of Bootstrap 5.3.0 was announced on May 30 and can be accessed from GetBootstrap.com. A significant change in this update is the opt-in by default first-class support for dark mode. Additionally, developers can now use any number of color modes to build custom themes or more complex color palettes. The new color-mode() Sass mixin generates dark mode styles, allowing for color mode-specific styles.
A dedicated _variables-dark.scss stylesheet accommodates dark-mode-specific Sass variables. Furthermore, Bootstrap 5.3.0 brings various other improvements:
- An overhauled color palette features new Sass variables, CSS variables, and utilities for setting color, background-color, and border-color.
- Foreground and background colors are augmented with secondary, tertiary, and emphasis colors. Theme colors have also been extended to include subtle background shades.
- Link styling improvements include new link helpers and utilities for more sophisticated designs.
- Navs benefit from better
:focus_visiblestyles, aligning more closely with custom button focus styles. - Border-width utilities based on CSS variables have been rolled back to set their properties directly, as it was before version 5.2.0. This resolves inheritance issues across nested elements, including tables.
Looking ahead, Bootstrap 5.4.0 intends to enhance its utilities API and related code. To address upcoming issues, patch releases for 5.3.x are set to roll out in the coming weeks. All these improvements amplify businesses' ability to create seamless web and mobile applications using no-code/low-code solutions like the AppMaster platform, which offers a comprehensive suite of tools for app development.
