Consider using CSS variables for Global Colours

[wplit]

Describe the feature you'd like to see included in Oxygen. Not a feature, just a different way of implementing the styles. The benefit being that we could then easily override the colours when needed using CSS instead of changing inside Oxygen. ie if clients need to change the 'brand colour' to a few shades darker, this can more easily be built into options page using something like ACF Pro. Rather than needing to open up Oxygen.

What are the use cases for this feature? Giving clients more options on their site that more resemble the type of options they may have had using a custom theme. I often built in some basic overall site colour settings with themes for easy tweaking, using the customizer etc.

If the global styles were applied in Oxygen via CSS variables. We could more easily target the variables to effect everywhere on the site that the colour is set. Currently, we'd have to find the elements manually to override with CSS. (or tell them open up Oxygen and teach how to change the colours there)

How would it work? Oxygen would set up a new variable for every global colour added. And use to apply them to elements.

:root {
     --oxy-primary-color: green;
     --oxy-secondary-color: red;
}

.oxy-nav-menu {
     background-color: var(--oxy-primary-color);
     border: 1px solid var(--oxy-secondary-color);
}

..etc.

Then we could easily setup global settings for clients using an options page with ACF, or even customizer which is often more familiar for them.. where they'd have a colour picker that allows them to change their brand colours if needed. All we have to do as dev's is target the variables instead of finding all the selectors manually.

[wkoehn]

This would be incredible, especially when working with the new user design sets to enable an element dropped in to pick up brand colors from a custom field on an admin page or as David said via the customizer.

[bossion]

nice enhancement function. hope oxygen team add it.

[cstrouse]

OxyMonster's Framework plugin uses a system like this in their latest version and it's pretty nice.

[ayhanmalkoc]

+1

[adrien-robert]

+1

[MattHag]

Much needed, not necessarily for client control, just for a better color handling in Oxygen. Every new CSS framework relies on it, instead of Oxygen's antique color system.

[MattHag]

The features mentioned here, are comparable to this one https://github.com/soflyy/oxygen-bugs-and-features/issues/2148

[cyn3rgy]

for anyone looking for this solution, I found a small script that adds the global colors into css. Not quite the same but it does enable the use of global colors in css. Very handy. https://code.dplugins.com/get-oxygen-global-colors-as-css-variables/