Twenty Seventeen: WooCommerce checkout details not readable in Dark color scheme

[madeincosmos]

With the Dark color scheme enabled some WooCommerce elements render with white text on white background. So far I've noticed:

Payment method details at checkout:

Screenshot: ​http://cld.wthms.co/wwk2

Bookable product cost:

Screenshot: ​http://cld.wthms.co/e5gK

Steps to reproduce:

1. Enable Dark color scheme on any WooCommerce site,
2. Add a product to cart and proceed to checkout,
3. Observe how payment method descriptions show in white on white.

All CSS code for the payment method description colors come from the theme code (twentyseventeen.css sets background color, colors-dark.css sets font color).

[sami.keijonen]

Thanks @madeincosmos for ticket! Do you happen to have live demo site for this so I can quickly take a look? I'm not that familiar with Woocommerce.

[mp518]

yes @madeincosmos you are right WooCommerce payment_box payment_method_cod class css backgraound is white and Twenty Seventeen \css\colors-dark.css not added any kind ok this class css so this text is not show in white background.

I have added patch in this patch one new css class added and background is added black so text should be show in when user working on dark screen.

Reagrd,
Mahesh

[mp518]

Added new css in \css\colors-dark.css

[mp518]

after added css screenshot

[sami.keijonen]

Thanks @mp518 for patch. If I understand this correctly, this is for overwriting Woocommerce base styles?

I'm pretty sure we don't add support for plugins (like Woocommerce) but this would be great solution for @madeincosmos. The CSS snippet can be added via child theme style.css or via the Customizer Custom CSS.

[mp518]

Hello @sami.keijonen,

Thanks for review patch and this is only for apply when Color Scheme is dark other wise not apply this style.as per my side this way is better not in style.css:)

Yes you are right regarding support for plugins.

[sami.keijonen]

There is colors-dark body class so custom CSS would look like this in child theme.

.colors-dark .wc_payment_method .payment_box { 
   background: #333; 
}

Anyways this is just my personal opinion about not adding support for plugins out there:)

[mp518]

Yes right i have updated patch.

[mp518]

updated

[lukecavanagh]

Patch Update

[swissspidy]

Thanks for your report, but such third-party compatibility fixes should be made by the third-parties, not by the default theme. We do not have such compatibility styles in Twenty Seventeen and shouldn't start adding them IMHO.

WooCommerce has a special stylesheet for Twenty Seventeen, see ​https://github.com/woocommerce/woocommerce/blob/124f41a2b747f0d59e740140688b7498736c1575/assets/css/twenty-seventeen.scss

You should report this in an issue on their GitHub repository and submit a PR for it.