Я працюю з Tailwind CSS уже півтора року, і, працюючи над особистим проєктом, натрапив на проблему з кольорами в чекбоксах (checkbox) в темному режимі. Тому в цій статті я розповім, як я вирішив це питання.
Проблеми з кольорами в темному режимі
Коли я увімкнув темний режим за допомогою класу dark, чекбокси поводилися досить дивно: колір фону не застосовувався, коли курсор миші наводився на активний чекбокс.
Як я вирішив проблему! Мої поради для чекбоксів
Колін Бейт у треді на GitHub запропонував тимчасове рішення, яке полягає в додаванні наступного коду до вашого стилю:
.dark [type="checkbox"]:checked,
.dark [type="radio"]:checked {
border-color: currentColor;
background-color: currentColor;
}
2. Найкращий варіант! За допомогою класів Tailwind!
Інше рішення, яке я використовую, полягає в модифікації класу чекбокса.
dark:checked:border-current
dark:checked:bg-current
Окрім checked, це також працює для indeterminate, і я б сказав, що також для полів типу radio, але я ще не перевіряв.
Не зовсім зрозуміло, чи є ця проблема у версії 4.0 Beta Tailwind CSS, але я не збираюсь вникати в цю "дурницю" до виходу фінальної версії.
Поділись своїм досвідом
Чи траплялася з тобою така проблема? Що ти робив у такому випадку? Мені було б цікаво дізнатися! Залишай коментар, і так ми зможемо допомогти один одному.
Зображення від upklyak на Freepik
Перекладено з: ¡Checkboxes en modo oscuro con Tailwind CSS! ¡Que no te den problemas!