Thèmes

Un thème définit l'apparence de l'application. Il configure les couleurs, les polices, la forme des contrôles, le rendu de la page et les couleurs du terminal. Il s'agit d'un petit fichier JSON. Collie en fournit quatre. Vous pouvez en importer d'autres depuis un fichier, et exporter n'importe quel thème pour le copier et le modifier. Un thème est le paramètre d'un appareil, conservé dans ce navigateur, et il ne modifie rien sur le bridge.

Chaque thème comporte deux volets. Le volet clair est le jeu de couleurs pour le mode clair. Le volet sombre est le jeu pour le mode sombre. Une couleur dans un thème porte un nom, comme background ou primary, et ce nom est un token.

Les quatre thèmes

Collie fournit quatre thèmes, et trois d'entre eux utilisent chaque composant d'un fichier de thème. Chaque image montre le Dashboard, clair à gauche et sombre à droite.

• —
  Collie est l'apparence historique de l'application. C'est le thème par défaut, et le sélectionner désactive tous les thèmes. Il ne définit aucune forme, aucune apparence et aucune palette, de sorte que chaque terme est le terme par défaut de sa liste.

  !Le thème Collie sur le Dashboard, clair et sombre.

• —
  Nightwatch est conçu pour le téléphone d'astreinte au lit. Le volet sombre est un noir pur avec une nuance d'ambre atténuée, et le volet clair est un papier crépusculaire chaud. Il est carré et plat, avec des lignes épaisses, du texte en gras et une bande ambre pâle derrière l'en-tête et les barres. Le terminal applique une palette ambre sur fond noir pur.

  !Le thème Nightwatch sur le Dashboard, clair et sombre.

• —
  Daylight est conçu pour la lumière directe du soleil et la basse vision. Le texte de corps offre un contraste de 7:1 ou supérieur, les bordures sont renforcées, et le statut bloqué est orange tandis que terminé est bleu, pour bien distinguer les deux sans rouge ni vert. Il comporte des angles arrondis, des lignes présentées sous forme de cartes surélevées sur une page dont le ton varie vers le bas (plus sombre en mode clair, plus clair en mode sombre), et des étapes plus espacées. Le terminal applique une palette vive à fort contraste.

  !Le thème Daylight sur le Dashboard, clair et sombre.

• —
  Harbour s'adresse aux personnes qui passent leur vie dans un terminal. Un bleu-gris froid avec une touche de sarcelle, dans l'esprit de Nord et Solarized, et des couleurs de code qui rappellent un éditeur. Il propose des coins adoucis, un grain subtil sous la page et des icônes fines. Le terminal applique une palette basée sur Solarized.

  !Le thème Harbour sur le Dashboard, clair et sombre.

Le tableau répertorie chaque terme utilisé par chaque thème. Le premier terme de chaque liste correspond à l'apparence actuelle : sharp, default, flat, page, rules et caps. Les termes sont expliqués sous Forme, Apparence et Palette du terminal.

Choisir un thème

Choisissez un thème dans Paramètres → Apparence, et toute l'application change aussitôt.

La carte Thème est la première carte. Cliquez sur un nom et l'application change aussitôt. Chaque nom applique les angles et la graisse de son propre thème, ce qui permet de visualiser le rendu avant de cliquer. La carte se trouve au-dessus de la carte Apparence, qui contient Système, Clair et Sombre. Il s'agit de deux réglages distincts. Le thème définit les couleurs, les formes et l'apparence générale, tandis que Système, Clair ou Sombre détermine la moitié des couleurs affichée.

Un thème qui spécifie une police l'applique une fois à la carte Police, au moment où vous le choisissez. Ensuite, la carte Police prend le dessus : sélectionnez-y une autre police et elle reste active jusqu'à ce que vous changiez à nouveau de thème. La police d'affichage d'un thème ne dépend pas de cette carte : les titres la conservent. Les polices disposent de leur propre section.

