Welcome
Theme Colors
While Vuero was previously using predefined SCSS color variables that could be used for customization before the Sass compilation. With Vuero 2.0, this is now over. We completely switched to a new native CSS Variables
setup. First it means that you can dynamically change any color at runtime. It also means that you can scope those changes to one or several components. However each change has a cost. We had to switch to a new Bulma setup called Bulma CSS Vars
, which completely rewrites Bulma variables to CSS variables.
Theming
Changing Vuero colors is now a bit more complicated than before but we will point you to the right files so everything remains as easy as before. To customize Vuero base colors, which are used to generate all derived ones, you need to edit src/bulma-css-vars.config.js
. There you can edit all the primary
and other related base variables. Please note that we also switched the base notation to HSL
in replacement of HEX
.
Customizing CSS Variables
We created a new folder and some bew files in src/scss/css-variables
. There, we use a new utility mixin src/scss/css-variables/_mixins.scss
to generate all our colors in the other files. Please also note that you can also customize font variables and corner radiuses at runtime.