bulma/docs/_posts/2019-10-15-light-dark-colors.md

title, layout, introduction, color, name, icon, published

title	layout	introduction	color	name	icon	published
Light and Dark colors, better look, larger buttons, panel colors, and more	post	A big update for more colors and flexibility	primary	Light/Dark colors, better look, larger controls	sun	false

The new version Bulma 0.8.0 is out! It comes with several bug fixes and a lot of nice new features:

• Light/Dark colors
• Better visual look
• Panel colors
• 4-value color map
• Scheme variables

More in the Changelog.

{% include elements/anchor.html name="Light/Dark colors" %}

Each main color ("primary", "info", "success", "warning", "danger") now comes with a *-light and a *-dark version. They are calculated using 2 new color functions:

• findLightColor() which finds the light version of a color
• findDarkolor() which finds the dark version of a color

The light colors are used by the button element:

The light and dark colors are used by the message component, which generates much prettier colored versions. See the difference between before (left) and after (right):

{% include elements/anchor.html name="Better visual look" %}

Some of the Bulma colors have been updated:

Color	Before	After
$green	{% include elements/color-square.html value="hsl(141, 71%, 48%)" %}	{% include elements/color-square.html value="hsl(141, 53%, 53%)" %}
$cyan	{% include elements/color-square.html value="hsl(204, 86%, 53%)" %}	{% include elements/color-square.html value="hsl(204, 71%, 53%)" %}
$red	{% include elements/color-square.html value="hsl(348, 100%, 61%)" %}	{% include elements/color-square.html value="hsl(348, 86%, 61%)" %}

The shadows of the box and card have been improved:

{% include elements/anchor.html name="Panel colors" %}

The panel component is now available in all colors:

{% include elements/anchor.html name="4-value color map" %}

The $colors Sass map now accepts, for each of its values, a map of up to 4 values. For example: the key "info" now has the ($info, $info-invert, $info-light, $info-dark) map.

If you provide a $custom-colors map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:

$custom-colors: (
  "lime": (lime),
  "tomato": (tomato, white),
  "orange": ($orange, $orange-invert, $orange-light),
  "lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
);

This is processed by the updated mergeColorMaps() Sass function.

{% include elements/anchor.html name="Scheme variables" %}

There are 6 new $scheme derived variables: $scheme-main $scheme-main-bis $scheme-main-ter $scheme-invert $scheme-invert-bis $scheme-invert-ter They replace the $white and $black occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:

$scheme-main: $black
$scheme-invert: $white
// etc.

That is also why most of the codebase now references derived variables ($text, $background, $border etc.) instead of initial ones ($grey, $grey-lighter, $grey-darker etc.): updating the derived variables will affect all elements and components directly.