Thèmes

Les thèmes changent l’aspect de toute l’application : les couleurs du canevas, des graphiques et du globe de la gestion des licences, mais aussi la forme des contrôles, les polices et les icônes.

Choisir un thème

Ouvrir les paramètres d’apparence

Ouvrez les Paramètres (Ctrl+, sous Windows et Linux, Cmd+, sous macOS) et choisissez Apparence.

Sélectionner un thème

Choisissez le thème dans Paramètres > Apparence > Thème. Système suit l’apparence claire ou sombre du système d’exploitation, Clair et Sombre sont les thèmes intégrés, et chaque extension activée ajoute ses thèmes à la liste. Lorsqu’une famille de thèmes comprend à la fois un thème clair et un thème sombre, comme Copper Night et Copper Day, la liste propose aussi Copper (suit le système), qui passe de l’un à l’autre en même temps que le système d’exploitation.

Vérifier le résultat

Le thème change immédiatement. Le Style du globe du tableau de bord de la gestion des licences se règle dans la même fenêtre.

Vous pouvez aussi changer de thème sans ouvrir les paramètres : exécutez la commande Apparence du thème depuis la palette de commandes, par exemple Apparence : Pixel, ou cliquez sur l’icône Paramètres en bas de la barre d’activité et choisissez un thème dans le sous-menu Thèmes.

Fenêtre des paramètres sur la page Appearance, affichée dans le thème Copper Night, avec les paramètres Interface language, Theme réglé sur Copper Night, Globe style et la catégorie Application — Les paramètres dans le thème Copper Night

Tableau de bord de la gestion des licences affiché avec le thème Copper Night, dont les tuiles, la barre latérale et la barre d’activité suivent le thème — Le tableau de bord de la gestion des licences dans le thème Copper Night

Densité et taille du texte

Un thème définit l’espacement des contrôles et la taille du texte. Dans Paramètres > Apparence, Densité et Taille du texte modifient ces deux valeurs pour tous les thèmes :

Paramètre	Valeurs
Densité	Comme le thème, Compacte, Normale, Aérée
Taille du texte	Comme le thème, Petite, Normale, Grande

Comme le thème, la valeur par défaut, reprend les valeurs du thème actif.

Thèmes d’exemple

Babel publie un ensemble de paquets de thèmes à titre d’exemples. Ils sont répertoriés dans la vue Extensions ; installez-en un, et ses thèmes apparaissent dans Paramètres > Apparence > Thème.

Paquet	Thèmes	Aspect
Copper	Copper Night, Copper Day	Des accents cuivrés sur fond anthracite ou parchemin, et une commande qui ouvre les règles XML
Amethyst	Amethyst Night, Amethyst Day	Des accents améthyste sur fond prune foncé ou lilas, avec ses propres icônes de barre d’activité
Parchment	Parchment Day, Parchment Night	Papier et encre : surfaces texturées, boutons façon tampon et icônes dessinées à la main
Pixel	Pixel	Gris clair, avec des polices pixel, des icônes en pixel art et des contrôles carrés

Parchment et Pixel contiennent des images et nécessitent Babel Desktop 0.3.0 ou une version ultérieure. Une version plus ancienne indique qu’ils nécessitent une version plus récente de Babel Desktop et ne les installe pas.

Pixel

Pixel est un thème clair unique et ne suit donc pas l’apparence du système d’exploitation. Le paquet ne contient aucun code : il change l’aspect de l’application avec des jetons de couleur, des réglages de forme, trois fichiers de police et des images SVG.

Le canevas du projet et la carte de la cible dans le thème Pixel

Il modifie :

Les couleurs : des panneaux et une barre d’état gris clair, avec un seul gris foncé pour la barre d’activité, les boutons principaux, l’onglet actif et l’indicateur de focus. Les graphiques utilisent un dégradé de gris et deux teintes sourdes, bleu acier et ocre.
Les polices : l’interface est composée en Pixel Operator et le texte à chasse fixe en Departure Mono. Les deux polices sont fournies dans le paquet.
La forme : des coins carrés, des bordures épaisses, des onglets encadrés et des champs à contour.
Les icônes et le logo : les 44 icônes de l’interface sont redessinées en pixel art sur une grille de 16 par 16, et le logo Babel est lui aussi dessiné en pixels.
Les cases à cocher et les boutons radio : un cadre carré en pixels et un cercle en escalier remplacent les contrôles du système.

Statistiques de protection dans le thème Pixel : des onglets encadrés avec Renaming sélectionné, les compteurs 540 symboles renommés, 630 symboles éligibles et 85,71 pour cent de couverture dans une police pixel, ainsi que le graphique radar et les barres du nombre de symboles dessinés en gris foncé et bleu acier — Les résultats d’exécution dans le thème Pixel

