Freecodecamp: 오프라인 경고 메시지는 다크 모드에서 읽기 어렵습니다.

WCAG는 대비가 1.41에 불과하다고 말합니다 : https://contrastchecker.com/?c=f5f6f7&b=add8e6

알림 배경은 하드 코딩되고 글꼴 색상은 테마에 따라 처리됩니다.

글꼴 색상과 배경을 처리하고 두 테마 모두에서 잘 보이기 때문에 부트 스트랩이 알림의 스타일을 처리하도록했습니다.

따라서 다음을 수행하면 트릭을 수행 할 수 있습니다.

여기에 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://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

@ahmadabdolsaheb 이 작업을 할 수 있습니까? 도움이 필요할 수 있습니다. 저를 안내 해주세요.

@ rammazzoti2000 , 멋진 트릭입니다. 링크를 공유해 주셔서 감사합니다.

은 (는) 부트 스트랩에서 벗어날 계획이므로 재 작성 과정에서 어둡거나 밝은 테마를 구현하는 방법에서 루마 보정 계산을 고려해야합니다.

한편,이 문제를 해결하는 간단한 변경으로 나아갈 수 있다고 생각합니다.

@ redshark25 , 물론입니다. 반드시 읽어보십시오 : https://contribute.freecodecamp.org/#/index ? id = our-open-source-codebase