Changing Theme Colours

[ibjorn]

I was just wondering if anyone could maybe give me some tips on how to tackle changing theme colours for certain pages on a theme-ui based site.

I have a GatsbyJS site that sources from a headless WordPress.

On some of my pages I change the background colour, and it also involves changing the nav colour in the header, etc.

Due to my inexperience at this stage, my current solution is to do a conditional check on the pathnames in my layout wrapper and then passing in a style from my theme file.

This seems to give me a serious performance hit. Also, sometimes the design goes a bit wacky and the styles don't pull through properly.

I've gone through the theme-ui docs quite a lot, and am still unsure about how to tackle this issue. Setting the colour mode doesn't quite seem like the right option and I'm having a hard time figuring how to use the themes option and "swapping out" themes?

Any tips, or tricks or words of wisdom anyone wouldn't mind sharing with me?

[lachlanjc]

Hmm! I'd probably not use the Theme UI theme for something like that—could you just use standard CSS Custom Properties instead?

[ibjorn]

I tried something like this, but I still end up with a similar situation. Considering, the changes are made in my layout wrapper.