Fenêtre des paramètres sur la page Appearance dans le thème Pixel, avec Interface language réglé sur English, Theme réglé sur Pixel, Globe style, et Density et Text size tous deux sur Follow theme — Les paramètres dans le thème Pixel

Les polices pixel sont dessinées sur une grille de pixels et sont les plus nettes aux tailles qui en sont des multiples. Si le texte paraît flou ou petit, choisissez une Taille du texte plus grande.

Créer un thème

Un thème est une petite extension. Il part de la palette intégrée claire ou sombre (base) et ne remplace que les jetons de couleur que vous énumérez ; les autres sont hérités. Définir uniquement accent, par exemple, suffit à changer la couleur des boutons, des liens, des sélections et des marqueurs du globe.

Écrire le manifeste

Créez un fichier extension.json qui déclare un thème, ou une famille composée d’un thème clair et d’un thème sombre :

extension.json


{
  "apiVersion": 1,
  "id": "acme.teal",
  "name": "Teal",
  "version": "1.0.0",
  "author": "Acme",
  "license": "MIT",
  "description": "A teal theme family for Babel Desktop.",
  "minApp": "0.1.0",
  "minEngine": "12.0.0",
  "permissions": ["themes"],
  "contributes": {
    "themes": [
      {
        "id": "teal-night",
        "name": "Teal Night",
        "base": "dark",
        "family": "Teal",
        "colors": { "accent": "#2cc7b5", "canvas": "#0f1a1c", "activity-bg": "#0b1416" }
      },
      {
        "id": "teal-day",
        "name": "Teal Day",
        "base": "light",
        "family": "Teal",
        "colors": { "accent": "#0f8a7c" }
      }
    ]
  }
}

Respecter les règles du manifeste

id est de la forme publisher.name, en minuscules, et version, minApp et minEngine sont des numéros de version en trois parties.
base vaut light ou dark. Une family associe au plus un thème clair et un thème sombre.
colors n’accepte que les jetons documentés, chacun sous la forme d’une valeur hexadécimale à six chiffres. Les jetons couvrent la palette de base (bg, panel, panel-alt, text, muted, line, accent, accent-hover, accent-soft, on-accent, selection, focus, link), les couleurs d’état (success, warning, error et leurs surfaces -bg), le canevas, le journal et la barre d’état, la barre d’activité, les badges, les tuiles du tableau de bord, les séries des graphiques et le globe. Un jeton inconnu est rejeté, avec la liste des noms valides.
Un objet facultatif icons remplace des icônes nommées, comme activity.settings ou canvas.run, par des formes vectorielles simples. Le balisage SVG n’est pas accepté ici ; pour utiliser des fichiers SVG, ajoutez un habillage.
Un paquet peut aussi fournir des commands qui exécutent une action intégrée (open-assembly, open-project, save, run, cancel, tab-settings, tab-rules, tab-activity, graph-fit, plugins) ; l’autorisation commands est alors nécessaire.

Installer le thème

Enregistrez le manifeste sous le nom extension.json et installez-le avec Installer depuis un fichier… dans la vue Extensions.

Créer un paquet pour la distribution

Si vous voulez distribuer le thème avec une description, des images et des traductions, empaquetez-le sous forme de paquet .babelext : une archive ZIP qui contient extension.json, un fichier README.md obligatoire, affiché dans l’onglet Détails, des fichiers traduits README.<locale>.md facultatifs, des images dans un dossier media et les traductions de l’extension dans un dossier locales. Le SDK d’extensions de Babel Desktop, sous licence MIT, fournit le schéma du manifeste et la commande babel-extension, qui valide et empaquète les paquets.

Incrémentez version chaque fois que vous modifiez un thème, puis installez le nouveau paquet par-dessus l’ancien.

Forme, contrôles et typographie

Outre colors, un thème peut définir shape, controls et type. Tous trois sont facultatifs, et un membre que vous omettez garde sa valeur par défaut.

extension.json


{
  "id": "teal-night",
  "name": "Teal Night",
  "base": "dark",
  "family": "Teal",
  "shape": { "radius": "small", "density": "compact", "border": "thin" },
  "controls": { "button": "outline", "tabs": "boxed", "field": "underline" },
  "type": { "body": "sans", "size": "normal" },
  "colors": { "accent": "#2cc7b5" }
}

