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и т. д.) устарело. Ядро Discourse использует пользовательские свойства CSS с августа 2020 года, и мы рекомендуем всем существующим темам перейти с переменных SCSS на пользовательские свойства CSS. Для сложных манипуляций с цветами см. это руководство.
Как же их использовать?
Начните с создания новой темы или, если вы используете тему на основе git, создайте новый компонент темы и добавьте его в вашу тему.
Допустим, я хочу установить для фона <body> цвет, соответствующий цвету highlight текущей схемы цветов. Я могу сделать это так:
body {
background: var(--highlight);
}
И цвет будет автоматически подтянут из текущей схемы цветов, как здесь:
(Этот цвет фона не рекомендуется 
)
Теперь допустим, что текущая схема цветов для этой темы не установлена в «Светлую схему». Вместо этого, допустим, установлена схема «Тёмная» по умолчанию. Тот же код даст другой результат, так как переменная будет другой.
Вы можете увидеть, как фон <body> следует за текущей переменной highlight, каково бы ни было её значение в текущей схеме цветов.
Это базовые переменные цвета. Discourse также использует производные цвета, которые можно использовать или переопределять. Полный список цветов текущей схемы можно увидеть в инспекторе браузера. Вот скриншот темы по умолчанию:
Обратите внимание, что эти цвета можно исследовать на любом экземпляре Discourse, без необходимости аутентификации. На вашем собственном экземпляре Discourse вы можете (и должны) также использовать плагин styleguide, который теперь входит в ядро. Включите его и перейдите по адресу /styleguide, где вы увидите все элементы интерфейса Discourse, включая цвета:
(На скриншоте выше — схема цветов Grey Ember.)
Хорошо, перейдём к более продвинутым темам:
Продвинутые переменные
Посмотрите на этот файл в репозитории Discourse:
Здесь определяются большинство переменных. Как и в случае с цветами, эти переменные магическим образом доступны для использования в стилях темы.
Я постараюсь разобрать содержимое файла ниже:
Ширины
$small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;
Они очень полезны, если вы хотите, чтобы ваша тема соответствовала нативному поведению Discourse, особенно в медиазапросах. Например, посмотрите на соответствующие части предкомпилированного scss для .user-info:
.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, поэтому они будут относительными по отношению к --base-font-size, который используется на элементе <html>.
Таким образом:
.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.