Discourse ist unglaublich anpassbar!
Ziel dieses Themas ist es, dir zu zeigen, wie du all die erstaunlichen Optionen nutzen kannst, die dir als Theme-Entwickler zur Verfügung stehen. Weißt du schon… damit du das Rad nicht neu erfinden musst 
Variablen? Welche Variablen?
Variablen umfassen eine Vielzahl von Dingen, von Schriftgrößen über Farben bis hin zu z-index-Werten. Du kannst den Großteil der Variablen in deinem Theme-Editor verwenden und überschreiben.
Farben
Es stehen dir viele Farben zur Verfügung, die du in deinem Theme verwenden oder überschreiben kannst. Die Grundfarben findest du in der Admin-Oberfläche unter Anpassen > Farben. Hier ist ein Screenshot des Standard-Farbschemas:
Diese Farben stehen als CSS-Custom-Properties zur Verfügung, die du mit folgender Syntax verwenden und überschreiben kannst:
var(--primary)
var(--secondary)
var(--tertiary)
var(--quaternary)
var(--header_background)
var(--header_primary)
var(--highlight)
var(--danger)
var(--success)
var(--love)
Die Verwendung von SCSS-Farbvvariablen (wie
$primary, $secondary` usw.) ist veraltet. Der Discourse-Core verwendet seit August 2020 CSS-Custom-Properties, und wir empfehlen allen bestehenden Themes, SCSS-Variablen durch CSS-Custom-Properties zu ersetzen. Für komplexe Farbanpassungen siehe diesen Leitfaden.
Wie kann ich sie also verwenden?
Beginne damit, ein neues Theme zu erstellen, oder wenn du ein git-basiertes Theme verwendest, erstelle eine neue Theme-Komponente und füge sie deinem Theme hinzu.
Angenommen, ich möchte den Hintergrund von <body> so setzen, dass er zur highlight-Farbe des aktuellen Farbschemas passt. Das kann ich so tun:
body {
background: var(--highlight);
}
Und die Farbe wird automatisch aus dem aktuellen Farbschema übernommen, so wie hier:
(Diese Hintergrundfarbe wird nicht empfohlen 
)
Angenommen, das aktuelle Farbschema ist für das aktuelle Theme nicht auf “Light scheme” (Helles Schema) eingestellt. Stattdessen sei es auf das Standard-“Dark” (Dunkles) Schema eingestellt. Der gleiche Code würde dann ein anderes Ergebnis liefern, da die Variable anders ist.
Du kannst sehen, wie der Hintergrund von <body> der aktuellen highlight-Variable folgt, egal wie diese im aktuellen Farbschema gesetzt ist.
Das deckt die grundlegenden Farbvariablen ab. Discourse verwendet auch abgeleitete Farben, die verwendet oder überschrieben werden können. Die vollständige Liste der Farben des aktuellen Farbschemas kannst du im Browser-Inspektor sehen. Hier ist ein Screenshot des Standard-Themes:
Beachte, dass du diese Farben auf jeder Discourse-Instanz untersuchen kannst, ohne dass eine Authentifizierung erforderlich ist. Auf deiner eigenen Discourse-Instanz kannst (und solltest) du auch das Styleguide-Plugin verwenden, das jetzt im Core enthalten ist. Aktiviere es und gehe zu /styleguide, wo du alle Discourse-UI-Elemente, einschließlich Farben, siehst:
(Das ist oben das Grey Ember-Farbschema.)
Ok, weiter zu fortgeschritteneren Themen:
Fortgeschrittene Variablen
Schau dir diese Datei im Discourse-Repo an:
Hier werden die meisten Variablen definiert. Genau wie bei Farben stehen dir diese Variablen magischerweise in den Stylesheets deines Themes zur Verfügung.
Ich werde versuchen, den Inhalt der Datei unten aufzuschlüsseln:
Breiten
$small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;
diese sind sehr nützlich, wenn du möchtest, dass dein Theme dem nativen Discourse-Verhalten entspricht, insbesondere in Medienabfragen. Schau dir zum Beispiel die relevanten Teile des vorkompilierten SCSS für .user-info an:
.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;
}
}
}
Beachte, wie die Medienabfrage eine Variable erhält, um einen Schwellenwert für kleine Bildschirme zu bestimmen und unterschiedliche Stile anzuwenden.
Schriften
--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;
Auch das ist ziemlich selbsterklärend. Discourse hat ein hervorragendes Schriftskalierungssystem, und du solltest es nutzen.
Die verwendeten Einheiten sind em und beziehen sich daher auf --base-font-size, das im <html>-Element verwendet wird.
Also:
.btn {
font-size: var(--font-up-6);
}
wird kompiliert zu:
(–base-font-size _ --font-up-6) oder (14px _ 2.296) = 32.14px
Oder so etwas wie:
Zeilenhöhen
--line-height-small: 1;
--line-height-medium: 1.2; // Headings or large text
--line-height-large: 1.4; // Normal or small text
Diese Variablen können genauso verwendet werden wie im vorherigen Beispiel. Beachte, dass es sich um dimensionslose Werte handelt. Das bedeutet:
Z-index-Werte
$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,
);
Diese können wie hier besprochen verwendet werden:
div {
z-index: z("header");
}
“oder wenn verschachtelt, so wie hier:”
div {
z-index: z("modal", "dropdown");
}
“Du kannst auch grundlegende Mathematik durchführen, wie erwartet:”
div {
z-index: z("base") + 1;
}
Die Code-Blöcke oben sind Teil des Zitats, aber ich habe sie für das Format herausgenommen
Hier ist ein Beispiel:
Setze eine Box über den Header:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") + 1;
}
Setze eine Box unter den Header:
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") - 1;
}
Box-Schatten
$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,
);
Wie man so sieht, wurde die meiste Arbeit im Hinblick auf Variablen bereits für dich erledigt, und du musst in den meisten Fällen nur das vorhandene nutzen.
Die Verwendung für Box-Schatten sieht so aus:
.d-header {
box-shadow: shadow("focus");
}
Dies sollte den Header dazu bringen, den Fokus-Box-Schatten zu verwenden. Und wenn wir das überprüfen:
Dieser Beitrag ist ein Wiki, also bearbeite ihn bei Bedarf 
Dieses Dokument ist versioniert - Vorschläge für Änderungen auf github.