Archived topic
Feature Request - Global Colors & Dynamic Typography
7 replies · Started by Matt on September 30, 2021
Hi Guys,
I have been having a play with the new Global Colors & Dynamic Typography features and loving them.
On the Dynamic Typography settings page you have added the ability to apply typography styles to a 'custom' class. Just wondering if it is possible/feasible to add a similar functionality to the color settings. ie. being able to apply color/ hover color to an element with a specific class.
Also wondering if adding an 'important' checkbox to both of these might be useful?
I can see great benefit here when trying to override fonts and colors in 3rd party widgets and blocks without having to write custom code.
Just a thought. Thanks for a great product!
Hi there,
We explored this, but we determined that it took something relatively simple (adjusting a handful of colors) and made it too complicated for an average user.
Typography is a complex thing, so a more complex system makes sense. Colors on the other hand are a different thing completely.
That being said, it's not something I've personally given up on - I love the system/code behind the new Typography system, and would like to apply it to most styling aspects of the theme. The key is to find a way to do it without harming UX for all users (including the beginners).
!important is rarely necessary (unless what you're trying to overwrite is using it). Far better just to use more specific selectors :)
Thanks!
Hi Tom,
I appreciate the response and understand your reasoning.
From my point of view this functionality would help beginners as I would be able to hand off projects and say "All color settings are in the customizer", rather than having some there, some in a child theme/ custom css. Having the ability to give custom fonts and colors a nice label might also aid with this.
I didn't realise that you could use multiple selectors to increase specificity within this interface. Now that I know I take back my request for !important :)
Thanks
It really depends on the overall UI - it's definitely something we'll be playing with :)
Thanks again for your feedback!
Hi Guys,
Just wondering if there is a way to hook in and add additional options to the new Global Colors interface?
For my purpose I would like to add an additional dropdown to select a colour for all eg. h2's with the class 'sub-heading'.
Thanks.
Hi Matt,
Unfortunately, that's not within the capability of the current UI options for Colors.
But you can use global colors on custom CSS if you want.
From left palette to right palette, the color values for CSS use are:
1 --contrast: #222222;
2 --contrast-2: #575760;
3 --contrast-3: #b2b2be;
4 --base: #f0f0f0;
5 --base-2: #f7f8f9;
6 --base-3: #ffffff;
7 --accent
So for example, you want to use global color #3 on h2.sub-heading, you can do something like this:
h2.sub-heading { color: var(--contrast-3); }
Thanks Elvin. I guess it is either that or build in some color pickers in to the customiser. This just feels a bit old-school since you guys went and made the color-picking experience a whole lot nicer ;)
Thanks Elvin. I guess it is either that or build in some color pickers in to the customiser. This just feels a bit old-school since you guys went and made the color-picking experience a whole lot nicer 😉
I agree. But I believe this Colors module will follow Typography's example on the next patch. (Typography has a dropdown allowing "Custom Class" option). :D
