Dark mode background overrides text colors on checkboxes when using `class` dark mode variant
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Idoneità per principianti
- 45/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- tailwindcss
- Ambito
- frontend
Direzione di ricerca
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.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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.
- Lingua principale
- HTML
- Stelle
- 4.6k
- Fork
- 230
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Preparare l'ambiente
Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di tailwindlabs/tailwindcss-forms
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 55/100
tailwindlabs/tailwindcss-forms#184 · 1 commento ·
-
Overridable class strategyAperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 52/100
tailwindlabs/tailwindcss-forms#162 · 18 commenti · 2 reazioni ·
Tutte le issue di tailwindlabs/tailwindcss-forms
Issue simili
-
Font overview "Group by" labels can show raw localization keys (translated at module load time)Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
I maintainer di solito rispondono entro 1 giorno
-
refactor
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
I maintainer di solito rispondono entro 5 giorni
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
OHDSI/Data2Evidence#3450 ·
I maintainer di solito rispondono entro 2 giorni
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 88/100
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 88/100