Modifying the core colors like var(--secondary)

Support

AI-generated summary

The discussion is about modifying the core colors like var(--secondary) used in various places around the site. abrambailey is having trouble changing these colors, despite being able to change the “secondary” color in the color settings. merefield says that var(--secondary) is working for them and provides examples of editing tertiary colors. pfaffman suggests that the issue might be due to using a different color scheme in the UX and theme component. abrambailey provides an example of their color config and notes that the vars used by badges, etc. seem not to be configurable, suggesting there must be another way to set these color vars.

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!

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

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

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.