search

johannesjo / angular-material-css-vars

Little library to use css variables with @angular/material
https://johannesjo.github.io/angular-material-css-vars/
MIT License
194 stars 32 forks source link

Checkbox check mark bad contrast in dark mode #147

Closed json-derulo closed 1 year ago

json-derulo commented 1 year ago

:ghost: Brief Description

In dark mode, the contrast color for the checkbox check mark is not applied when using primary or warn color. If the primary or warn color is dark, the normal text color (white) is used, which by chance has a good contrast. But when the primary or warn color is light, the contrast is very bad:

image

For the accent color, and in light mode, the auto contrast works correctly.

:pancakes: Version

5.0.2

Steps To Reproduce

Steps to reproduce the behavior:

  1. Open demo: https://johannesjo.github.io/angular-material-css-vars/
  2. Set light colors
  3. Make sure dark mode is used
  4. Go to "Form inputs" tab
  5. Check the checkboxes

:police_car: Expected behavior

The auto contrast should be considered, for light colors the checkmark should be dark.

:heavy_plus_sign: Additional context

The selector which should set the contrast color is being overridden:

image