How do I change Twenty Nineteen’s primary color without using the color slider in the theme customizer?

That’s indeed an interesting question. Looking at the following issues – both closed as won’t fix – I’d reason that replacing this color slider with a color picker is not recommended:

Thing is, that Twenty Nineteen calculates the colors that will be displayed in the frontend from hue, saturation and lightness (HSL). And it does that for maximum accessibility. Letting users pick their own Hex values led to very inaccessible color combinations in places where different nuances of a color are used for example for hover and select states or for overlays.

So actually, your best bet is to either disable the color slider in your child theme and completely customize the CSS from your child theme’s styles sheets:

function wpse_338301_customize_register( $wp_customize ) {
      $wp_customize->remove_section( 'colors' );
}
add_action( 'customize_register', 'wpse_338301_customizer' );

Or – and that’s not recommended – disable the color slider from your child theme as shown above and override the default values by converting your Hex color to HSL and adjust all the different color nuances by adding filters for all the different values you’d need to adjust. Taking your question’s ID as Hex value #338301 for example in HSL that would be hsl(97, 98%, 26%). I used a random free online Hex to HSL color converter.

enter image description here

First set the hue value:

function wpse_338301_init() {
      set_theme_mod( 'primary_color', 'custom' );
      set_theme_mod( 'primary_color_hue', 97 );
}
add_action( 'init', 'wpse_338301_init' );

Next set all saturation values:

function wpse_338301_saturation() {
      return 98;
}
add_filter( 'twentynineteen_custom_colors_saturation', 'wpse_338301_saturation' );
add_filter( 'twentynineteen_custom_colors_saturation_selection', 'wpse_338301_saturation' );

And finally all lightness values:

function wpse_338301_lightness() {
      return 26;
}
add_filter( 'twentynineteen_custom_colors_lightness', 'wpse_338301_lightness' );
add_filter( 'twentynineteen_custom_colors_lightness_hover', 'wpse_338301_lightness' );
add_filter( 'twentynineteen_custom_colors_lightness_selection', 'wpse_338301_lightness' );

For more info see Twenty Nineteen’s inc/color-patterns.php.

Leave a Comment