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

Popular posts from this blog

php - How to display all orders for a single product showing the most recent first? Woocommerce -

asp.net - How to correctly use QUERY_STRING in ISAPI rewrite? -

angularjs - How restrict admin panel using in backend laravel and admin panel on angular? -