referring to WordPress colours defined in “Customize”

  • Hi,
    i’m developing a website, where the main colours of the site are defined under “Color” in “Customize”. I have several objects on my site that i would like to give those same colours. However, the colour scheme may change in the future. Is there any way to refer in these objects to the colours that are set under “Color” in “Customize”, so that when we update the colour scheme there, all these objects change alongwith it? (currently I’m colouring the objects with specific colours, but as said, the colour scheme may change, and then I have to reset the colours for all the objects)
    thanks for the help,
    Rik

Viewing 3 replies - 1 through 3 (of 3 total)

  • It depends on your theme.
    Most themes generate CSS dynamically to account for the colors chosen. That limits the usage to the main parts of the theme. In this usage, a child theme could emit its own classes using the theme’s variables.
    This looks like PHP code to output normal CSS using variables in PHP. The result looks like someSelector {color: #efefef;}.

    More modern themes use CSS variables for theme options, and colors are usually the best usage of CSS variables. For this case, the theme’s CSS references the variable, and the variable is defined dynamically. If your theme does this, you can easily define styles to also reference the CSS variable in Additional CSS, and the objects styled will change whenever you tweak the color in Customizer.
    This looks like PHP code to output CSS variables. The result looks like :root { --colorname: #efefef;}. The CSS variable is referenced like someSelector {color: var(--colorname);}.

    You can use the CSS variable method independent of your theme, though if you want it to tie into the Color controls, then you have to use what the theme is using.

    Thread Starter rik1234

    (@rik1234)

    brilliant, thanks for the extensive reply @joyously , much appreciated! I’ll email the theme developer to ask for their take on this.

    Moderator bcworkz

    (@bcworkz)

    If you want to get the color value that was saved by the customizer for use in dynamically styling your elements, try looking in the return from get_theme_mods(). If the color you want is in there, note the associated name. You can then get that specific value with get_theme_mod().

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘referring to WordPress colours defined in “Customize”’ is closed to new replies.