1

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.

2

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.

  • Thanks. Think you hit the nail on its head. Not so much looking to use a specific HEX color as I am to be more precise in entering the hue. I do agree with 2019 theme's accessibility goals. – Marjan Venema May 21 '19 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.