[{"data":1,"prerenderedAt":27},["ShallowReactive",2],{"doc:fr:plugins\u002Fthemes":3},{"title":4,"lede":5,"html":6,"headings":7},"Les thèmes","Un plugin déclaratif peut donner à Escouade d’autres couleurs : des valeurs pour les jetons de l’interface, en sombre et en clair, et une palette de couleurs de projet. Il se choisit dans Réglages › Application › Couleurs et s’applique tout de suite, terminaux et éditeur compris.","\u003Ch2 id=\"un-theme-dans-le-manifeste\">Un thème dans le manifeste\u003C\u002Fh2>\n\u003Cp>Le plugin « Contraste élevé », en entier : un thème, sombre et clair, et sa palette de projets.\u003C\u002Fp>\n\u003Cp>\u003Ccode>plugins\u002Fhigh-contrast\u002Fescouade-plugin.json\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-json\">{\n  "$schema": "https:\u002F\u002Fescouade.dev\u002Fschemas\u002Fplugin-1.json",\n  "id": "dev.escouade.high-contrast",\n  "name": { "fr": "Contraste élevé", "en": "High contrast" },\n  "version": "1.1.0",\n  "description": {\n    "fr": "Un thème à fort contraste, clair et sombre : texte pur, bordures nettes, couleurs d'état franches.",\n    "en": "A high-contrast theme, light and dark: pure text, sharp borders, plain status colors."\n  },\n  "author": { "name": "Escouade", "url": "https:\u002F\u002Fescouade.dev" },\n  "license": "MIT",\n  "repository": "https:\u002F\u002Fgithub.com\u002Fguillaume-gagnaire\u002Fescouade\u002Ftree\u002Fmain\u002Fplugins\u002Fhigh-contrast",\n  "escouade": { "api": "1", "min": "2.1.0" },\n  "contributes": {\n    "themes": [\n      {\n        "id": "high-contrast",\n        "name": { "fr": "Contraste élevé", "en": "High contrast" },\n        "dark": {\n          "--frame": "#000000",\n          "--panel": "color-mix(in oklch, var(--p) 4%, #050505)",\n          "--raise": "#141414",\n          "--raise-2": "#1f1f1f",\n          "--well": "#000000",\n          "--line": "#8a8a8a",\n          "--line-2": "#b0b0b0",\n          "--line-3": "#d8d8d8",\n          "--text": "#ffffff",\n          "--soft": "#f0f0f0",\n          "--muted": "#d0d0d0",\n          "--dim": "#b8b8b8",\n          "--p-ink": "#ffd400",\n          "--ring": "#ffd400",\n          "--run": "#4dff88",\n          "--wait": "#ffb000",\n          "--done": "#7ab8ff",\n          "--add": "#4dff88",\n          "--del": "#ff6b6b"\n        },\n        "light": {\n          "--frame": "#ffffff",\n          "--panel": "#ffffff",\n          "--raise": "#f2f2f2",\n          "--raise-2": "#e6e6e6",\n          "--well": "#ffffff",\n          "--line": "#5c5c5c",\n          "--line-2": "#3d3d3d",\n          "--line-3": "#1f1f1f",\n          "--text": "#000000",\n          "--soft": "#0a0a0a",\n          "--muted": "#262626",\n          "--dim": "#3d3d3d",\n          "--p-ink": "#0040c0",\n          "--ring": "#0040c0",\n          "--run": "#006b2e",\n          "--wait": "#8a4b00",\n          "--done": "#0040c0",\n          "--add": "#006b2e",\n          "--del": "#b00020"\n        },\n        "projectColors": ["#ffd400", "#00e0ff", "#ff5cf0", "#7cff4f", "#ff8a00", "#b48cff"]\n      }\n    ]\n  }\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>Chaque entrée de \u003Ccode class=\"key\">contributes.themes\u003C\u002Fcode> est un thème :\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"key\">id\u003C\u002Fcode> : son identifiant dans le plugin (lettres, chiffres, \u003Ccode class=\"key\">.\u003C\u002Fcode>, \u003Ccode class=\"key\">_\u003C\u002Fcode>, \u003Ccode class=\"key\">-\u003C\u002Fcode>) ;\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"key\">name\u003C\u002Fcode> : son nom, en une langue ou par langue ; sans lui, son \u003Ccode class=\"key\">id\u003C\u002Fcode> ;\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"key\">dark\u003C\u002Fcode> et \u003Ccode class=\"key\">light\u003C\u002Fcode> : les valeurs des jetons, l’un, l’autre ou les deux ;\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"key\">projectColors\u003C\u002Fcode> : la palette proposée pour les projets (24 couleurs au plus), à la place de celle d’Escouade.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Un plugin peut donner plusieurs thèmes. Dans le menu « Couleurs », chacun s’appelle par son nom, suivi de celui du plugin quand ils diffèrent.\u003C\u002Fp>\n\u003Ch2 id=\"ce-qu-un-theme-ne-donne-pas\">Ce qu’un thème ne donne pas\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Un jeton manquant garde la valeur d’Escouade.\u003C\u002Fstrong> Un thème qui ne donne que \u003Ccode class=\"key\">--frame\u003C\u002Fcode> change le cadre de la fenêtre et rien d’autre ; un thème qui n’a que \u003Ccode class=\"key\">dark\u003C\u002Fcode> laisse le mode clair à Escouade. Le choix Système, Clair ou Sombre reste celui de l’utilisateur, dans la rangée « Thème » au-dessus.\u003C\u002Fp>\n\u003Cp>\u003Ccode class=\"key\">--p\u003C\u002Fcode>, la couleur du projet ouvert, n’est pas un jeton de thème : le thème donne la palette dans laquelle l’utilisateur la choisit. Les surfaces d’Escouade en sont teintées (\u003Ccode>color-mix(in oklch, var(--p) 8%, …)\u003C\u002Fcode>) ; un thème peut garder cette teinte en écrivant ses surfaces de la même façon.\u003C\u002Fp>\n\u003Ch2 id=\"les-jetons\">Les jetons\u003C\u002Fh2>\n\u003Cp>Ce sont ceux de \u003Ccode class=\"key\">src\u002Fapp.css\u003C\u002Fcode>, listés dans \u003Ccode class=\"key\">DESIGN.md\u003C\u002Fcode> (« Les jetons ») :\u003C\u002Fp>\n\u003Cdiv class=\"table\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Famille\u003C\u002Fth>\n\u003Cth>Jetons\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Projet\u003C\u002Ftd>\n\u003Ctd>\u003Ccode class=\"key\">--p-ink\u003C\u002Fcode>, \u003Ccode class=\"key\">--p-soft\u003C\u002Fcode>, \u003Ccode class=\"key\">--sel\u003C\u002Fcode>, \u003Ccode class=\"key\">--glow\u003C\u002Fcode>, \u003Ccode class=\"key\">--brand\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Surfaces\u003C\u002Ftd>\n\u003Ctd>\u003Ccode class=\"key\">--frame\u003C\u002Fcode>, \u003Ccode class=\"key\">--panel\u003C\u002Fcode>, \u003Ccode class=\"key\">--raise\u003C\u002Fcode>, \u003Ccode class=\"key\">--raise-2\u003C\u002Fcode>, \u003Ccode class=\"key\">--well\u003C\u002Fcode>, \u003Ccode class=\"key\">--scrim\u003C\u002Fcode>, \u003Ccode class=\"key\">--shade\u003C\u002Fcode>, \u003Ccode class=\"key\">--drop-base\u003C\u002Fcode>, \u003Ccode class=\"key\">--vo-base\u003C\u002Fcode>, \u003Ccode class=\"key\">--orb-base\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Filets et survol\u003C\u002Ftd>\n\u003Ctd>\u003Ccode class=\"key\">--fg-rgb\u003C\u002Fcode>, \u003Ccode class=\"key\">--line\u003C\u002Fcode>, \u003Ccode class=\"key\">--line-2\u003C\u002Fcode>, \u003Ccode class=\"key\">--line-3\u003C\u002Fcode>, \u003Ccode class=\"key\">--hover\u003C\u002Fcode>, \u003Ccode class=\"key\">--sep\u003C\u002Fcode>, \u003Ccode class=\"key\">--ring\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Textes\u003C\u002Ftd>\n\u003Ctd>\u003Ccode class=\"key\">--text\u003C\u002Fcode>, \u003Ccode class=\"key\">--soft\u003C\u002Fcode>, \u003Ccode class=\"key\">--muted\u003C\u002Fcode>, \u003Ccode class=\"key\">--dim\u003C\u002Fcode>, \u003Ccode class=\"key\">--text-ai\u003C\u002Fcode>, \u003Ccode class=\"key\">--idle\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>États\u003C\u002Ftd>\n\u003Ctd>\u003Ccode class=\"key\">--run\u003C\u002Fcode>, \u003Ccode class=\"key\">--wait\u003C\u002Fcode>, \u003Ccode class=\"key\">--wait-bg\u003C\u002Fcode>, \u003Ccode class=\"key\">--wait-line\u003C\u002Fcode>, \u003Ccode class=\"key\">--done\u003C\u002Fcode>, \u003Ccode class=\"key\">--add\u003C\u002Fcode>, \u003Ccode class=\"key\">--del\u003C\u002Fcode>, \u003Ccode class=\"key\">--git-m\u003C\u002Fcode>, \u003Ccode class=\"key\">--warn-ink\u003C\u002Fcode>, \u003Ccode class=\"key\">--info\u003C\u002Fcode>, \u003Ccode class=\"key\">--teal-ink\u003C\u002Fcode>, \u003Ccode class=\"key\">--teal-ink-2\u003C\u002Fcode>, \u003Ccode class=\"key\">--disc\u003C\u002Fcode>, \u003Ccode class=\"key\">--brain\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Bouton plein et encres\u003C\u002Ftd>\n\u003Ctd>\u003Ccode class=\"key\">--primary\u003C\u002Fcode>, \u003Ccode class=\"key\">--primary-hover\u003C\u002Fcode>, \u003Ccode class=\"key\">--on-primary\u003C\u002Fcode>, \u003Ccode class=\"key\">--on-primary-line\u003C\u002Fcode>, \u003Ccode class=\"key\">--on-primary-kbd\u003C\u002Fcode>, \u003Ccode class=\"key\">--on-primary-dim\u003C\u002Fcode>, \u003Ccode class=\"key\">--on-wait\u003C\u002Fcode>, \u003Ccode class=\"key\">--on-hit\u003C\u002Fcode>, \u003Ccode class=\"key\">--on-tick\u003C\u002Fcode>, \u003Ccode class=\"key\">--on-tile\u003C\u002Fcode>, \u003Ccode class=\"key\">--win-close\u003C\u002Fcode>, \u003Ccode class=\"key\">--on-win-close\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Historique de git\u003C\u002Ftd>\n\u003Ctd>\u003Ccode class=\"key\">--lane-main\u003C\u002Fcode>, \u003Ccode class=\"key\">--lane-1\u003C\u002Fcode> à \u003Ccode class=\"key\">--lane-8\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Code et terminal\u003C\u002Ftd>\n\u003Ctd>\u003Ccode class=\"key\">--code-fg\u003C\u002Fcode>, \u003Ccode class=\"key\">--code-ln\u003C\u002Fcode>, \u003Ccode class=\"key\">--code-nb\u003C\u002Fcode>, \u003Ccode class=\"key\">--code-dim\u003C\u002Fcode>, \u003Ccode class=\"key\">--syn-k\u003C\u002Fcode>, \u003Ccode class=\"key\">--syn-f\u003C\u002Fcode>, \u003Ccode class=\"key\">--syn-s\u003C\u002Fcode>, \u003Ccode class=\"key\">--syn-t\u003C\u002Fcode>, \u003Ccode class=\"key\">--syn-n\u003C\u002Fcode>, \u003Ccode class=\"key\">--ansi-k\u003C\u002Fcode>, \u003Ccode class=\"key\">--ansi-w\u003C\u002Fcode>, \u003Ccode class=\"key\">--ansi-w-2\u003C\u002Fcode>, \u003Ccode class=\"key\">--ansi-y\u003C\u002Fcode>, \u003Ccode class=\"key\">--ansi-cy\u003C\u002Fcode>, \u003Ccode class=\"key\">--ansi-cy-2\u003C\u002Fcode>, \u003Ccode class=\"key\">--term-sel-bg\u003C\u002Fcode>, \u003Ccode class=\"key\">--term-sel-fg\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\u003C\u002Fdiv>\n\u003Cp>La forme n’est pas du ressort d’un thème : polices, rayons, largeurs de la barre des projets et de la barre latérale (\u003Ccode class=\"key\">--font\u003C\u002Fcode>, \u003Ccode class=\"key\">--mono\u003C\u002Fcode>, \u003Ccode class=\"key\">--r\u003C\u002Fcode>, \u003Ccode class=\"key\">--rail\u003C\u002Fcode>, \u003Ccode class=\"key\">--side\u003C\u002Fcode>…) restent ceux d’Escouade.\u003C\u002Fp>\n\u003Cp>Les terminaux tirent leurs couleurs de \u003Ccode class=\"key\">--well\u003C\u002Fcode>, \u003Ccode class=\"key\">--code-fg\u003C\u002Fcode>, \u003Ccode class=\"key\">--text\u003C\u002Fcode>, des couleurs ANSI (\u003Ccode class=\"key\">--ansi-*\u003C\u002Fcode>, \u003Ccode class=\"key\">--del\u003C\u002Fcode>, \u003Ccode class=\"key\">--add\u003C\u002Fcode>, \u003Ccode class=\"key\">--syn-f\u003C\u002Fcode>, \u003Ccode class=\"key\">--syn-k\u003C\u002Fcode>, \u003Ccode class=\"key\">--code-dim\u003C\u002Fcode>) et de \u003Ccode class=\"key\">--p\u003C\u002Fcode> pour la sélection ; l’éditeur, de \u003Ccode class=\"key\">--code-*\u003C\u002Fcode> et \u003Ccode class=\"key\">--syn-*\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2 id=\"les-valeurs-permises\">Les valeurs permises\u003C\u002Fh2>\n\u003Cp>Escouade filtre chaque valeur avant de la poser sur la fenêtre. Ce qui ne passe pas est écarté, et le jeton garde la valeur d’Escouade ; Réglages › Application dit combien de valeurs du thème choisi ont été écartées.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Les couleurs\u003C\u002Fstrong> (presque tous les jetons) : \u003Ccode class=\"key\">#rgb\u003C\u002Fcode>, \u003Ccode class=\"key\">#rgba\u003C\u002Fcode>, \u003Ccode class=\"key\">#rrggbb\u003C\u002Fcode>, \u003Ccode class=\"key\">#rrggbbaa\u003C\u002Fcode>, les fonctions \u003Ccode class=\"key\">rgb()\u003C\u002Fcode>, \u003Ccode class=\"key\">rgba()\u003C\u002Fcode>, \u003Ccode class=\"key\">hsl()\u003C\u002Fcode>, \u003Ccode class=\"key\">hsla()\u003C\u002Fcode>, \u003Ccode class=\"key\">hwb()\u003C\u002Fcode>, \u003Ccode class=\"key\">lab()\u003C\u002Fcode>, \u003Ccode class=\"key\">lch()\u003C\u002Fcode>, \u003Ccode class=\"key\">oklab()\u003C\u002Fcode>, \u003Ccode class=\"key\">oklch()\u003C\u002Fcode>, \u003Ccode class=\"key\">color()\u003C\u002Fcode> et \u003Ccode class=\"key\">color-mix()\u003C\u002Fcode>, les couleurs relatives (\u003Ccode>oklch(from var(--wait) l c h \u002F 0.1)\u003C\u002Fcode>), \u003Ccode class=\"key\">transparent\u003C\u002Fcode>, \u003Ccode class=\"key\">white\u003C\u002Fcode>, \u003Ccode class=\"key\">black\u003C\u002Fcode>, et \u003Ccode class=\"key\">var()\u003C\u002Fcode> d’un autre jeton de la liste (ou de \u003Ccode class=\"key\">--p\u003C\u002Fcode>). Une seule couleur par jeton, 160 caractères au plus.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Les proportions\u003C\u002Fstrong> \u003Ccode class=\"key\">--sel\u003C\u002Fcode> et \u003Ccode class=\"key\">--glow\u003C\u002Fcode> : un pourcentage de 0 à 100 % (\u003Ccode class=\"key\">26%\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Le nombre\u003C\u002Fstrong> \u003Ccode class=\"key\">--shade\u003C\u002Fcode>, qui adoucit les ombres : de 0 à 1 (\u003Ccode class=\"key\">0.3\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Les trois canaux\u003C\u002Fstrong> \u003Ccode class=\"key\">--fg-rgb\u003C\u002Fcode>, l’encre des filets : \u003Ccode>15, 17, 22\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>La palette\u003C\u002Fstrong> \u003Ccode class=\"key\">projectColors\u003C\u002Fcode> : des couleurs, sans \u003Ccode class=\"key\">var()\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Jamais de \u003Ccode class=\"key\">url()\u003C\u002Fcode>, d’autre fonction (\u003Ccode class=\"key\">image-set()\u003C\u002Fcode>, \u003Ccode class=\"key\">attr()\u003C\u002Fcode>, \u003Ccode class=\"key\">env()\u003C\u002Fcode>…), de guillemets, d’antislash, de \u003Ccode class=\"key\">;\u003C\u002Fcode>, d’accolade ni de \u003Ccode class=\"key\">!important\u003C\u002Fcode> : un thème ne charge rien, n’écrit pas de CSS à lui, et ne peut pas masquer une demande d’Escouade (une autorisation, une question). Un jeton qui n’est pas dans la liste est ignoré.\u003C\u002Fp>\n\u003Ch2 id=\"ce-que-voit-l-utilisateur\">Ce que voit l’utilisateur\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Le choix.\u003C\u002Fstrong> La rangée « Couleurs », sous « Thème » : « Escouade », puis les thèmes des plugins installés et activés pour l’app. Sans thème installé, un bouton « Voir les thèmes » ouvre la vue Plugins sur sa catégorie « Thèmes ».\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Tout de suite.\u003C\u002Fstrong> La fenêtre, les terminaux ouverts (sans les rouvrir) et l’éditeur prennent le thème dès qu’il est choisi ; la palette remplace celle d’Escouade dans l’assistant « Nouveau projet », dans Réglages › Projet et dans le menu d’une tuile. Un projet garde sa couleur : si elle n’est pas dans la palette, elle y est ajoutée à la fin.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Au démarrage.\u003C\u002Fstrong> Le thème choisi est gardé avec les réglages, et posé avant le premier affichage.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Le plugin retiré.\u003C\u002Fstrong> Désactivé, désinstallé ou devenu invalide, son thème quitte la fenêtre et Escouade reprend ses couleurs ; Réglages › Application le dit. Le choix reste : le plugin réactivé, son thème revient.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"tester-un-theme\">Tester un thème\u003C\u002Fh2>\n\u003Cp>\u003Ccode>escouade-plugin validate\u003C\u002Fcode> vérifie le manifeste. Pour voir le thème, installe le dossier du plugin en développement (vue Plugins › « En développement »), choisis-le dans Réglages › Application et passe de Sombre à Clair. Le plugin d’exemple « Contraste élevé », celui du manifeste plus haut (\u003Ccode>plugins\u002Fhigh-contrast\u003C\u002Fcode> dans le dépôt d’Escouade), est un point de départ : voir \u003Ca href=\"\u002Fdocs\u002Fplugins\u002Fexamples\u002F#contraste-eleve\">Les plugins d’exemple\u003C\u002Fa>.\u003C\u002Fp>\n",[8,12,15,18,21,24],{"id":9,"text":10,"depth":11},"un-theme-dans-le-manifeste","Un thème dans le manifeste",2,{"id":13,"text":14,"depth":11},"ce-qu-un-theme-ne-donne-pas","Ce qu’un thème ne donne pas",{"id":16,"text":17,"depth":11},"les-jetons","Les jetons",{"id":19,"text":20,"depth":11},"les-valeurs-permises","Les valeurs permises",{"id":22,"text":23,"depth":11},"ce-que-voit-l-utilisateur","Ce que voit l’utilisateur",{"id":25,"text":26,"depth":11},"tester-un-theme","Tester un thème",1793889379615]