Freecodecamp: A mensagem de aviso offline é difícil de ler no modo escuro

WCAG afirma que o contraste é de apenas 1,41: https://contrastchecker.com/?c=f5f6f7&b=add8e6

O plano de fundo da notificação é codificado e a cor da fonte é tratada com base no tema.

Deixamos o bootstrap lidar com o estilo das notificações, pois eles lidam com a cor da fonte e o plano de fundo e têm uma boa aparência em ambos os temas.

Portanto, fazer o seguinte deve resolver o problema.

Adicione alert-info como uma classe aqui:
https://github.com/freeCodeCamp/freeCodeCamp/blob/0c0611229e23e20000bd287736fa9dc36566f7b1/client/src/components/OfflineWarning/OfflineWarning.js#L28

e remova background daqui:
https://github.com/freeCodeCamp/freeCodeCamp/blob/05535d1e56bca7456b69510fa724493edf5fa1ca/client/src/components/OfflineWarning/offline-warning.css#L6

Acho que a melhor maneira é implementar cálculos com correção de luma.
A primeira implicação óbvia de ir com uma abordagem com correção de luma é que a cor de fundo da notificação precisa mudar para uma declaração RBG para os fundos, calcular o luma de qualquer método que escolhermos e usá-lo na declaração de cor de primeiro plano, que pode ( e ainda será a cor HSL.

Estou dizendo isso porque isso permitiria que a cor da fonte mudasse com base no contraste do fundo de notificação de white para black e vice-versa.

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

@ahmadabdolsaheb posso trabalhar nisso? Posso precisar de ajuda. Por favor me guie.

@ rammazzoti2000 , esse é um truque legal. Obrigado por compartilhar o link.

Uma vez que estamos planejando sair do bootstrap, devemos considerar os cálculos corrigidos de luma em como implementamos nossos temas de luz / escuridão durante o processo de reescrita.

Enquanto isso, acho que podemos seguir em frente com a simples mudança que resolve esse problema.

@ redshark25 , claro. Certifique-se de ler isto: https://contribute.freecodecamp.org/#/index ? Id = our-open-source-codebase