Freecodecamp: ダークモードではオフライン警告メッセージが読みにくい

WCAGはコントラストがわずか1.41であると言っています： https ： ＆ b

通知の背景はハードコーディングされており、フォントの色はテーマに基づいて処理されています。

フォントの色と背景を処理し、両方のテーマで見栄えがするため、通知のスタイルをブートストラップで処理できるようにしました。

したがって、次のことを行うとうまくいくはずです。

ここにクラスとして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 ：

@ahmadabdolsahebこれに

@ rammazzoti2000 、それはクールなトリックです。 リンクを共有していただきありがとうございます。

ブートストラップからの移行を計画しているため、書き換えプロセス中に暗い/明るいテーマを実装する方法で、輝度補正された計算を検討する必要があります。

その間、この問題を解決する簡単な変更を加えることで前進できると思います。

@ redshark25 、確かに。 必ずこれを読んでください： https ：