Freecodecamp: Автономное предупреждающее сообщение трудно читать в темном режиме

WCAG утверждает, что контраст составляет всего 1,41: https://contrastchecker.com/?c=f5f6f7&b=add8e6

Фон уведомления жестко запрограммирован, а цвет шрифта обрабатывается в зависимости от темы.

Мы позволили начальной загрузке обрабатывать стили для уведомлений, поскольку они обрабатывают цвет шрифта и фон и хорошо смотрятся в обеих темах.

Таким образом, следующие действия должны помочь.

Добавьте сюда alert-info как класс:
https://github.com/freeCodeCamp/freeCodeCamp/blob/0c0611229e23e20000bd287736fa9dc36566f7b1/client/src/components/OfflineWarning/OfflineWarning.js#L28

и удалите отсюда background :
https://github.com/freeCodeCamp/freeCodeCamp/blob/05535d1e56bca7456b69510fa724493edf5fa1ca/client/src/components/OfflineWarning/offline-warning.css#L6

Я думаю, что лучший способ - это реализовать вычисления с поправкой на яркость.
Первым очевидным следствием использования подхода с коррекцией яркости является то, что цвет фона уведомлений должен переключиться на объявление RBG для фона, вычислить яркость любым выбранным нами методом и использовать его в объявлении цвета переднего плана, которое может ( и будет) по-прежнему иметь цвет HSL.

Я говорю это, потому что это позволит переключать цвет шрифта в зависимости от контраста контраста фона уведомлений с white на black и наоборот.

Источник: https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

@ahmadabdolsaheb, могу я поработать над этим? Мне может понадобиться помощь. пожалуйста, направь меня.

@ rammazzoti2000 , это крутой трюк. Спасибо, что поделились ссылкой.

Поскольку мы планируем отказаться от бутстрапа, мы должны учитывать расчеты с поправкой на яркость в том, как мы реализуем наши темные / светлые темы во время процесса перезаписи.

Между тем, я думаю, мы могли бы продвинуться вперед, внеся простое изменение, которое решит эту проблему.

@ redshark25 , конечно. Убедитесь, что вы прочитали это: https://contribute.freecodecamp.org/#/index ? Id = our-open-source-codebase