I'm using the Twenty Twenty theme to create a website, and I want to totally disable the automatic colors that Wordpress generates based on the accent hue. I have very specific branding guidelines to follow, and I can't have automatically generated colors appear out of nowehere. Manually overriding this stuff with CSS !important everywhere it appears is just ugly, so I was wondering if it's possible to do it in a more elegant way. And also, where can I enter specific RGB values for the accent color, instead of relying on the hue slider?

I'm using the Twenty Twenty theme to create a website, and I want to totally disable the automatic colors that Wordpress generates based on the accent hue. I have very specific branding guidelines to follow, and I can't have automatically generated colors appear out of nowehere. Manually overriding this stuff with CSS !important everywhere it appears is just ugly, so I was wondering if it's possible to do it in a more elegant way. And also, where can I enter specific RGB values for the accent color, instead of relying on the hue slider?

• theme-development
• themes
• theme-customizer

4 Answers 4

Building on the answer from Aristeides, here is a complete working code example of using the theme_mod_acccent_accessible_colours filter. This is tested and working in version 1.1 of TwentyTwenty and version 5.3.2 of WordPress.

You can place this code in your functions.php file and change the colours in the array to what you'd like. In the code shown below I have changed the 'accent' colour to a dark purple (#7f5871).

/* Hook into the colours added via the customiser. */
add_filter( 'theme_mod_accent_accessible_colors', 'op_change_default_colours', 10, 1 );

/**
 * Override the colours added in the customiser.
 *
 * @param array $default An array of the key colours being used in the theme.
 */
function op_change_default_colours( $default ) {

    $default = array(
        'content'       => array(
            'text'      => '#000000',
            'accent'    => '#7f5871',
            'secondary' => '#6d6d6d',
            'borders'   => '#dcd7ca',
        ),
        'header-footer' => array(
            'text'      => '#000000',
            'accent'    => '#7f5871',
            'secondary' => '#6d6d6d',
            'borders'   => '#dcd7ca',
        ),
    );

    return $default;
}

I had never used this theme until I read your question, so I decided to install it to see what you're talking about.

I'm with you, not a fan of the auto colors, what a horrible idea. They say its for usability. You can read about it HERE.

To answer your question, there is no built in way to change the colors, besides what you have already been doing. There also isn't a way to enter a specific color value for the primary color slider.

You could however create a child theme and add your own customizer options. This would be more work then just manually overriding them in CSS like your doing.

It's actually pretty easy... You can use a filter on theme_mod_accent_accessible_colors. You can see how the option is formatted here: https://github/WordPress/twentytwenty/blob/master/functions.php#L636

You may lookup the filter-call return apply_filters( 'twentytwenty_get_elements_array', $elements ); in functions.php then comment it out.