Dark mode background overrides text colors on checkboxes when using class dark mode variant

[johnathanludwig]

What version of @tailwindcss/forms are you using?

0.3.3

What version of Node.js are you using?

14.15.4

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/johnathanludwig/tailwind-forms-dark-mode

Describe your issue

In light mode you can style a checkbox by setting a background color for the base checkbox, and a text color for the checked version of the checkbox.

With dark mode via the class method, the background classes sets both the unchecked and checked color removing the ability to customize.

The styling works properly when using media for dark mode.

Reproduction Steps:

1. Build tailwind using @tailwindcss/forms and enable dark mode using the class method.
2. Add checkbox with a dark background color class and dark text color class.
3. Enable wrap the checkbox in a dark class.
4. Check the checkbox

Expected Results

The text color should be displayed when the checkbox is checked.

Actual Results

The background color is used for both checked and unchecked checkboxes.

[colinbate]

In the mean time you should be able to get around this by adding this to whichever file you are including tailwind from:

.dark [type="checkbox"]:checked,
.dark [type="radio"]:checked {
  background-color: currentColor;
}

[johnathanludwig]

@colinbate Thank you, that definitely works as a workaround for now!

[adamwathan]

Just some notes for myself, this is because the selector .dark .dark\:bg-gray-600 has a higher specificity than [type="checkbox"]:checked, so it is taking precedence.

I think we need to try and rework some stuff here in general — we should be recommending checked:bg-blue-300 instead of text-blue-300 for this stuff now that every variant is available by default in v3.

Also need to investigate why we are using [type="checkbox"]:checked:hover { .... } out of the box for anything — I'm guessing it's because bg-gray-300 hover:bg-gray-200 was causing the hover style to override the checked style, but maybe there's a better solution to this problem in the v3 era.

[Kittease]

Any update by chance on this issue?

[adamwathan]

Any update by chance on this issue?

Not yet! Going to revisit all the forms stuff in the new year at some point though, think we can do something better than we have now altogether.

[kudp02]

Just bumped into this issue +1

[colinmackinlay]

Also on date pickers please @adamwathan ! Need to be able to apply style="color-scheme: dark;" when in dark mode so that the icon is reversed and visible