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.
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
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.