Les polices utilisées par ces thèmes n'incluent que les caractères latins et Latin étendu-A. Les textes en cyrillique et CJK basculent donc sur la police système sous ces thèmes (le thème Collie conserve sa variante cyrillique associée).

Importer un thème

Importez un fichier .json dans la carte Thème, lisez l'aperçu et appuyez sur Appliquer.

1. 01
   Dans la carte Thème, appuyez sur Importer et choisissez un fichier .json.
2. 02
   Collie lit le fichier et affiche un aperçu. Il montre le nom, l'auteur, les deux moitiés sous forme d'échantillons, une petite page pour chaque moitié, la forme sur un exemple, les couleurs du terminal et un rapport de contraste.
3. 03
   Appuyez sur Appliquer pour conserver le thème et l'activer, ou sur Annuler pour ne rien garder.

Un avertissement est une ligne du rapport de contraste, par exemple « dark: status-blocked chip on card measures 3.9. The floor is 4.5 ». Cela signifie que le thème est difficile à lire à un endroit donné. Appliquer reste activé, car le choix vous appartient.

Un refus signifie que le fichier enfreint une règle. Collie liste les causes, ne conserve rien et n'applique rien. La liste affiche au maximum 25 causes, puis une ligne « and N more ». Un fichier est refusé pour l'une de ces raisons :

• —
  Ce n'est pas un objet JSON, ou il dépasse 64 KiB.
• —
  Il ne définit aucune couleur.
• —
  Il contient une clé inconnue, une version que Collie ne lit pas, une valeur qui n'est pas une couleur ou une police que Collie ne fournit pas.
• —
  Un mot de forme ne figure pas sur sa liste, ou un nombre remplace un mot.
• —
  Il contient un bloc surface, une police fonts.display ou un bloc ansi, et indique la version 1.
• —
  Son bloc ansi manque d'une clé, contient une couleur avec un canal alpha ou échoue à un contrôle sous Palette du terminal.
• —
  Il contient une valeur incorrecte pour id, name ou author, ou le id appartient à un thème intégré.
• —
  Ce serait un neuvième thème importé. Collie le refuse dès l'appui sur Importer, avant le choix du fichier, et à nouveau lors de Appliquer.

Collie vérifie un dernier point lors de Appliquer. Un fichier dont le id existe déjà sur l'appareil est refusé avec le message « already imported ». Supprimez d'abord l'ancien thème ou modifiez le id.

Un thème modifie uniquement l'apparence de l'application. Il ne peut ni exécuter de code, ni charger de fichiers, ni contacter un serveur.

Un appareil peut stocker jusqu'à huit thèmes importés. Supprimer ne fonctionne que lorsqu'un thème importé est actif. Il supprime ce thème et l'application revient à Collie. La police reste inchangée.

Le rapport de contraste

Le rapport mesure les couleurs d'un thème dans les deux moitiés, et une ligne en échec constitue un avertissement que vous pouvez accepter.

La palette du terminal est la seule exception, car ses contrôles entraînent le refus du fichier. Le tableau liste les valeurs minimales des autres parties. Une valeur minimale correspond à un rapport de contraste : un nombre plus élevé facilite la lecture.

• —
  Le texte destructif est maintenu à la valeur mesurée par Collie lorsque vous conservez ses couleurs. Le rouge clair propre à Collie sur sa page mesure 4,38. Un thème qui conserve les deux couleurs de la paire est maintenu à cette valeur et jamais en dessous de 3. Un thème qui modifie l'une ou l'autre couleur est maintenu à 4,5.
• —
  Un dégradé ou un grain est mesuré à son extrémité. Le rapport mesure le texte de la page, les puces, le texte destructive, le texte status-blocked et à nouveau rule au bas du dégradé ou sur la couleur de ligne du grain, avec les mêmes seuils minimaux.
