Les thèmes de Plume sont des fichiers CSS (et éventuellement d'autres ressources qui peuvent être chargées avec CSS, comme les polices ou les images de fond), donc le langage CSS est tout ce que vous devez connaître pour écrire un thème.

Modèle de base

Un bon départ peut être le thème de base officiel, qui est écrit en SCSS, et que vous pouvez trouver dans le dépôt Plume. Vous pouvez copier ces fichiers (ils sont sous la licence AGPL-3.0) et commencer par changer les variables dans _variables.scss. Si vous utilisez ce thème comme base, le SASS/SCSS sera nécessaire pour le transformer en un fichier CSS unique qu'un administrateur pourra installer sur son instance.

Pour tester votre thème, vous pouvez installer une extension de navigateur comme Stylise et copier votre CSS à l'intérieur.

Les mises à jour de Plume peuvent parfois casser votre thème (si nous faisons un changement de mise en page, ajoutez une nouvelle classe CSS, ou ainsi de suite). Si vous voulez vous assurer que votre thème continue à fonctionner au fur et à mesure que Plume est développé, suivez le projet sur Gitea (GitHub), ainsi vous serez notifiés lorsque nous apportons des modifications qui pourraient affecter votre thème. Les demandes d'ajout et les commits cassant les thèmes sont normalement clairement identifiés comme tels.

Explications détaillées

Il y'a deux types de thèmes dans Plume:

• les thèmes d'instance, qu'un administrateur peut définir comme thème par défaut pour une instance, et que les utilisateurs enregistrés sur cette instance peuvent choisir comme leur propre valeur par défaut s'ils le souhaitent.
• et les thèmes de blog, que les auteurs peuvent utiliser pour personnaliser leurs blogs. Ils ne sont appliqués qu'aux pages de ce blog, et remplacent les thèmes d'instance.

La seule différence lorsque vous construisez un thème est que les thèmes de blog doivent être dans le répertoire static/css/blog-NAME, alors que les thèmes d'instance doivent être dans static/css/NAME (avec NAME le nom de votre thème).

Dans ce répertoire, le seul fichier requis est theme.css. Ce fichier est le seul que Plume charge, donc il est en charge de charger tout le reste (les polices que vous utilisez par exemple).

Et c'est tout, vous êtes libre de faire tout ce que vous voulez avec les thèmes, à condition que vous respectiez ces règles.

Détection des thèmes sombres

Lorsque vous écrivez un thème pour les blogs, il peut être utile de savoir si le thème de l'instance globale est sombre ou non, pour adapter le thème du blog en conséquence. Ainsi, la convention est que les thèmes sombres devraient toujours avoir le mot “dark” dans leur nom. Plume ajoute ensuite le nom du thème actuel aux classes CSS du document HTML, vous permettant de détecter quel type de thème l'utilisateur possède.

Voici un exemple qui montre les guillemets en bleu pour les thèmes clairs, et en orange pour les thèmes sombres :

article blockquote {
    color: blue;
}

html[class*=dark] article blockquote {
    color: orange;
}

Plume peut compiler vos thèmes

Si vous construisez Plume à partir des sources, n'importe quel thème dans assets/themes/NAME sera compilé dans static/css/NAME. Les fichiers SCSS ou SASS seront transformés en CSS, à moins que leur nom ne commence par un trait de soulignement. Chaque fichier SCSS/SASS est traité comme un thème différent même s'ils se trouvent dans le même répertoire, leur permettant de partager des fichiers (utile lorsque vous voulez faire des variantes de couleurs de votre thème par exemple).

Les autres fichiers seront copiés tels quels dans le répertoire de sortie.