Javascript and color code change in one go

JavaScript
1 
.class1 {
	background-color: #A83A23;
}
.class2 {
	border: 2px solid #A83A23;
}
.class3 {
	color:#A83A23;
}

Question:

The above is a hypothetical application of color, in a real project color code: #A83A23, for example, maybe used 70-100 times across various files such as layout.css, style.css or responsive.css.

Is there a JS way if we can change color code with a quick JS code?

2

You can do it with custom variables and overriding them via the style tag and/or js.

A quick (jQuery because I’m too busy atm to remember the vanilla syntax) example. Three paragraphs, each setting the color a different way.

2 Likes
3

What happens when that blue is switched out for yellow. When all the type fails to be seen because once the background was blue and now it’s yellow and you are using light type color. What about the colors of the buttons through the site. What about the specific instances where the the perfect, hue, saturation was balanced now to be destroyed with what seems like a trivial change. Change one thing in a design and it can destroy the whole thing. Even just a color. Color plays a huge role in design.

4

And when we do this we will be in the realm of sass CSS?
I tried something like this:

/*Color*/
:root {
  --var1: red;
}

.clout {
  border: 2px solid var(--var1);
}

It doesn’t seem to be working.

5

It’s working for me? What isn’t working for you?

1 Like
6

I was replicating my code for your perusal in codepen, but it worked there. Looks like in local there is some other issue. I will figure it out later, Thanks for your help.

1 Like
7

Why don’t you just replace all occurrences of the color you want to change to a

var(–my-new-color)

and define the color in one file which is always loaded?

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.