Aller au contenu
ColliePWA

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.

  1. 1Placez un fichier de thème sur votre téléphone. Son extension est .json et sa taille est inférieure à 64 KiB.
  2. 2Dans Paramètres, ouvrez la carte Thème sous Apparence, appuyez sur Importer et choisissez le fichier.
  3. 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é.

GroupeCe qu'il appliqueJetons
Surfaces et couleurs de texte21La page, les cartes, l'interface, le texte, les boutons, les bordures et l'anneau de focus.
  • background
  • foreground
  • card
  • card-foreground
  • chrome
  • primary
  • primary-foreground
  • secondary
  • secondary-foreground
  • muted
  • muted-foreground
  • accent
  • accent-foreground
  • control-on
  • control-on-foreground
  • destructive
  • destructive-foreground
  • border
  • input
  • rule
  • ring
État6Les états des agents et la couleur d'information.
  • status-blocked
  • status-working
  • status-done
  • status-idle
  • status-unknown
  • status-info
Syntaxe6Les couleurs de texte dans les diffs et le code.
  • syntax-keyword
  • syntax-string
  • syntax-constant
  • syntax-property
  • syntax-entity
  • syntax-comment
Identité de l'hôte10Les couleurs qui différencient vos machines.
  • host-0
  • host-1
  • host-2
  • host-3
  • host-4
  • host-5
  • host-6
  • host-7
  • host-8
  • host-9

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.
  • sharp
  • soft
  • round
shadow
L'ombre sous les panneaux surélevés.
  • default
  • flat
  • lifted
density
L'espace présent à l'intérieur et entre les commandes.
  • default
  • roomy
weight
L'épaisseur de rendu du texte medium et semibold.
  • default
  • bold
border
L'épaisseur d'un filet.
  • default
  • strong
ground
La page sous l'ensemble des éléments : plate, un dégradé doux ou un grain fin.
  • flat
  • gradient
  • grain
chrome
L'en-tête et les barres : sur la couleur de la page, ou sur leur propre bandeau.
  • page
  • band
rows
Une liste sous forme d'un groupe encadré unique avec des séparateurs, ou sous forme d'une carte pour chaque ligne.
  • rules
  • cards
icons
L'épaisseur de trait de chaque icône.
  • default
  • thin
  • heavy
labels
Les petits libellés de section, en majuscules ou avec la casse de phrase.
  • caps
  • sentence

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, #rrggbbaa ou oklch(L C H), avec / A pour 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, dark ou 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.ui nomme l'une des polices intégrées à ColliePWA. La propriété optionnelle fonts.display en 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
version vaut 1 ou 2. Un fichier avec un bloc surface, une police fonts.display ou un bloc ansi indique 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.

Détails dans Thèmes