I have this situation : some colors like primary, secondary I should override for some users.
I have a _variables.scss file :
$primary: #4a90e2;
$light: #f2f7fd;
$secondary: #f7981c;
$success: #27ae60;
$danger: #eb6057;
Now in my App.vue I want to override these colors like this :
.....
methods: {
changeStyle() {
const bodyStyles = document.body.style;
bodyStyles.setProperty('--primary-color', '#ef4d4d');
}
}
....
but is not working. What can I try next?
You're mixing SCSS variables with CSS3 variables here:
$primary: #4a90e2;.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:
$primary: var(--primary-color);functions.scss including color-contrast, tint-color, shade-color.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.