unkn0wn unkn0wn - 22 days ago 14
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
var(--themeColor)
everywhere and i want to assign a random color to
--themeColor
at every reload. Is this possible?

Answer

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 = [
  "red",
  "green",
  "lime",
  "purple",
  "blue"
];

// 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>
<div>Test</div>

Comments