• —
  Un bandeau est également mesuré. Sous chrome: band, foreground, muted-foreground et status-blocked sont mesurés sur secondary, la couleur du bandeau, à 4,5.

Exporter et partager un thème

Choisissez le thème, puis appuyez sur Exporter. Collie enregistre <id>.collie-theme.json. Un navigateur qui ne peut pas enregistrer de fichier affiche le texte dans une feuille, avec un bouton de copie. Pour créer votre propre thème à partir d'un thème fourni :

1. 01
   Exportez Nightwatch, Daylight, Harbour ou Collie.
2. 02
   Modifiez id et name. L'identifiant d'un thème fourni est refusé.
3. 03
   Modifiez les couleurs et les mots, puis supprimez tout jeton que vous ne souhaitez pas changer.
4. 04
   Envoyez le fichier sur votre téléphone, puis importez-le.

Une exportation écrit la valeur version la plus basse qui prend en charge le contenu du thème.

Écrire un thème

Un fichier contient ces clés, et aucune autre. Toute clé inconnue est refusée avec son nom. Voici un fichier complet de version 2 : il s'agit de Daylight avec une liste de couleurs plus courte et la palette complète.

{
  "version": 2,
  "id": "my-day",
  "name": "My day",
  "author": "Sam",
  "light": { "background": "oklch(0.985 0 0)", "primary": "oklch(0.18 0 0)" },
  "dark": { "background": "oklch(0.12 0 0)", "status-blocked": "oklch(0.81 0.13 60)" },
  "fonts": { "ui": "geist", "display": "atkinson" },
  "surface": {
    "radius": "round", "shadow": "lifted", "density": "roomy",
    "weight": "default", "border": "default", "ground": "gradient",
    "chrome": "page", "rows": "cards", "icons": "default", "labels": "sentence"
  },
  "ansi": {
    "0": "#3a332c", "1": "#ff5f56", "2": "#5fd068", "3": "#ffd84a",
    "4": "#5aa9ff", "5": "#e07ce8", "6": "#3fd6d0", "7": "#f2efe9",
    "8": "#8a827a", "9": "#ff8a80", "10": "#7ad683", "11": "#ffeb8a",
    "12": "#8cc4ff", "13": "#f0a6f5", "14": "#6ad8d2", "15": "#ffffff",
    "ink": "#f5f0e8", "ground": "#1a1612"
  }
}

• —
  version vaut 1 ou 2. Consultez Versions. Tout autre nombre est refusé.
• —
  id contient de 1 à 32 caractères : lettres minuscules, chiffres et traits d'union, en commençant par une lettre ou un chiffre.
• —
  name contient de 1 à 40 caractères, et author jusqu'à 60. Aucun des deux ne peut contenir de caractère de contrôle.
• —
  light et dark sont des objets de jetons. Indiquez l'une des moitiés ou les deux. Une moitié omise, ainsi que tout jeton omis, prend la valeur du thème Collie. Si une seule moitié définit un jeton, l'autre moitié prend la valeur du thème Collie pour ce jeton.
• —
  fonts.ui est facultatif : system, grotesk, aldrich, plex, geist ou atkinson.
• —
  fonts.display est facultatif et prend les six mêmes noms. Consultez Apparence.
• —
  surface est facultatif. Chaque clé qu'il contient est également facultative, et une clé omise prend le mot par défaut de sa liste. Consultez Forme et Apparence.
• —
  ansi est facultatif et contient les 18 clés ou aucune. Voir Palette du terminal.
• —
  $schema est autorisé et ignoré. Le fichier fait au plus 64 Kio.

Une valeur est #rrggbb, #rrggbbaa ou oklch(L C H) et oklch(L C H / A) en chiffres bruts. L va de 0 à 1, C de 0 à 0,5, H de 0 à 360 et A de 0 à 1 ou en pourcentage. Rien d'autre ne fonctionne : aucune couleur nommée, aucun rgb(), aucun var(), aucun url(). Une couleur dans ansi n'a pas d'alpha.

