Discourse 的可定制性非常强大！
本主题旨在向你展示如何利用主题开发者可用的所有出色选项。你知道的……这样你就不必重新发明轮子了 
变量？什么变量？
变量涵盖了许多内容，从字体大小到颜色再到 z-index 值。你可以在主题编辑器中使用和覆盖绝大多数变量。
颜色
有许多颜色可供你使用或覆盖。你可以在管理界面中的“自定义 > 颜色”下查看基本颜色集。以下是默认配色方案的截图：
这些颜色可以作为 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等）已被弃用。自 2020 年 8 月起，Discourse 核心已使用 CSS 自定义属性，我们建议所有现有主题将 SCSS 变量切换为 CSS 自定义属性。有关复杂的颜色操作，请参阅此指南。
那我该如何使用它们？
首先，创建一个新主题；或者如果你使用的是基于 git 的主题，创建一个新主题组件并将其添加到你的主题中。
假设我想将 <body> 背景设置为与当前配色方案的 highlight 颜色相匹配。嗯，我可以这样做：
body {
background: var(--highlight);
}
颜色会自动从当前配色方案中提取，效果如下：
（不推荐这种背景颜色 
）
现在，假设当前主题没有设置为“浅色方案”。相反，假设它设置为默认的“深色”方案，相同的代码会产生不同的结果，因为变量不同。
你可以看到，无论当前配色方案中的 highlight 变量是什么，<body> 背景都会跟随它。
这涵盖了基本的颜色变量。Discourse 还使用派生颜色，这些颜色也可以使用或覆盖。你可以在浏览器检查器中查看当前配色方案的完整颜色列表，以下是默认主题的截图：
请注意，你可以在任何 Discourse 实例上检查这些颜色，无需身份验证。在你自己的 Discourse 实例上，你（并且_应该_）也使用 styleguide 插件，该插件现已包含在核心中。启用它并前往 /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 上提出更改。