How to parse and change colors of a CSS Stylesheet on a live website via JavaScript?

Question

Assuming the following CSS stylesheet is used on a live website. What is the best way to parse all the colors used on the stylesheet and change the values with new ones using JavaScript?

In this scenario, I can't create CSS classes to override the colors via plain CSS, so JavaScript is the only way to go. There is no manageable way to add or edit classes. Since they are dynamic and change on each new product release. And changes should happen only on Client side. With no need to store the overrides.

The goal is to re-theme an UI, overriding the existing color with a new color palette. Each old color will be converted into a new one. i.e #FFF -> #000 rgb(33,33,33) -> rgb(66,66,66)

.my-classdas90das {
  color: #000000;
}

.other-classAd21 {
  background: rgba(255,255,255);
  border-color: #222222;
}

.a-class438I {
  box-shadow: 1px 1px 1px rgba(44, 44, 44);
}

My first attempt was to loop and access the properties via:

document.styleSheets[1].cssRules[0].style

Is there any better way to do this?

You can always create classes in javascript and apply them: https://stackoverflow.com/a/1720483/3684265 — imvain2, Apr 25 '19 at 19:10
Possible duplicate of [How to dynamically create CSS class in JavaScript and apply?](https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply) — imvain2, Apr 25 '19 at 19:23
In this scenario, there is no manageable way to add or edit classes. Since they are dynamic and change on each new product release. So the solutions above can't work. — user3059415, Apr 25 '19 at 19:27

score 0 · Answer 1 · answered Apr 25 '19 at 19:19

0

If you have control over the initial colors going into your stylesheet, you can utilize CSS custom properties and change them later in JavaScript with little difficulty. Here's an example:

document.getElementById('change').addEventListener('click', () => {
  document.body.style.setProperty('--color1', 'red');
  document.body.style.setProperty('--color2', 'pink');
  document.body.style.setProperty('--color3', 'green');
  document.body.style.setProperty('--color4', 'purple');

});

:root {
  background: #eee;
  --color1: #555;
  --color2: rgba(255, 255, 255);
  --color3: #222222;
  --color4: rgba(44, 44, 44);
}

div,
button {
  margin: 1em;
}

.my-classdas90das {
  color: var(--color1);
}

.other-classAd21 {
  background: var(--color2);
  border: 2px solid var(--color3);
}

.a-class438I {
  box-shadow: 1px 1px 1px var(--color4);
}

<div class="my-classdas90das">
  my-classdas90das
</div>

<div class="other-classAd21">
  other-classAd21
</div>

<div class="a-class438I">
  a-class438I
</div>

<button id="change">Change Colors</button>

answered Apr 25 '19 at 19:19

Jon Uleis

17,693
2
33
42

This approach loses IE support for what that's worth – CollinD Apr 25 '19 at 19:22
Unfortunately I have no control over those existing colors. And the stylesheet that I need to parse doesn't use custom properties. :/ – user3059415 Apr 25 '19 at 19:25
@user3059415 I see. Do you need to change each individual color to another specific one, or are you overriding all colors to one new color? Can you elaborate more on what your outcome should be? – Jon Uleis Apr 25 '19 at 19:27
Surething. The goal is to re-theme an UI, overriding the existing color with a new color palette. Each old color will be converted into a new one. i.e #FFF -> #000 rgb(33,33,33) -> rgb(66,66,66) etc – user3059415 Apr 25 '19 at 19:32
You may want to consider using `document.documentElement` rather than `document.body` since it maps more directly to `:root`. – Heretic Monkey Apr 25 '19 at 19:40

How to parse and change colors of a CSS Stylesheet on a live website via JavaScript?

1 Answers1