Versions

Un fichier indique sa version, et Collie écrit la version la plus basse qui prend en charge son contenu.

• —
  Un fichier comportant un bloc surface, une fonte fonts.display ou un bloc ansi doit indiquer 2. Un fichier qui indique 1 et contient l'un d'eux est rejeté.
• —
  Un fichier sans ces blocs peut indiquer l'un ou l'autre. Collie lit les deux versions, et l'export d'un thème contenant uniquement des couleurs et fonts.ui indique 1.
• —
  Un fichier de version 2 nécessite Collie 1.22.0 ou une version plus récente.
• —
  Un fichier de version 1 applique le mot par défaut de chaque liste pour chaque jeton de surface.

Les 43 jetons

Chaque moitié accepte n'importe lequel d'entre eux, répartis en quatre groupes.

Forme

Cinq mots dans le bloc surface définissent la forme des contrôles, et chaque clé prend un mot issu d'une liste fermée.

Un mot est un nom, jamais un nombre. Un rayon libre ou un pas d'espacement libre pourrait briser la zone tactile minimale ou transformer un contrôle carré en stade. Le premier mot de chaque liste correspond à l'apparence de l'application avant la version 2.

• —
  Les cercles restent des cercles. Une forme dont la largeur est égale à la hauteur, comme un point d'état, n'est pas un niveau d'arrondi, donc radius ne la modifie pas.
• —
  Une ligne marquée suit le rayon. Avec sharp, une ligne sélectionnée ou bloquée affiche une barre de 2px sur son bord gauche. Avec soft et round, elle affiche une bordure de 2px sur ses quatre côtés et une ombre légère, car une barre latérale gauche ne s'associe jamais à des coins arrondis.
• —
  roomy ne descend jamais en dessous de la valeur par défaut. Les zones tactiles restent à 44px ou plus. Les icônes et le chien dans l'en-tête conservent leur taille ; seul l'espace autour grandit.

Apparence

Cinq autres clés du bloc surface et une clé de police définissent l'apparence de la page. Elles suivent la même règle de mots prédéfinis.

fonts.display définit l'une des six polices pour les titres de page et le nom dans l'en-tête. Un thème qui n'en définit aucune affiche ses titres dans la police de caractères, comme auparavant. Collie ne télécharge une police d'affichage que si le thème la mentionne.

• —
  Un arrière-plan n'affiche aucun fichier image. Le dégradé et le grain sont générés à partir des couleurs du thème lui-même. Les panneaux de l'application étant opaques, l'arrière-plan apparaît dans les espaces qui les séparent.
• —
  Le texte de la page est mesuré sur l'arrière-plan. rapport de contraste vérifie l'extrémité du dégradé ainsi que la couleur des lignes du grain, afin qu'un arrière-plan ne puisse pas masquer le texte.
• —
  Sous un dégradé, les barres conservent la couleur unie de la page. Sur une tablette, l'en-tête et les barres peuvent ressembler à un bloc situé en haut d'une page qui s'assombrit plus bas. Un mot ne peut rien y changer.
• —
  La barre d'état suit une bande. Sous chrome: band, la barre d'état du navigateur prend la couleur de la bande, et sous page, elle prend la couleur de la page.
• —
  rows s'applique à chaque groupe de liste. Cela inclut la liste à l'intérieur de l'index des Paramètres.

Palette du terminal

Le bloc ansi attribue au miroir du terminal ses 16 couleurs propres, son encre et son arrière-plan.

Le bloc contient l'ensemble des 18 clés ou aucune : de "0" à "15" pour les 16 emplacements, ink pour le texte et ground pour l'arrière-plan. Une demi-palette appliquerait deux palettes différentes dans un même panneau. Chaque couleur s'exprime en #rrggbb ou oklch(), sans canal alpha.

