사용자 정의 테마 컴포넌트에서 Discourse 테마 색상 변수를 참조하는 방법?

지원
1

Discourse 테마의 색상 변수를 내 자체 테마 컴포넌트에서 접근할 수 있을까요?

CSS에서 --secondary와 같은 변수를 사용하려고 하는데, 작동하지 않는 것 같습니다.

3

네, 테마나 테마 컴포넌트에서 core의 native-css 변수에 접근할 수 있어야 합니다 :+1:

예를 들어

body {
  background-color: var(--secondary);
}

작동하지 않는 예를 공유해 주시겠어요?

4

아! var()를 사용하지 않았네요.

5

이런 문제를 정말 자주 겪습니다. 물론 var를 사용하는 것이 “당연한” 일이긴 하지만, 그걸 알고 기억할 수 있을 때의 이야기죠!

무언가가 실행되는 동안 기다리고 있었는데, 호기심에 https://ask.discourse.com/ 에 들어가서 "내 테마 컴포넌트에서 Discourse 테마 색상 변수에 접근할 수 있나요?"라고 물어봤습니다. 그리고 정말로 이런 답변을 받았어요:

  1. 사용 가능한 색상 변수:
    Discourse는 다음과 같은 여러 개의 미리 정의된 CSS 커스텀 프로퍼티를 제공합니다:

    var(--primary)
var(--secondary)
var(--tertiary)
var(--quaternary)
var(--header_background)
var(--header_primary)
var(--highlight)
var(--danger)
var(--success)
var(--love)

  2. 사용 예시:
    이 변수들을 CSS에서 사용하면 테마가 사용자가 선택한 다양한 색상 스킴에 적응하도록 할 수 있습니다. 예를 들어:

    body {
    background: var(--highlight);
}