Archived topic
Reference customizer colors in custom CSS
5 replies · Started by George on March 7, 2021
Is there a way to reference Customizer colors in my custom CSS? Basically, I am looking for functionality that changes all references of a certain color found in the Customizer that is also used in my custom CSS. For example, when I use CSS to underline the menu link color with the color value of the primary menu hover color: I would like that color to change in my CSS when that color is changed in the Customizer.
Does that tie in with the Global Colors currently in development or is there something I can do right now?
Hi there,
By custom CSS, do yo mean the one you've added on Additional CSS within the customizer?
I'm not sure I fully understand what you mean. Do you mean to dynamically change the custom CSS you've added when you change something from options available within the customizer UI?
If so, I believe that's not doable with PHP as the custom CSS added there are not dynamic. The things you add there hardcoded and directly saved as a hidden post within the database.
If you want variable CSS you may have to do something like this:
https://css-tricks.com/css-variables-with-php/
By custom CSS, do yo mean the one you’ve added on Additional CSS within the customizer?
No, when working with a Child theme and a separate CSS file.
Do you mean to dynamically change the custom CSS you’ve added when you change something from options available within the customizer UI?
Yes
If so, I believe that’s not doable with PHP as the custom CSS added there are not dynamic. The things you add there hardcoded and directly saved as a hidden post within the database.
How does GP store values from the Customizer?
No, when working with a Child theme and a separate CSS file.
You can try adding the values as PHP variable strings and set apply_filters() to their values.
How does GP store values from the Customizer?
While it differs on how its served depending on how you set it (inline vs. external CSS), they're saved on the database's wp_options table under the option name of generate_dynamic_css_output.
https://share.getcloudapp.com/L1uNlbQq
They're all clumped into one string so this will be difficult to deal with.
While you can attempt to pluck the values you need from the string using this filter, but I'm not exactly sure that'll work.
https://github.com/tomusborne/generatepress/blob/e030f57d2c26991074a6868265737424dac567d0/inc/css-output.php#L1156
Sounds messy. Thanks anyway!
No problem. :D
