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

Question

Just installed the new 2019 theme. The customizer offers "default" and "custom" color options. When you select "custom", it shows a slider to pick the color, not the normal color-picker.

Unfortunately, using that slider is pretty hit and miss and the customizer does not offer a way to enter a precise color (hue).

Where do I need to go and what do I need to do to enter a precise color for this theme?

Note: I am NOT looking for a way to enter HEX color values. The slider seems to be focused on hue (as @leymannx answer confirms), but simply a way to be more precise than the slider allows me to be.

PS: I am no rooky with databases and code, so okay to send me there.

Answer 1

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:

• https://github.com/WordPress/twentynineteen/issues/613
• https://core.trac.wordpress.org/ticket/45619

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.

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.

Answer 2

Another option can be overwriteing the default CSS rules with new ones in your theme style.css as shown below. This also allow to have different colors for different elements (if needed).

/* ---------------- */
/*  3. 2020 Theme Primary colors
/* ---------------- */
.primary-menu a,
/*Arrows in Desktop*/
.primary-menu span.icon,
/*Categories in Single Posts*/
.entry-categories a,
/*The Menus*/
.expanded-menu a,
.mobile-menu a,
.footer-menu a,
/*Widgets*/
.widget-content a,
/*The Drop Cap*/
.has-drop-cap:not(:focus)::first-letter,
/*Latest Posts Block*/
.wp-block-latest-posts a,
/*Archives Block*/
.wp-block-archives a,
/*Categories Block*/
.wp-block-categories a,
/*Latest Comments Block*/
.wp-block-latest-comments a,
/*Calendar Block*/
.wp-block-calendar a,
/*File Block*/
.wp-block-file a,
/*Archive Page Title "Span"*/
.archive-title .color-accent,
/*Links in Single Posts; If we don't use P it will affect the buttons*/
.entry-content p a,
/*Pagination in Single Posts*/
.pagination-single a {
    color:#CD2653;
}

/*Social Menu*/
.social-menu a,
/*Groups with accent bg*/
:root .has-accent-background-color,
/*Button Block*/
.wp-block-button__link,
/*Reply Comments*/
.comment-reply-link,
/*Input buttons such us "Post Comment"*/
input#submit,
input.search-submit {
    background-color:#CD2653;
}

/*File Block Button*/
.wp-block-file__button {
    background-color:#CD2653!important;
}

/*Quotes*/
blockquote {
    border-color:#CD2653;
}

... and replace the default colour #CD2653 with your preferred one