unkn0wn unkn0wn - 1 year ago 180
CSS Question

Change CSS root variable with jquery or javascript

I am using CSS variables in my webpage and making a sort of theme color,

:root {
--themeColor: #0afec0;
--hoverColor: #fff;
--bodyColor: #EEF1EF;

Now i've used
everywhere and i want to assign a random color to
at every reload. Is this possible?

Answer Source

You can do this pretty easy with something like:

document.documentElement.style.setProperty('--themeColor', 'red');

Update: Not sure if the question was just about changing the color as I thought. Now I've also added a getRandomColor() example. Just to get random stuff can be a big load of work depending if you want to save the last used color by the user or so ...

// array with colors
var colors = [

// get random color from array
function getColor() {
   return colors[
     Math.floor(Math.random() * colors.length)

// Set the color from array
document.documentElement.style.setProperty('--themeColor', getColor());
:root {
    --themeColor: orange;

a {
  color: var(--themeColor)
div {
  width: 100px;
  height: 100px;
  background-color: var(--themeColor);
<a href="#">Hello world</a>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download