library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update blog post

Browse Source
This commit is contained in:
Jeremy Thomas 2019-10-14 01:51:47 +01:00
parent c2d785ac56
commit 7b35fd0e07
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/_posts/2019-10-15-light-dark-colors.md
View File

@ -8,13 +8,13 @@ icon: "sun"
published: false published: false
--- ---
The new version **[Bulma 0.8.0](#)** is out! It comes with several bug fixes and a lot of nice new features: 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](#light-dark-colors) * [Light/Dark colors](#light-dark-colors)
* [Better visual look](#better-visual-look) * [Better visual look](#better-visual-look)
* [Panel colors](#panel-colors) * [Panel colors](#panel-colors)
* [4-value color map](#4-value-color-map) * [4-value color map](#4-value-color-map)
* [Scheme variables](#scheme-variables) * [Scheme variables for "Dark mode"](#scheme-variables-for-dark-mode)
More in the [Changelog](#). More in the [Changelog](#).
@ -132,10 +132,12 @@ $custom-colors: (
This is processed by the updated `mergeColorMaps()` Sass function. This is processed by the updated `mergeColorMaps()` Sass function.
{% include elements/anchor.html name="Scheme variables" %} {% include elements/anchor.html name='Scheme variables for "Dark mode"' %}
There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter` 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: They replace the `$white` and `$black` occurences in the codebase.
This makes it easy to create a **"Dark mode"** simply by swapping the values:
```sass ```sass
$scheme-main: $black $scheme-main: $black
@ -144,3 +146,7 @@ $scheme-invert: $white
``` ```
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. 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.
<hr class="hr">
The new 0.8.0 version should be fully compatible with any Bulma setup. Feel free to <a href="https://github.com/jgthms/bulma/issues" target="_blank">post an issue</a> if you encounter any problem upgrading.