Modifying the core colors like var(--secondary)

Support
1

Is there any way to change colors like var(--secondary) which are used in various places around the site? In the color settings in customize you can change the “secondary” color but this seems to have no affect on var(--secondary)

Thanks!

1 Like
2

I don’t know what you are doing, but var(–secondary) working for me:

code:

browser:

image

Let’s edit tertiary:

This image appears to depict a screenshot of a program for formatting color codes, as indicated by the presence of various options and a color palette. (Captioned by AI)
This image appears to depict a screenshot of a program for formatting color codes, as indicated by the presence of various options and a color palette. (Captioned by AI)623×206 5.3 KB

image

mmmm … jaffa:

image
image469×100 1.75 KB

2 Likes
3

If it were me, I’d have the problem you describe because I was changing one color scheme in the UX while using another in my theme component.

Your mileage may vary.

4 Likes
4

Here’s an example:

image
image1416×360 21.3 KB

Sure, I can help with that. (Captioned by AI)
Sure, I can help with that. (Captioned by AI)824×172 19.4 KB

It seems that these vars are not configurable. This is the copy / paste from my colors config:

"HT Colors": {
  "primary": "142546",
  "secondary": "FEF9F0",
  "tertiary": "4A7FE5",
  "quaternary": "FBC379",
  "header_background": "ffffff",
  "header_primary": "142546",
  "highlight": "ffff4d",
  "danger": "e45735",
  "success": "009900",
  "love": "fa6c8d",
  "hover": "ebf0f9",
  "selected": "dee6f6"
}

It seems like there must be some other way to set the color vars used by badges, etc.