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

개발
1

라이트 모드와 다크 모드를 위해 CSS를 많이 수정해야 합니다. 포럼에서 몇 가지 글을 읽어 봤는데, 이를 신뢰할 수 있는 방법이 없다고 하더군요. 예를 들면

하지만 이 글들은 대부분 오래되었습니다. 2026년에 쉬운 방법이 있을까요? 아래 코드를 테스트해 보았습니다.

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

이것이 정확한지 확신은 없지만, 동작은 합니다.

2

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

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

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

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

3

멋지네요, 크리스. 정말 감사합니다. 참고로 그 링크가 작동하지 않아요.