Freecodecamp: El mensaje de advertencia sin conexión es difícil de leer en modo oscuro

WCAG dice que el contraste es solo 1.41: https://contrastchecker.com/?c=f5f6f7&b=add8e6

El fondo de la notificación está codificado y el color de la fuente se maneja según el tema.

Hemos dejado que bootstrap maneje el estilo de las notificaciones, ya que manejan el color de la fuente y el fondo y se ven bien en ambos temas.

Así que hacer lo siguiente debería funcionar.

Agregue alert-info como clase aquí:
https://github.com/freeCodeCamp/freeCodeCamp/blob/0c0611229e23e20000bd287736fa9dc36566f7b1/client/src/components/OfflineWarning/OfflineWarning.js#L28

y elimine el background de aquí:
https://github.com/freeCodeCamp/freeCodeCamp/blob/05535d1e56bca7456b69510fa724493edf5fa1ca/client/src/components/OfflineWarning/offline-warning.css#L6

Creo que la mejor manera es implementar cálculos corregidos por luma.
La primera implicación obvia de optar por un enfoque de corrección de luma es que el color de fondo de la notificación debe cambiar a una declaración RBG para los fondos, calcular la luma de cualquier método que elijamos y usarlo en la declaración de color de primer plano, que puede ( y seguirá siendo de color HSL.

Digo esto porque esto permitiría que el color de la fuente cambie según el contraste del contraste del fondo de la notificación de white a black y viceversa.

Fuente: https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

@ahmadabdolsaheb ¿puedo trabajar en esto? Puede que necesite ayuda. por favor guíame.

@ rammazzoti2000 , ese es un truco genial. Gracias por compartir el enlace.

Dado que estamos planeando salir de bootstrap, deberíamos considerar cálculos corregidos por luma en cómo implementamos nuestros temas oscuros / claros durante el proceso de reescritura.

Mientras tanto, creo que podríamos seguir adelante con el simple cambio que resuelve este problema.

@ redshark25 , claro. Asegúrese de leer esto: https://contribute.freecodecamp.org/#/index ? Id = our-open-source-codebase