도움 요청: Discourse에서 라이트 모드와 다크 모드에 각각 다른 CSS 루트 지정

개발
1

현재 Discourse Color Scheme Toggle를 사용 중입니다.

로컬호스트에서는 라이트 모드와 다크 모드가 모두 활성화되어 있습니다. 이미 사이트를 위해 CSS 루트를 별도로 설정해 두었습니다. 다만, 라이트 모드에는 하나의 CSS 루트를, 다크 모드에는 다른 CSS 루트를 할당하는 방법에 대해 잘 모르겠습니다.

도와주실 수 있는 분 있으신가요?

2

안녕하세요,

맥락을 정확히 이해했는지 확실하지 않습니다. 만약 오해가 있다면 알려주세요.
:root를 다음과 같은 CSS로 감싸면 됩니다:

/* 기본값: 라이트 모드 */
:root {
  --background-color: white;
  --text-color: black;
  ...
}

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
  :root {
     --background-color: black;
     --text-color: white;
     ...
   }
}

prefers-color-scheme: light도 존재합니다.