How to disable automatic colors in the Twenty Twenty theme?

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?

Share Improve this question edited Jan 23, 2020 at 11:25 asked Jan 23, 2020 at 11:14 Meeep 1131 silver badge8 bronze badges

Add a comment |

4 Answers 4

Sorted by: Reset to default 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.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

4 Answers 4