Change the color on the basis of button selected

0
Hi experts,    Suppose I have a page, so I want it to be divided in two. In one part i have 2 buttons-red and blue. So when I click on red button the other side of the page should turn red. If i click blue button other side of the page should turn blue, I am not getting how can I do it. Can anyone help me out with this from scracth in details please?  
asked
2 answers
1

you can make it work with dynamic class.

On your page, you have an object with a boolean attribute. 

if you click on the red button. you change that attribute to true. 

if you click on the blue button you change that attribute to false. 

Then in the dynamic class on a container of your page, you put a condition on the object. 

something like :

if $currentObject/attribute then '.red’ else 

'.blue’

 

then you define the style that you want in the class .red and .blue (inside main.scss).

 

If you need design control over the topbar, this is a little bit more complicated, but this is still doable using javascript. on the click of a button, you add the class .red or .blue on the body. something like : 

document.getElementsByTagName("body")[0].classList.add('red’);

document.getElementsByTagName("body")[0].classList.remove('blue’);

answered
0

we use css-variables for this.

it depends on how far you want to take this, I think the easiest solution would be to have a non persistent entity that has a boolean, and then you can just toggle a class such as “bg-danger” and “bg-primary”.

but if you want to go down a fully customizable UI, def dive into css-variables

 

https://www.youtube.com/watch?v=VfDWCfLn128

answered