Discourse는 놀라울 정도로 커스터마이징할 수 있습니다!
이 주제의 목표는 테마 개발자로서 여러분이 사용할 수 있는 모든 훌륭한 옵션을 활용하는 방법을 보여주는 것입니다. 아시죠… 그래서 여러분이 바퀴를 다시 발명하지 않아도 되도록 
변수? 어떤 변수?
변수는 폰트 크기부터 색상, z-index 값에 이르기까지 다양한 사항을 포함합니다. 테마 에디터에서 대부분의 변수를 사용하거나 오버라이드할 수 있습니다.
색상
테마에서 사용하거나 오버라이드할 수 있는 색상이 많습니다. 관리자 UI의 커스터마이즈 > Colors(색상)에서 기본 색상 세트를 볼 수 있습니다. 다음은 기본 색상 스키마의 스크린샷입니다:
이러한 색상은 다음 구문을 통해 사용하거나 오버라이드할 수 있는 CSS 커스텀 프로퍼티로 사용할 수 있습니다:
var(--primary)
var(--secondary)
var(--tertiary)
var(--quaternary)
var(--header_background)
var(--header_primary)
var(--highlight)
var(--danger)
var(--success)
var(--love)
SCSS 색상 변수(예:
$primary, $secondary` 등)의 사용은 비추천됩니다. Discourse 코어는 2020년 8월부터 CSS 커스텀 프로퍼티를 사용하고 있으며, 기존 모든 테마가 SCSS 변수를 CSS 커스텀 프로퍼티로 전환하는 것을 권장합니다. 복잡한 색상 조작에 대해서는 이 가이드를 참조하세요.
그러면 어떻게 사용하나요?
새로운 테마를 만들거나, git 기반 테마를 사용하는 경우 새로운 테마 컴포넌트를 만들어 테마에 추가하는 것부터 시작하세요.
예를 들어, <body> 배경을 현재 색상 스키마의 highlight 색상과 일치시키고 싶다고 합시다. 다음과 같이 할 수 있습니다:
body {
background: var(--highlight);
}
그러면 색상이 다음과 같이 현재 색상 스키마에서 자동으로 가져와집니다:
(이 배경색은 권장하지 않습니다 
)
이제, 현재 테마의 색상 스키마가 "Light scheme"으로 설정되어 있지 않다고 합시다. 대신 기본 “Dark” 스키마로 설정되어 있다면, 변수가 다르기 때문에 동일한 코드가 다른 결과를 생성합니다.
<body> 배경이 현재 색상 스키마의 highlight 변수가 무엇이든 그에 따라 따라가는 것을 볼 수 있습니다.
이것으로 기본 색상 변수에 대한 설명을 마칩니다. Discourse는 사용하거나 오버라이드할 수 있는 파생 색상도 사용합니다. 브라우저 인스펙터에서 현재 색상 스키마의 전체 색상 목록을 볼 수 있으며, 다음은 기본 테마의 스크린샷입니다:
인증 없이도 모든 Discourse 인스턴스에서 이러한 색상을 검사할 수 있다는 점에 유의하세요. 여러분 자신의 Discourse 인스턴스에서는 (그리고 반드시) 이제 코어에 포함된 스타일가이드 플러그인도 사용해야 합니다. 활성화한 후 /styleguide로 이동하면 색상을 포함한 모든 Discourse UI 요소를 볼 수 있습니다:
(위에는 Grey Ember 색상 스키마가 적용되어 있습니다.)
자, 더 고급 주제로 넘어가겠습니다:
고급 변수
Discourse 저장소의 이 파일을 살펴보세요:
대부분의 변수가 여기에서 정의됩니다. 색상과 마찬가지로, 이러한 변수는 마법처럼 테마 스타일시트에서 사용할 수 있습니다.
아래에서 파일의 내용을 정리해 보겠습니다:
너비
$small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;
테마가 네이티브 Discourse 동작과 일치하도록 하려면 매우 유용합니다. 예를 들어 미디어 쿼리에서 .user-info의 사전 컴파일된 scss의 관련 부분을 살펴보세요:
.user-info {
&.medium {
flex: 0 0 32%;
margin: 0 2% 4vh 0;
@media screen and (max-width: $small-width) {
flex: 0 0 48%;
margin-right: 0;
}
}
}
미디어 쿼리가 변수를 전달받아 작은 화면의 절단점을 결정하고 다른 스타일을 적용하는 것을 주목하세요.
폰트
--base-font-size: 0.938em; // eq. to 15px
--base-font-size-larger: 1.063em; // eq. to 17px
--base-font-size-largest: 1.118em; // eq. to 19px
// Font-size definitions, multiplier ^ (step / interval)
--font-up-6: 2.296em;
--font-up-5: 2em;
--font-up-4: 1.7511em;
--font-up-3: 1.5157em;
--font-up-2: 1.3195em;
--font-up-1: 1.1487em; // 2^(1/5)
--font-0: 1em;
--font-down-1: 0.8706em; // 2^(-1/5)
--font-down-2: 0.7579em; // Smallest size we use based on the 1em base
--font-down-3: 0.6599em;
--font-down-4: 0.5745em;
--font-down-5: 0.5em;
--font-down-6: 0.4355em;
이것도 꽤 직관적입니다. Discourse에는 훌륭한 폰트 스케일링 시스템이 있으므로 이를 반드시 활용해야 합니다.
사용되는 단위는 em이며, <html> 요소에 사용되는 --base-font-size에 상대적입니다.
따라서:
.btn {
font-size: var(--font-up-6);
}
다음으로 컴파일됩니다:
(–base-font-size _ --font-up-6) 또는 (14px _ 2.296) = 32.14px
또는 이것:
라인 하이트
--line-height-small: 1;
--line-height-medium: 1.2; // Headings or large text
--line-height-large: 1.4; // Normal or small text
이 변수들은 이전 예제와 마찬가지로 사용할 수 있습니다. 단, 무차원 값이라는 점에 유의하세요. 이것이 무엇을 의미하는지 설명드리겠습니다:
Z-index 값
$z-layers: (
"max": 9999,
"fullscreen": 1700,
"modal": (
"tooltip": 1600,
"popover": 1500,
"dropdown": 1400,
"content": 1300,
"overlay": 1200,
),
"mobile-composer": 1100,
"header": 1000,
"tooltip": 600,
"composer": (
"popover": 500,
"content": 400,
),
"dropdown": 300,
"usercard": 200,
"timeline": 100,
"base": 1,
);
이 값들은 여기에서 논의된 대로 사용할 수 있습니다:
div {
z-index: z("header");
}
“또는 중첩된 경우, 이렇게:”
div {
z-index: z("modal", "dropdown");
}
“예상대로 기본적인 수학 연산도 수행할 수 있습니다:”
div {
z-index: z("base") + 1;
}
위 코드 블록은 인용문의 일부이지만 서식을 위해 따로 분리했습니다
자, 여기 예시가 있습니다:
헤더 위에 상자를 배치하세요:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") + 1;
}
헤더 아래에 상자를 배치하세요:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") - 1;
}
박스 섀도
$box-shadow: (
"modal": 0 8px 60px rgba(0, 0, 0, 0.6),
"composer": 0 -1px 40px rgba(0, 0, 0, 0.12),
"menu-panel": 0 6px 14px rgba(0, 0, 0, 0.15),
"card": 0 4px 14px rgba(0, 0, 0, 0.15),
"dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
"header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
"kbd": (
0 2px 0 rgba(0, 0, 0, 0.2),
0 0 0 1px dark-light-choose(#fff, #000) inset,
),
"focus": 0 0 6px 0 $tertiary,
"focus-danger": 0 0 6px 0 $danger,
);
알아볼 수 있듯이, 변수에 관해서는 대부분의 작업이 이미 완료되어 있으며, 대부분의 경우 이미 있는 것만 활용하면 됩니다.
박스 섀도의 사용법은 다음과 같습니다:
.d-header {
box-shadow: shadow("focus");
}
이것은 헤더가 포커스 박스 섀도를 사용하도록 합니다. 그리고 확인해 보면:
이 게시물은 위키이므로 필요에 따라 편집하세요 
이 문서는 버전 관리됩니다 - 변경 사항을 github에서 제안하세요.