Discourse est incroyablement personnalisable !
L’objectif de ce sujet est de vous montrer comment tirer parti de toutes les options remarquables qui vous sont disponibles en tant que développeur de thème. Vous savez… pour que vous n’ayez pas à réinventer la roue 
Des variables ? Quelles variables ?
Les variables couvrent un large éventail d’éléments, des tailles de police aux couleurs en passant par les valeurs de z-index. Vous pouvez utiliser et remplacer la grande majorité des variables dans votre éditeur de thème.
Couleurs
De nombreuses couleurs sont disponibles pour être utilisées ou remplacées dans votre thème. Vous pouvez consulter le jeu de couleurs de base dans l’interface d’administration, sous Personnaliser > Couleurs. Voici une capture d’écran du schéma de couleurs par défaut :
Ces couleurs sont disponibles en tant que propriétés CSS personnalisées que vous pouvez utiliser et remplacer via cette syntaxe :
var(--primary)
var(--secondary)
var(--tertiary)
var(--quaternary)
var(--header_background)
var(--header_primary)
var(--highlight)
var(--danger)
var(--success)
var(--love)
L’utilisation de variables de couleur SCSS (comme
$primary,$secondaryet ainsi de suite) est obsolète. Le cœur de Discourse utilise des propriétés CSS personnalisées depuis août 2020 et nous recommandons à tous les thèmes existants de passer des variables SCSS aux propriétés CSS personnalisées. Pour les manipulations de couleurs complexes, voir ce guide.
Comment puis-je les utiliser ?
Commencez par créer un nouveau thème ou, si vous utilisez un thème basé sur git, créez un nouveau composant de thème et ajoutez-le à votre thème.
Disons que je veux définir l’arrière-plan de <body> pour qu’il corresponde à la couleur highlight du schéma de couleurs actuel. Eh bien, je peux le faire ainsi :
body {
background: var(--highlight);
}
Et la couleur serait automatiquement extraite du schéma de couleurs actuel, comme ceci :
(Cette couleur d’arrière-plan n’est pas recommandée 
)
Maintenant, disons que le schéma de couleurs actuel n’est pas réglé sur « Schéma clair » pour le thème actuel. Au lieu de cela, disons qu’il est réglé sur le schéma « Sombre » par défaut, le même code produirait un résultat différent car la variable est différente.
Vous pouvez voir comment l’arrière-plan de <body> suit la variable highlight actuelle, quelle qu’elle soit pour le schéma de couleurs en cours.
Cela couvre les variables de couleur de base. Discourse utilise également des couleurs dérivées qui peuvent être utilisées ou remplacées. Vous pouvez consulter la liste complète des couleurs du schéma de couleurs actuel dans l’inspecteur de votre navigateur, voici une capture d’écran du thème par défaut :
Notez que vous pouvez inspecter ces couleurs sur n’importe quelle instance Discourse, sans avoir besoin d’être authentifié. Sur votre propre instance Discourse, vous pouvez (et devriez) également utiliser le plugin styleguide, qui est désormais inclus dans le cœur. Activez-le et rendez-vous sur /styleguide, et vous verrez tous les éléments d’interface utilisateur de Discourse, y compris les couleurs :
(C’est le schéma de couleurs Grey Ember ci-dessus.)
Bon, passons aux sujets plus avancés :
Variables avancées
Jetez un œil à ce fichier dans le dépôt Discourse :
C’est ici que la plupart des variables sont définies. Tout comme les couleurs, ces variables sont magiquement disponibles pour être utilisées dans les feuilles de style de thème.
Je vais essayer de décomposer le contenu du fichier ci-dessous :
Largeurs
$small-width: 800px !default;
$medium-width: 995px !default;
$large-width: 1110px !default;
ces variables sont très pratiques si vous souhaitez que votre thème corresponde au comportement natif de Discourse, en particulier dans les requêtes média. Par exemple, jetez un œil aux parties pertinentes du scss pré-compilé pour .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;
}
}
}
Notez comment la requête média reçoit une variable pour déterminer un point de coupure pour les petits écrans et appliquer des styles différents.
Polices
--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;
C’est aussi assez simple, Discourse a un excellent système de mise à l’échelle des polices et vous devriez donc en tirer parti.
Les unités utilisées sont en em et sont donc relatives à --base-font-size, qui est utilisé sur l’élément <html>.
Donc :
.btn {
font-size: var(--font-up-6);
}
est compilé en :
(–base-font-size _ --font-up-6) ou (14px _ 2.296) = 32.14px
Ou ceci :
Interlignes
--line-height-small: 1;
--line-height-medium: 1.2; // Headings or large text
--line-height-large: 1.4; // Normal or small text
Ces variables peuvent être utilisées tout comme dans l’exemple précédent. Notez bien qu’il s’agit de valeurs sans unité. Voici ce que cela signifie :
Valeurs 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,
);
Celles-ci peuvent être utilisées comme discuté ici :
div {
z-index: z("header");
}
« ou, lorsqu’elles sont imbriquées, comme ceci : »
div {
z-index: z("modal", "dropdown");
}
« Vous pouvez également effectuer des opérations mathématiques de base comme vous vous y attendriez : »
div {
z-index: z("base") + 1;
}
Les blocs de code ci-dessus font partie de la citation, mais je les ai sortis pour le formatage
Voici maintenant un exemple :
Placez une boîte au-dessus de l’en-tête :
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") + 1;
}
Placez une boîte sous l’en-tête :
.zbox {
position: fixed;
top: 0;
left: 0;
height: 200px;
width: 200px;
background: red;
z-index: z("header") - 1;
}
Ombres de boîte
$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,
);
Comme vous pouvez le voir, la plupart du travail a été fait pour vous en ce qui concerne les variables, et vous n’avez besoin que d’utiliser ce qui est déjà là dans la plupart des cas.
L’utilisation des ombres de boîte ressemble à ceci :
.d-header {
box-shadow: shadow("focus");
}
Cela devrait faire en sorte que l’en-tête utilise l’ombre de boîte de focus. Et si nous vérifions pour confirmer :
Ce post est un wiki, donc modifiez-le selon vos besoins 
Ce document est sous contrôle de version - suggérez des modifications sur github.