Remarque. Définissez la palette pour le mode sombre. Le miroir s'affiche toujours sur un arrière-plan sombre, et en mode clair, Collie inverse l'ensemble du miroir au lieu de le recolorer (pourquoi). Le mode clair présente l'image inversée de vos couleurs. Choisissez une valeur ground qui se transforme en couleur claire background de votre thème, et le miroir s'intègre à la page dans les deux modes.

Une couleur qui échoue à un contrôle de validation est rejetée en indiquant sa clé. Il ne s'agit pas d'un avertissement, car le terminal est l'élément que vous lisez le plus.

L'ensemble lumineux est une liste fixe : le miroir Muse traite ces quatre emplacements comme les premiers plans lumineux. Les 12 autres emplacements restent sous la même ligne, de sorte que cette liste reste exacte avec votre palette.

Ce qu'un thème ne peut pas modifier

Un thème modifie la valeur d'une couleur, ses polices, la forme des commandes, l'aspect de la page et la palette du terminal. Il ne peut rien modifier d'autre.

• —
  Mise en page et tailles des zones tactiles. Une mise en page pour téléphone est facile à casser. Rayon, ombre, densité, graisse et bordure sont des termes fermés, jamais des valeurs libres, et roomy ne descend jamais en dessous de la valeur par défaut.
• —
  Tailles de police et animations. Un thème choisit une police et une graisse, pas une taille, et il ne peut modifier aucun mouvement.
• —
  Le chien Collie. L'en-tête, l'icône de l'écran d'accueil et l'écran de démarrage restent identiques quel que soit le thème.
• —
  Ce que signifie un statut. Son icône et son intitulé restent inchangés, pour qu'un rouge ou un orange choisi ne fasse jamais passer un état bloqué pour un état terminé.
• —
  Une valeur libre, du CSS brut, des polices distantes. Chaque clé accepte une couleur ou un terme issu d'une liste, et les polices proviennent de la liste fournie par Collie.

Le premier rendu et la barre d'état

Votre sélection s'affiche dès la première image. Un court script la lit avant le chargement de l'application, afin qu'un thème fourni n'affiche pas brièvement le thème par défaut en premier. Un thème importé fonctionne de la même manière, à une exception près. Si un jeton n'est défini que dans une seule moitié, ce jeton affiche la couleur par défaut pendant une image. L'application vérifie à nouveau le thème lors de son chargement. Un thème enregistré qui échoue à la vérification est ignoré, l'appareil affiche Collie et la console du navigateur indique la raison. La barre d'état suit les deux couleurs de page du thème, ou ses deux couleurs de bandeau lorsque le thème indique chrome: band.

Dépannage

Voici les problèmes les plus fréquents, avec la cause et la solution pour chacun.

• —
  Un thème affiche la couleur par défaut sur un jeton. Le fichier a omis ce jeton, ou cette moitié. Les jetons manquants proviennent du thème Collie. Ajoutez le jeton à la moitié voulue.
• —
  La police n'a pas changé. Un thème applique sa police une seule fois, lorsque vous le sélectionnez. Si vous avez ensuite choisi une autre police dans Police, ce choix l'emporte. Sélectionnez à nouveau la police, ou sélectionnez à nouveau le thème.
• —
  Un terme de forme ne produit aucun effet. Le terme est peut-être le terme par défaut de sa liste, ou la clé est peut-être manquante. Une clé omise prend le terme par défaut. Vérifiez l'orthographe par rapport aux tableaux sous Forme et Apparence.
• —
  Le fichier est refusé et mentionne ansi. Une palette contient l'ensemble des 18 clés, dans l'espace sombre, et chaque couleur doit franchir son seuil. Le refus indique la clé et la valeur mesurée.
• —
  Le thème disparaît après avoir effacé les données du navigateur. Les thèmes importés existent uniquement dans ce navigateur. Importez à nouveau le fichier.