라이트 모드와 다크 모드용 CSS를 올바르게 수정하는 방법

개발
2

컨테이너 쿼리는 동작하지만, 이를 단순화하기 위해 CSS의 네이티브 light-dark() 함수를 사용해도 됩니다:

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}

일반적으로 Discourse에서는 이러한 방식으로 특정 색상을 설정하는 대신 자동으로 변경되는 색상 변수(--primary, --secondary 등)에 의존합니다. 이를 통해 어떤 색상 스킴에서도 색상이 올바르게 작동할 수 있습니다.

여기에서 몇 가지 예시를 볼 수 있으며, 다크/라이트 모드로 전환할 때 어떻게 변경되는지 확인할 수 있습니다: Discourse Meta 이 변수들은 /admin/config/colors의 색상 팔레트로 설정됩니다.