Change CSS root variable with jquery or javascript -
i using css variables in webpage , making sort of theme color,
:root { --themecolor: #0afec0; --hovercolor: #fff; --bodycolor: #eef1ef; }
now i've used var(--themecolor)
everywhere , want assign random color --themecolor
@ every reload. possible?
you can pretty easy like:
document.documentelement.style.setproperty('--themecolor', 'red');
update: not sure if question changing color thought. i've added getrandomcolor()
example. random stuff can big load of work depending if want save last used color user or ...
// array colors var colors = [ "red", "green", "lime", "purple", "blue" ]; // random color array function getcolor() { return colors[ math.floor(math.random() * colors.length) ]; } // set color array document.documentelement.style.setproperty('--themecolor', getcolor());
:root { --themecolor: orange; } { color: var(--themecolor) } div { width: 100px; height: 100px; background-color: var(--themecolor); }
<a href="#">hello world</a> <div>test</div>
Comments
Post a Comment