-
Notifications
You must be signed in to change notification settings - Fork 225
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark mode background overrides text colors on checkboxes when using class
dark mode variant
#74
Comments
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;
} |
@colinbate Thank you, that definitely works as a workaround for now! |
Just some notes for myself, this is because the selector I think we need to try and rework some stuff here in general — we should be recommending Also need to investigate why we are using |
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. |
Just bumped into this issue +1 |
Also on date pickers please @adamwathan ! Need to be able to apply |
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:
@tailwindcss/forms
and enable dark mode using theclass
method.dark
class.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.
The text was updated successfully, but these errors were encountered: