Make the primary site color customizable.

[kjellr]

Currently, our primary blue color (#0073aa) is hardcoded into the stylesheet. We need to give people the opportunity to customize it.

Related PRs:

• Feature/customizer color controll for featured image color overlay  #113: Adding basic color selection for featured images.
• Primary color set in Customizer to affect all elements.  #149: Expanding the color selection to every instance of the blue.

[fabiankaegy]

Just continued working on this. One question regarding @allancole's answer yesterday inside #149 is still open. Should there be separate color pickers for each element or just the primary color and the hover state for links buttons?

[designsimply]

Closed #85 and #149 in favor of consolidating here. Noting that opacity is covered separately in #121.

[celloexpressions]

One of the challenges with custom theme colors historically is ensuring that colors have adequate contrast. The plugin that allows color customization for Twenty Fourteen uses this approach to automatically check and adjust contrast. Twenty Seventeen uses a hue picker and hardcoded saturation and lightness values in hsl-defined colors to maximize flexibility while maintaining the general design intent.

For the featured image color, a hue picker may make more sense than a color picker. This offers a more-controlled customization that minimizes potential color contrast issues and maintains the design intent. A full color picker could make sense for the other uses of the blue, potentially with built-in contrast adjustments. I do recommend discussing all proposed color customization in one place as the implementation should be integrated in both code and UI. We should consider that the WordPress Philosophy includes several points that would encourage the use of fewer distinct options, which manage more colors with automated adjustments.

The Twenty Fourteen approach (which was ultimately shipped as a plugin due to the release schedule) is documented with some modernization of the customize API here: https://celloexpressions.com/blog/a-strategy-for-custom-colors-in-the-customizer/. This includes a library for color contrast checks; we would also want to leverage the customizer's notifications API added in WordPress 4.6.

I haven't put together a post detailing the Twenty Seventeen approach yet, but would be happy to do so if that's helpful. I can definitely help review any color-customization-related pull requests if you ping me. Twenty Seventeen also included a "dark" mode, which Twenty Nineteen could be a good candidate for as well. Here are a couple of Twenty Seventeen links for reference:

• Initial color customization PR: https://github.com/WordPress/twentyseventeen/pull/167/files#diff-c6cfd16cf4d2c86fe26ff272d81a7695
• Custom color exploration discussion: Explore Custom Colors twentyseventeen#116

[LittleBigThing]

Just referencing my thoughts here, to make it part of the discussion: #113 (comment)

[allancole]

Fixed and merged in #373 :-)