Discourse は驚くほどカスタマイズ可能です！
このトピックの目的は、テーマ開発者として利用可能な素晴らしいオプションをどのように活用するかを示すことです。そうすれば、車輪を再発明する必要がなくなります 
変数？どんな変数？
変数は、フォントサイズから色、z-index 値に至るまで、幅広いものをカバーしています。テーマエディタ内で、変数の大部分を使用・上書きできます。
色
テーマ内で使用または上書きできる色はたくさんあります。基本の色セットは、管理画面 UI の「カスタマイズ > 色」セクションで確認できます。デフォルトのカラーパレットのスクリーンショットはこちらです：
これらの色は、以下の構文を使用して使用・上書きできる 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);
}
すると、色は現在のカラーパレットから自動的に取得されます：
（この背景色は推奨されていません 
）
次に、現在のカラーパレットが現在のテーマで「ライトスキーム」に設定されていないとします。代わりに、デフォルトの「ダーク」スキームに設定されている場合、変数が異なるため、同じコードでも異なる結果になります。
<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; // 15px に相当
--base-font-size-larger: 1.063em; // 17px に相当
--base-font-size-largest: 1.118em; // 19px に相当
// フォントサイズ定義、乗数 ^ (ステップ / 間隔)
--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; // 1em ベースで使用する最小サイズ
--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; // 見出しや大きなテキスト
--line-height-large: 1.4; // 通常または小さなテキスト
これらの変数は、前の例と同様に使用できます。単位なしの値であることに注意してください。これは何を意味するか：
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 でお願いします。