Thèmes : choisissez une apparence ou importez la vôtre.
Un thème est un petit fichier JSON. Il définit des couleurs, une typographie, une forme, une apparence et une palette de terminal. ColliePWA en intègre quatre, et vous pouvez en importer d'autres depuis un fichier présent sur votre téléphone.
01/Ce que c'est
Un thème est un fichier d'apparences.
Un thème définit les couleurs de l'application, une fois pour une moitié claire et une fois pour une moitié sombre. Il peut aussi définir une police, une police pour les titres, une forme, une apparence et les couleurs du miroir du terminal. La forme et l'apparence correspondent à dix mots, comme radius, shadow et density. La mise en page, les tailles des cibles tactiles et la signification des états restent inchangées : l'état bloqué reste donc bloqué dans chaque thème.
Chaque valeur d'un fichier est un mot fermé ou une couleur vérifiée. Le fichier ne peut pas exécuter de code, ni charger un fichier, une police ou une image.
Un thème et Apparence sont deux réglages distincts. Le thème indique les couleurs à utiliser. Apparence indique la moitié à afficher : Système, Clair ou Sombre.
02/Choisir
Choisissez un thème dans Paramètres.
Ouvrez Paramètres, puis Apparence, et appuyez sur un thème. Il s'applique immédiatement, sans rechargement, et la prochaine fois que vous ouvrirez ColliePWA, la première image utilisera déjà ce thème. Un appui sur Collie rétablit le thème par défaut.
Un thème qui définit une police applique votre police une seule fois. Vous pouvez toujours la modifier ensuite dans la carte Police.
Collie
Police: Aldrich
L'apparence habituelle : des gris neutres, avec Aldrich pour le texte.
Nightwatch
Police: IBM Plex Sans
flat · bold · strong · band · heavy
Pour le téléphone d'astreinte la nuit. Une moitié sombre d'un noir pur, plate et carrée, avec des lignes épaisses, un accent ambré discret et un bandeau ambré discret derrière l'en-tête et les barres.
Palette de terminal
Daylight
Police: Geist
Titres: Atkinson Hyperlegible Next
round · lifted · roomy · gradient · cards · sentence
Pour le plein soleil et la basse vision. Texte courant au contraste AAA, cartes arrondies et spacieuses, page décalée vers le bas et couleurs d'état allant du bleu à l'orange, et non du rouge au vert.
Palette de terminal
Harbour
Police: Atkinson Hyperlegible Next
Titres: Space Grotesk
soft · lifted · grain · thin
Pour les personnes issues du terminal. Gris-bleu froid avec un accent sarcelle, coins adoucis, grain fin et icônes fines, ainsi qu'une palette de terminal basée sur Solarized sur un bleu presque noir.
Palette de terminal
03/Importer
Importez un thème depuis un fichier.
- 1Placez un fichier de thème sur votre téléphone. Son extension est
.jsonet sa taille est inférieure à 64 KiB. - 2Dans Paramètres, ouvrez la carte Thème sous Apparence, appuyez sur Importer et choisissez le fichier.
- 3Consultez l'aperçu. Il affiche les couleurs des deux moitiés, la forme, les couleurs du terminal et un rapport de contraste. Un contraste faible affiche un avertissement, et vous pouvez tout de même appliquer le thème. Un fichier qui enfreint les règles est refusé, et rien ne change.
Un thème modifie l'apparence de l'application et rien d'autre. Il ne peut pas exécuter de code, charger des fichiers ni contacter un serveur.
Un appareil conserve jusqu'à huit thèmes importés. Il n'existe pas d'importation depuis un lien, et les thèmes ne se synchronisent pas entre appareils.
04/Rédiger
Rédigez votre propre thème.
Le point de départ le plus rapide est un thème fourni. Exportez-le, modifiez id et name, modifiez les couleurs, les mots de forme ou la palette de terminal, puis réimportez-le. Un thème importé ne peut pas utiliser l'identifiant d'un thème fourni.
Voici une version raccourcie de harbour.json, un fichier version 2. Les lignes ... représentent les parties omises.
{
"version": 2,
"id": "harbour",
"name": "Harbour",
"author": "Collie",
"light": {
"background": "oklch(0.95 0.01 235)",
"foreground": "oklch(0.26 0.025 250)",
"card": "oklch(0.985 0.004 235)",
"...": "..."
},
"dark": {
"background": "oklch(0.21 0.018 250)",
"foreground": "oklch(0.93 0.012 240)",
"card": "oklch(0.255 0.02 252)",
"...": "..."
},
"fonts": { "ui": "atkinson", "display": "grotesk" },
"surface": {
"radius": "soft",
"shadow": "lifted",
"density": "default",
"weight": "default",
"border": "default",
"ground": "grain",
"chrome": "page",
"rows": "rules",
"icons": "thin",
"labels": "caps"
},
"ansi": {
"0": "#073642",
"1": "#f0504a",
"2": "#859900",
"...": "..."
}
}Les 43 jetons
Un fichier de thème ne peut nommer que ces jetons, répartis en quatre groupes. Un fichier contenant toute autre clé est refusé.
| Groupe | Ce qu'il applique | Jetons |
|---|---|---|
| Surfaces et couleurs de texte21 | La page, les cartes, l'interface, le texte, les boutons, les bordures et l'anneau de focus. |
|
| État6 | Les états des agents et la couleur d'information. |
|
| Syntaxe6 | Les couleurs de texte dans les diffs et le code. |
|
| Identité de l'hôte10 | Les couleurs qui différencient vos machines. |
|
Forme et apparence
Le bloc surface contient dix mots. Chacun provient d'une liste fermée, et un jeton omis conserve sa valeur par défaut, à savoir le premier mot de sa liste. Une valeur numérique libre n'est jamais acceptée, afin qu'un thème ne puisse pas altérer une taille de cible tactile.
radius- Le coin d'une carte, d'une ligne, d'un champ et d'un bouton.
sharpsoftround
shadow- L'ombre sous les panneaux surélevés.
defaultflatlifted
density- L'espace présent à l'intérieur et entre les commandes.
defaultroomy
weight- L'épaisseur de rendu du texte medium et semibold.
defaultbold
border- L'épaisseur d'un filet.
defaultstrong
ground- La page sous l'ensemble des éléments : plate, un dégradé doux ou un grain fin.
flatgradientgrain
chrome- L'en-tête et les barres : sur la couleur de la page, ou sur leur propre bandeau.
pageband
rows- Une liste sous forme d'un groupe encadré unique avec des séparateurs, ou sous forme d'une carte pour chaque ligne.
rulescards
icons- L'épaisseur de trait de chaque icône.
defaultthinheavy
labels- Les petits libellés de section, en majuscules ou avec la casse de phrase.
capssentence
Palette de terminal
Le bloc ansi contient 18 couleurs ou aucune : les 16 couleurs du terminal, ink et ground. Chacune est sous la forme #rrggbb ou oklch(L C H), et chacune passe un contrôle de validation.
- Valeurs
- Une valeur est une couleur :
#rrggbb,#rrggbbaaouoklch(L C H), avec/ Apour l'opacité. L va de 0 à 1, C de 0 à 0.5 et H de 0 à 360, tous sous forme de simples nombres. - Moitiés
- Indiquez
light,darkou les deux. Une moitié que vous omettez est complétée depuis Collie, jeton par jeton. - Polices de caractères
- La propriété optionnelle
fonts.uinomme l'une des polices intégrées à ColliePWA. La propriété optionnellefonts.displayen nomme une pour les titres. Aucune autre police n'est acceptée. - Ce qui est refusé
- Une clé hors de la liste, une version autre que 1 ou 2, une valeur qui n'est ni une couleur ni un mot de forme,
var(),url()ou toute autre fonction, l'identifiant d'un thème fourni et un fichier dépassant 64 KiB. Le message indique la cause, et rien n'est appliqué. - Version
versionvaut 1 ou 2. Un fichier avec un blocsurface, une policefonts.displayou un blocansiindique 2. Un fichier de version 2 nécessite ColliePWA 1.22.0 ou une version plus récente.
05/Partager
Exportez et partagez.
L'exportation écrit le thème actif sous la forme d'un fichier .collie-theme.json. Envoyez-le à quelqu'un, ou conservez-le dans un dépôt, et la personne l'importe de la même manière que vous.