This content originally appeared on Bootstrap Blog and was authored by Bootstrap Blog
Our second alpha release of v5.3.0 has landed with a ton of enhancements and bug fixes for our new color modes! There’s still more to come, but we’ve held off shipping until we ironed out enough issues. Huzzah, we have!
This v5.3.0 release is a monumental update for Bootstrap 5. It’s big enough that it could’ve been a v6 on its own, but we wanted to do right by the community and get color modes out the door without the massive major release upgrade. We’re getting super close now, so bear with us as we continue to chip away at this.
And, in the meantime, here’s the rundown on what’s changed since our first alpha. Have a read through the Migration guide for the first alpha, or the blog post for the release announcement, if you’re just getting into v5.3.0.
CSS variables
- Removed several duplicate and unused root CSS variables.
Color modes
-
Dark mode colors are now derived from our theme colors (e.g.,
$primary) in Sass, rather than color-specific tints or shades (e.g.,$blue-300). This allows for a more automated dark mode when customizing the default theme colors. -
Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border.
-
Snippet examples are now ready for dark mode with updated markup and reduced custom styles.
-
Added
color-scheme: darkto dark mode CSS to change OS level controls like scrollbars -
Form validation
border-colorand textcolorstates now respond to dark mode, thanks to new Sass and CSS variables. -
Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn’t update properly.
-
Our
box-shadows will once again always stay dark instead of inverting to white when in dark mode. -
Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes.
-
Improved docs code syntax colors and more across light and dark modes.
-
Removed the ability to nest light mode components within dark mode. This was super incomplete unfortunately and just isn’t practical without quadrupling our selectors for every component. Maybe in v6!
Typography
- We no longer set a color for
$headings-color-darkor--bs-heading-colorfor dark mode. To avoid several problems of headings within components appearing the wrong color, we’ve set the Sass variable tonulland added anullcheck like we use on the default light mode.
Components
-
Cards now have a
colorset on them to improve rendering across color modes. -
Added a new
.nav-underlinevariant for our navigation with a simpler bottom border under the active nav link. See the docs for an example. -
Navs now have new
:focus-visiblestyles that better match our custom button focus styles.
Helpers
-
Added a new
.icon-linkhelper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too. -
Added a new focus ring helper for removing the default
outlineand setting a custombox-shadowfocus ring.
Utilities
-
Renamed Sass and CSS variables
${color}-textto${color}-text-emphasisto match their associated utilities. -
Added new
.link-body-emphasishelper alongside our colored links. This creates a colored link using our color mode responsive emphasis color. -
Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. Explore the new links utilities.
-
CSS variable-based
border-widthutilities have been reverted to set their property directly (as was done before v5.2.0). This avoids inheritance issues across nested elements, including tables. -
Added new
.border-blackutility to match our.text-blackand.bg-blackutilities. -
Deprecated Deprecated the
.text-mutedutility and$text-mutedSass variable. It’s been replaced by.text-body-secondaryand$body-secondary-color.
Docs
- Updated docs page table of contents to use Scrollpy (shoutout to our v3 docs!).
- Revamped syntax highlighting colors for code snippets across color modes.
- Improved content and rendering of several docs callouts.
- Document more color mode features and usage suggestions.
- Added theme toggling to examples pages.
- Updated dependencies across the board, including in our guides.
Known issues
While not an exhaustive list, here’s some of the stuff we’re going to be working on before calling this release stable. You can track these and more in the v5.3.0-stable project on GitHub.
- Add new functionality to utilities with mixins and functions.
- Some components need another pass at enabling full-color mode responsiveness. Bear in mind, some components like buttons won’t get full-color mode adaptivity until v6.
- Labels in disabled floating forms have incorrect rendering.
- Docs need to be updated for modifying theme colors across color modes.
- Examples need another pass for dark mode support, new screenshots, and more.
- Improve click/tap area for range inputs.
Up next will be the stable release of v5.3.0. Originally this was planned as a beta, but I think we’re getting close enough to call this final with one more release.
Get the release
Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:
npm i bootstrap@v5.3.0-alpha2
Read the GitHub v5.3.0-alpha2 changelog for a complete list of changes in this release.
Support the team
Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.
This content originally appeared on Bootstrap Blog and was authored by Bootstrap Blog
Bootstrap Blog | Sciencx (2023-03-24T14:40:00+00:00) Bootstrap 5.3.0-alpha2. Retrieved from https://www.scien.cx/2023/03/24/bootstrap-5-3-0-alpha2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.