Dark mode background overrides text colors on checkboxes when using `class` dark mode variant
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 45/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Estancado
- Stack tecnológico
- tailwindcss
- Área
- frontend
Línea de trabajo
Start with the linked reproduction repository and reproduce the checkbox behavior using @tailwindcss/forms 0.3.3 and class-based dark mode. Inspect the generated styles for the checkbox's checked and unchecked states; done means the checked text color remains effective instead of being overridden by the background color.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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:
- Build tailwind using
@tailwindcss/formsand enable dark mode using theclassmethod. - Add checkbox with a dark background color class and dark text color class.
- Enable wrap the checkbox in a
darkclass. - 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.
- Lenguaje dominante
- HTML
- Estrellas
- 4.6k
- Forks
- 230
- Métricas de merge de PR
- Sin PR fusionados en 30 d
Preparar el entorno
Este proyecto no incluye contenedor de desarrollo, Dockerfile ni guía de contribución, así que la configuración corre por tu cuenta: empieza por su README y consulta nuestra guía para la primera contribución para los pasos generales.
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de tailwindlabs/tailwindcss-forms
-
Dificultad 3/5 1-2 días Aptitud para principiantes 55/100
tailwindlabs/tailwindcss-forms#184 · 1 comentario ·
-
Overridable class strategyAbierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 52/100
tailwindlabs/tailwindcss-forms#162 · 18 comentarios · 2 reacciones ·
Todos los issues de tailwindlabs/tailwindcss-forms
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 88/100
openedx/frontend-app-authoring#3274 ·
Los mantenedores suelen responder en 1 día
-
Unconfirmed bug
Dificultad 1/5 Menos de una hora Aptitud para principiantes 88/100
luanti-org/luanti#17605 · 1 comentario ·
Los mantenedores suelen responder en 2 días
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
microsoft/fluentui-blazor#5364 ·
Los mantenedores suelen responder en 1 día
-
COLEAD websiteAbiertoneeds-triage
Dificultad 2/5 1-3 horas Aptitud para principiantes 72/100
wagtail/madewithwagtail#236 · 1 comentario ·
Los mantenedores suelen responder en 4 días
-
Design only Leadership Survey SLFS
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
bcgov/digital-journeys#2293 ·