dynamically change colors css - css

Question

I am trying to dynamize color changing in my application built with react and CSS modules. I want to display complementary colors based on one color for each time.
To do that I defined my colors manually
style: [
{
toolbarColor:'#c80eff',
centerWidgetColor:'#0040ff',
buttomWidgetColor:'#0040ff',
rightWidgetColor:'#ffbf00',
},
{
toolbarColor:'#c80eff',
centerWidgetColor:'#fab81e',
buttomWidgetColor:'#00ff9c',
rightWidgetColor:'#12b274',
},...
But it is a long work to do and it is impossible to define all the cases.
For that, my question is, is there any equation to get complementary colors, shades, etc based on one color reference ( hex or rgb )

Answer 1

You can do it in two ways:
CSS
For all CSS, use variables and mixins ( for more information read this article: http://thesassway.com/intermediate/mixins-for-semi-transparent-colors ) but for that code:
$color00: #c80eff;
$color02: #0040ff;
$color03: #00ff9c;
Defining your colors will always create consistency. Then, create a mixin of the like similar to:
```
#mixin alpha-background-color($color, $background) {
$percent: alpha($color01) * 100%;
$opaque: opacify($color, 1);
$solid-color: mix($opaque, $background, $percent);
background-color: $solid-color;
background-color: $color02;
}
```
Finally, you would apply to your item:
```
.button {
#include alpha-background-color(rgba(black, 0.5), white);
}
```
Otherwise, you can do that with JS:
set your variable for the color
$color00: #c80eff;
set a trigger in the button
<button onClick="changeColor()" > Change color </button>
set the function, something on the lines of :
const changeColor = ( opacity) => {
const b = document.querySelector('.button');
let colorChange = b.style.backgroundColor;
// change opacity
b.style.opacity = `${opacity}`;
}
changeColor('set here the opacity you would want');
document.querySelector('.button').addEventListener('click',
changeColor);
Summary and suggestion:
However, any good project will have some defined color palette and styles, if you set those up in variables in CSS then you simply re use them everywhere else in the project. Otherwise it will end up being inconsistent.

Answer 2

Dynamic CSS Background Color
If you're using a framework like Vue and you are receiving your data from a database that contains stuff like the colors etc, you could either have specific classes but that gets tedious...
I recently found that you could pass a css variable to your html as a style property and then use that variable in your css...
Of course, this needs to be edited to change the below red to a variable of your choosing, this is just the concept.
<style>
.myDiv {
height: 200px;
width: 200px;
background: var(--backgroundColor);
}
</style>
<div class="myDiv" style="'--backgroundColor: red;'>Some block</div>
From here, you would use Javascript to either change the value of your css variable with the below
const root = document.querySelector(':root');
root.style.setProperty('--backgroundColor', 'blue');
Or in Vue logic simply dynamically change the value with something like this
<div class="myDiv" :style="'--backgroundColor: ' + backgroundVariable + ';'">
Some Block
</div>