[Vuejs]-Make colors dynamic on runtime on Vuejs and Bootstrap

by

0👍

You’re mixing SCSS variables with CSS3 variables here:

  • The variables defined in your scss files are SCSS variables i.e. $primary: #4a90e2;.
  • The variables defined in your App.vue i.e. bodyStyles.setProperty('--primary-color', '#ef4d4d'); are CSS variables.

These are entirely 2 different variables.

In order, to dynamically change your colors via JavaScript in Vue, you’ll need to use CSS variables in your code. For example:

color: var(--primary-color); /* Instead of using $primary */

:root {
    --primary-color: #4a90e2
}

The problem here is you’re using bootstrap and you would need to refactor your codebase to use CSS variables throughout your SCSS code, including overwriding bootstrap variables. This is not a simple task as I can tell from my experience. My approach was:

  1. Overwrite bootstrap color variables to SCSS variables e.g. $primary: var(--primary-color);
  2. Overwrite bootstrap color functions defined in functions.scss including color-contrast, tint-color, shade-color.
  3. Overwrite and refactor boostrap’s buttons.scss, alerts.scss and tables.scss.

My use case was different and yours might entirely be different. A simpler approach would be to not use bootstrap (if your not using bootstrap much) but it is up to you on how you want to handle this.

Another approach could be not changing CSS variables and compiling your SCSS through Node.JS on the server to generate a css file.

Leave a comment