Freecodecamp: Pesan peringatan offline sulit dibaca dalam mode gelap

WCAG mengatakan perbedaannya hanya 1,41: https://contrastchecker.com/?c=f5f6f7&b=add8e6

Latar belakang pemberitahuan di-hardcode dan warna font ditangani berdasarkan tema.

Kami telah membiarkan bootstrap menangani gaya untuk notifikasi karena mereka menangani warna font dan latar belakang dan terlihat bagus pada kedua tema.

Jadi melakukan hal-hal berikut harus melakukan triknya.

Tambahkan alert-info sebagai kelas di sini:
https://github.com/freeCodeCamp/freeCodeCamp/blob/0c0611229e23e20000bd287736fa9dc36566f7b1/client/src/components/OfflineWarning/OfflineWarning.js#L28

dan hapus background dari sini:
https://github.com/freeCodeCamp/freeCodeCamp/blob/05535d1e56bca7456b69510fa724493edf5fa1ca/client/src/components/OfflineWarning/offline-warning.css#L6

Saya pikir cara terbaik adalah dengan menerapkan perhitungan yang dikoreksi luma.
Implikasi jelas pertama dari menggunakan pendekatan yang dikoreksi luma adalah bahwa warna latar belakang notifikasi perlu beralih ke deklarasi RBG untuk latar belakang, menghitung luma dari metode apa pun yang kita pilih, dan menggunakannya pada deklarasi warna latar depan, yang dapat ( dan akan) tetap menjadi warna HSL.

Saya mengatakan ini karena ini akan memungkinkan warna font untuk beralih berdasarkan kontras kontras latar belakang pemberitahuan dari white menjadi black dan sebaliknya.

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

@ahmadabdolsaheb bisakah saya mengerjakan ini? Saya mungkin butuh bantuan. mohon bimbingannya.

@ rammazzoti2000 , itu trik yang keren. Terima kasih telah membagikan tautannya.

Karena berencana untuk keluar dari bootstrap, kita harus mempertimbangkan perhitungan yang dikoreksi luma dalam cara kita mengimplementasikan tema gelap / terang kita selama proses penulisan ulang.

Sementara itu, saya pikir kita bisa bergerak maju dengan membuat perubahan sederhana yang menyelesaikan masalah ini.

@ redark25 , tentu. Pastikan Anda membaca ini: https://contribute.freecodecamp.org/#/index ? Id = our-open-source-codebase