¡Discourse es increíblemente personalizable!
El objetivo de este tema es mostrarte cómo aprovechar todas las opciones increíbles que tienes disponibles como desarrollador de temas. Ya sabes… para que no tengas que reinventar la rueda 
¿Variables? ¿Qué variables?
Las variables cubren una gran cantidad de aspectos, desde tamaños de fuente hasta colores y valores de z-index. Puedes utilizar y sobrescribir la gran mayoría de las variables en tu editor de temas.
Colores
Hay muchos colores disponibles para que los uses o los sobrescribas en tu tema. Puedes ver el conjunto básico de colores en la interfaz de administración, bajo Personalizar > Colores. Aquí hay una captura de pantalla del esquema de colores predeterminado:
Estos colores están disponibles como propiedades CSS personalizadas que puedes utilizar y sobrescribir mediante esta sintaxis:
var(--primary)
var(--secondary)
var(--tertiary)
var(--quaternary)
var(--header_background)
var(--header_primary)
var(--highlight)
var(--danger)
var(--success)
var(--love)
El uso de variables de color de SCSS (como
$primary,$secondaryy así sucesivamente) está en desuso. El núcleo de Discourse utiliza propiedades CSS personalizadas desde agosto de 2020 y recomendamos que todos los temas existentes migren de variables SCSS a propiedades CSS personalizadas. Para manipulaciones de color complejas, consulta esta guía.
Entonces, ¿cómo puedo usarlas?
Comienza creando un nuevo tema o, si estás utilizando un tema basado en git, crea un nuevo componente de tema y agrégalo a tu tema.
Supongamos que quiero establecer el fondo del <body> para que coincida con el color highlight del esquema de colores actual. Bueno, puedo hacerlo de esta manera:
body {
background: var(--highlight);
}
Y el color se extraería automáticamente del esquema de colores actual, de esta manera:
(No se recomienda este color de fondo 
)
Ahora, supongamos que el esquema de colores actual no está establecido en “Esquema claro” para el tema actual. En cambio, supongamos que está establecido en el esquema “Oscuro” predeterminado; el mismo código produciría un resultado diferente porque la variable es distinta.
Puedes ver cómo el fondo del <body> sigue la variable highlight actual, sea cual sea para el esquema de colores vigente.
Eso cubre las variables básicas de color. Discourse también utiliza colores derivados que se pueden utilizar o sobrescribir. Puedes ver la lista completa de colores del esquema de colores actual en el inspector de tu navegador; aquí hay una captura de pantalla del tema predeterminado:
Ten en cuenta que puedes inspeccionar estos colores en cualquier instancia de Discourse, sin necesidad de autenticación. En tu propia instancia de Discourse, puedes (y deberías) utilizar también el plugin de guía de estilos, que ahora está incluido en el núcleo. Actívalo y ve a /styleguide, donde verás todos los elementos de la interfaz de Discourse, incluidos los colores:
(Ese es el esquema de colores Grey Ember de arriba.)
Bien, pasemos a temas más avanzados:
Variables avanzadas
Echa un vistazo a este archivo en el repositorio de Discourse:
Aquí es donde se definen la mayoría de las variables. Al igual que con los colores, estas variables están mágicamente disponibles para que las uses en las hojas de estilo de tus temas.
Intentaré desglosar el contenido del archivo a continuación:
Anchuras
$small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;
Estas son muy útiles si quieres que tu tema coincida con el comportamiento nativo de Discourse, especialmente en consultas de medios. Por ejemplo, echa un vistazo a las partes relevantes del scss precompilado para .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;
}
}
}
Observa cómo la consulta de medios recibe una variable para determinar un punto de corte para pantallas pequeñas y aplicar estilos diferentes.
Fuentes
--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;
Esto también es bastante sencillo; Discourse tiene un excelente sistema de escalado de fuentes y, por lo tanto, deberías aprovecharlo.
Las unidades utilizadas están en em y, por lo tanto, serían relativas a --base-font-size, que se utiliza en el elemento <html>.
Así que:
.btn {
font-size: var(--font-up-6);
}
se compila en:
(–base-font-size _ --font-up-6) o (14px _ 2.296) = 32.14px
O esto:
Alturas de línea
--line-height-small: 1;
--line-height-medium: 1.2; // Headings or large text
--line-height-large: 1.4; // Normal or small text
Estas variables se pueden utilizar de la misma manera que en el ejemplo anterior. Ten en cuenta que son valores sin unidades. Esto es lo que significa:
Valores de 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,
);
Estos se pueden utilizar como se discutió aquí:
div {
z-index: z("header");
}
“o, cuando están anidados, de esta manera:”
div {
z-index: z("modal", "dropdown");
}
“También puedes hacer matemáticas básicas, como esperaría:”
div {
z-index: z("base") + 1;
}
Los bloques de código anteriores forman parte de la cita, pero los moví fuera por formato
Aquí hay un ejemplo:
Coloca una caja sobre la cabecera:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") + 1;
}
Coloca una caja debajo de la cabecera:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") - 1;
}
Sombras de caja
$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,
);
Como puedes ver, la mayor parte del trabajo ya está hecho cuando se trata de variables, y en la mayoría de los casos solo necesitas utilizar lo que ya está allí.
El uso de sombras de caja es así:
.d-header {
box-shadow: shadow("focus");
}
Esto debería hacer que la cabecera use la sombra de caja de enfoque. Y si lo verificamos para confirmar:
Esta publicación es una wiki, así que edítala según sea necesario 
Este documento está controlado por versiones; sugiere cambios en github.