Freecodecamp: Le message d'avertissement hors ligne est difficile à lire en mode sombre

WCAG dit que le contraste n'est que de 1,41: https://contrastchecker.com/?c=f5f6f7&b=add8e6

L'arrière-plan de la notification est codé en dur et la couleur de la police est gérée en fonction du thème.

Nous avons laissé bootstrap gérer le style des notifications car ils gèrent la couleur de la police et l'arrière-plan et se présentent bien sur les deux thèmes.

Donc, faire ce qui suit devrait faire l'affaire.

Ajoutez alert-info tant que classe ici:
https://github.com/freeCodeCamp/freeCodeCamp/blob/0c0611229e23e20000bd287736fa9dc36566f7b1/client/src/components/OfflineWarning/OfflineWarning.js#L28

et supprimez le background d'ici:
https://github.com/freeCodeCamp/freeCodeCamp/blob/05535d1e56bca7456b69510fa724493edf5fa1ca/client/src/components/OfflineWarning/offline-warning.css#L6

Je pense que le meilleur moyen est de mettre en œuvre des calculs corrigés de la luminance.
La première implication évidente de l'adoption d'une approche avec correction de la luminance est que la couleur d'arrière-plan de la notification doit passer à une déclaration RBG pour les arrière-plans, calculer la luminance à partir de la méthode que nous choisissons et l'utiliser sur la déclaration de couleur de premier plan, ce qui peut ( et sera) toujours la couleur HSL.

Je dis cela parce que cela permettrait à la couleur de la police de changer en fonction du contraste du contraste de l'arrière-plan de la notification de white à black et vice versa.

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

@ahmadabdolsaheb puis-je travailler là-dessus? J'ai peut-être besoin d'aide. Guidez-moi s'il-vous-plaît.

@ rammazzoti2000 , c'est une super astuce. Merci d'avoir partagé le lien.

Étant donné que nous prévoyons de quitter le bootstrap, nous devrions envisager des calculs corrigés en luma dans la façon dont nous implémentons nos thèmes sombre / clair pendant le processus de réécriture.

En attendant, je pense que nous pourrions aller de l'avant en apportant le simple changement qui résout ce problème.

@ redshark25 , bien sûr. Assurez-vous de lire ceci: https://contribute.freecodecamp.org/#/index ? Id = our-open-source-codebase