Membre	Valeurs	Valeur par défaut
`shape.radius`	`none`, `small`, `medium`, `large`, `round`	`medium`
`shape.density`	`compact`, `normal`, `comfortable`	`normal`
`shape.border`	`thin`, `normal`, `thick`	`normal`
`controls.button`	`solid`, `outline`, `pill`	`solid`
`controls.tabs`	`underline`, `pill`, `boxed`	`underline`
`controls.field`	`outlined`, `filled`, `underline`	`outlined`
`type.body`	`system`, `sans`, `serif`, `rounded`, `mono` ou `font:<fontId>`	`system`
`type.mono`	`mono` ou `font:<fontId>`	`mono`
`type.size`	`small`, `normal`, `large`	`normal`

Les familles de polices désignées par un nom sont des polices déjà installées sur l’ordinateur ; rien n’est téléchargé. Les paramètres Densité et Taille du texte de l’utilisateur, lorsqu’ils ne sont pas sur Comme le thème, l’emportent sur shape.density et type.size. Un manifeste qui utilise l’un de ces membres doit déclarer un minApp égal ou supérieur à 0.2.0.

Polices

Un paquet .babelext peut fournir ses propres polices. Déclarez-les dans contributes.fonts et sélectionnez-en une avec font:<fontId> :

extension.json


"fonts": [
  { "id": "inter", "family": "Inter", "file": "fonts/Inter-Regular.woff2", "weight": 400, "style": "normal", "license": "OFL-1.1" },
  { "id": "inter-semibold", "family": "Inter", "file": "fonts/Inter-SemiBold.woff2", "weight": 600, "style": "normal", "license": "OFL-1.1" }
]

Les fichiers de police sont des fichiers WOFF2 placés dans le dossier fonts, de 1 Mio au maximum chacun et de 4 Mio au total.
license est obligatoire et doit valoir OFL-1.1, Apache-2.0, MIT, CC0-1.0 ou Ubuntu-1.0.
Chaque fichier déclaré doit se trouver dans le paquet, et chaque fichier de police doit être déclaré. Les polices ne sont jamais chargées depuis le réseau, et un fichier extension.json seul ne peut pas en déclarer.
Une famille utilisée pour type.body doit comporter, en plus de la fonte normale, une fonte de graisse 600 ou plus.

Habillages

Un habillage (skin) ajoute des images à un thème. Il comprend quatre parties facultatives :

Partie	Contenu
`surfaces`	Les textures placées derrière `window`, `titlebar`, `activitybar`, `sidebar`, `canvas`, `panel`, `dialog` et `statusbar`
`controls`	Les images de fond de `button.primary`, `button.secondary`, `button.icon`, `tab`, `tab.active` et `field`, et les images de `checkbox` et `radio`
`icons`	Des fichiers SVG pour les emplacements d’icônes
`logo`	Un fichier PNG ou SVG qui change l’aspect du logo Babel dans l’écran d’accueil, dans la boîte de dialogue À propos et sur les cibles principales du canevas

extension.json


"skin": {
  "surfaces": { "window": { "image": "skins/paper.png", "layout": "tile" } },
  "controls": { "button.primary": { "image": "skins/stamp.svg", "slice": [10, 12, 10, 12], "ink": "#ffffff", "tone": "#6b3fa0" } },
  "icons": { "canvas.run": { "file": "skins/run.svg" } },
  "logo": { "file": "skins/mark.svg", "mode": "tint" }
}

Les images se trouvent directement dans le dossier skins : des fichiers PNG de 512 Kio et 2048 pixels de côté au maximum, avec un fichier @2x facultatif de dimensions doubles, et des fichiers SVG de 64 Kio au maximum. L’ensemble du dossier ne dépasse pas 4 Mio.
L’image de fond d’un contrôle est découpée en neuf parties par slice, quatre nombres entiers pour le haut, la droite, le bas et la gauche, de façon à s’étirer sans déformer ses coins. Elle déclare aussi la couleur du texte ink et la couleur d’arrière-plan tone, avec un contraste d’au moins 4,5:1.
Une icône ou un logo dont le mode est tint, la valeur par défaut, est peint dans la couleur que l’application utilise déjà à cet endroit ; color conserve les couleurs du fichier.
Les fichiers SVG sont contrôlés avant d’être utilisés : les scripts, les styles, les références externes et les entités sont refusés.
Chaque fichier du dossier doit être utilisé, et chaque fichier nommé dans le manifeste doit être présent. Un fichier extension.json seul ne peut pas comporter d’habillage.
Un manifeste doté d’un habillage doit déclarer un minApp égal ou supérieur à 0.3.0. L’icône de l’application et le programme d’installation ne peuvent pas recevoir de thème.