Boosted v5.3.3 #2492

julien-deramond · 2024-02-23T11:27:45Z

julien-deramond
Feb 23, 2024
Maintainer

Boosted v5.3.3 is here! — following Bootstrap v5.3.3.

⚠️ THIS VERSION IS NOT A DOT VERSION! ⚠️

As mentioned in previous releases, Bootstrap released the color mode in v5.3.0 allowing to create themes, and especially the dark mode. Our designs for the dark mode were not ready at this time so we kept the technical mechanism, but we hadn't implemented the dark mode for Boosted.

The dark mode is now implemented in Boosted from this v5.3.3, and it contains breaking changes. Sorry for that, we couldn't do it differently...

Please review the GitHub v5.3.3 changelog for a complete list of changes since our previous release, and have a look at Boosted website in version 5.

Don't hesitate to use our migration guide to v5.3.3 where you'll find all the needed details to bump the Boosted dependency.

The Dark Mode

The Dark mode is obviously the main feature of this release!

The Documentation

We are the first clients of Boosted with our documentation which is now available in dark mode too! We've made our best to describe how to use the dark mode and the color modes properly in your projects.

It automatically detects by default your OS and/or browser settings in auto mode to use light or dark mode. And you can force the rendering to light or dark mode thanks to a theme selector on the top-right corner of the page:

Technical side

The dark mode has an impact on how you should use Boosted!

Learn more by reading the new color modes documentation.

From a general point of view, the dark mode is optional on Orange websites. However, a new concept has been introduced and replaces our dark variants for components. It is referred to as “contextual dark mode” and is based on the data-bs-theme="dark" attribute. It is used to switch a component or a container to dark mode, independently of the global color mode. It implies that all the .{component}-dark classes have been removed from Boosted and that ${component}-*-inverted Sass variables have been deprecated.

Please note that data-bs-theme (default, light or dark) automatically sets the color and background-color CSS properties to inherit on the element it is applied to. This means that some of our components have been adapted to this new behavior by setting their default colors and background colors differently (some of them are not transparent). Please double-check that it doesn’t break your design. And more generally, please check carefully that this new version doesn’t break your design even if you didn’t use the dark variants before.

The use of colors has been revamped to be more consistent and easier to use. During the process, some colors have been modified in light mode to be darker and ensure a better contrast: primary, success, and info.

All our helpers and utilities have also been adapted to the new color modes mechanism and automatically switch their colors and background colors depending on the current color mode. As a result, you should for instance now rather use .text-bg-{color} classes instead of .bg-{color} classes when possible for automatic contrast.

Retrieve our color palette in the new color palette documentation.

Retrieve our color theme in the new color theme documentation that gathers the useful CSS variables switching between light and dark mode.

Components rendering

The rendering of some components has been updated in order to be able to work both in light and dark mode, and stick to the Bootstrap philosophy.

Please read carefully the changes mentioned in the migration guide.

For instance, the secondary button is now black in light mode, and you still have access to the outline secondary button to keep the previous rendering.