[{"data":1,"prerenderedAt":27},["ShallowReactive",2],{"doc:en:plugins\u002Fthemes":3},{"title":4,"lede":5,"html":6,"headings":7},"Themes","A declarative plugin can give Escouade other colors: values for the interface’s tokens, dark and light, and a palette of project colors. It is picked in Settings › Application › Colors and applies at once, terminals and editor included.","\u003Ch2 id=\"a-theme-in-the-manifest\">A theme in the manifest\u003C\u002Fh2>\n\u003Cp>The “High contrast” plugin, whole: one theme, dark and light, and its project palette.\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>Each entry of \u003Ccode class=\"key\">contributes.themes\u003C\u002Fcode> is a theme:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode class=\"key\">id\u003C\u002Fcode>: its id within the plugin (letters, digits, \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>: its name, in one language or per language; without it, its \u003Ccode class=\"key\">id\u003C\u002Fcode>;\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"key\">dark\u003C\u002Fcode> and \u003Ccode class=\"key\">light\u003C\u002Fcode>: the values of the tokens, either or both;\u003C\u002Fli>\n\u003Cli>\u003Ccode class=\"key\">projectColors\u003C\u002Fcode>: the palette offered for projects (24 colors at most), in place of Escouade’s.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>A plugin may bring several themes. In the “Colors” menu, each is called by its name, followed by the plugin’s when they differ.\u003C\u002Fp>\n\u003Ch2 id=\"what-a-theme-leaves-out\">What a theme leaves out\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>A missing token keeps Escouade’s value.\u003C\u002Fstrong> A theme that only gives \u003Ccode class=\"key\">--frame\u003C\u002Fcode> changes the window’s frame and nothing else; a theme with only \u003Ccode class=\"key\">dark\u003C\u002Fcode> leaves light mode to Escouade. System, Light or Dark stays the user’s choice, in the “Theme” row above.\u003C\u002Fp>\n\u003Cp>\u003Ccode class=\"key\">--p\u003C\u002Fcode>, the color of the open project, is not a theme token: the theme gives the palette the user picks it from. Escouade’s surfaces are tinted with it (\u003Ccode>color-mix(in oklch, var(--p) 8%, …)\u003C\u002Fcode>); a theme can keep that tint by writing its surfaces the same way.\u003C\u002Fp>\n\u003Ch2 id=\"the-tokens\">The tokens\u003C\u002Fh2>\n\u003Cp>They are those of \u003Ccode class=\"key\">src\u002Fapp.css\u003C\u002Fcode>, listed in \u003Ccode class=\"key\">DESIGN.md\u003C\u002Fcode> (“Les jetons”):\u003C\u002Fp>\n\u003Cdiv class=\"table\">\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Family\u003C\u002Fth>\n\u003Cth>Tokens\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Project\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>Lines and hover\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>Text\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>States\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>Filled button and inks\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>Git history\u003C\u002Ftd>\n\u003Ctd>\u003Ccode class=\"key\">--lane-main\u003C\u002Fcode>, \u003Ccode class=\"key\">--lane-1\u003C\u002Fcode> to \u003Ccode class=\"key\">--lane-8\u003C\u002Fcode>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Code and 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>Shape is not a theme’s business: fonts, radii, widths of the projects’ rail and of the sidebar (\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>…) stay Escouade’s.\u003C\u002Fp>\n\u003Cp>Terminals take their colors from \u003Ccode class=\"key\">--well\u003C\u002Fcode>, \u003Ccode class=\"key\">--code-fg\u003C\u002Fcode>, \u003Ccode class=\"key\">--text\u003C\u002Fcode>, the ANSI colors (\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>) and \u003Ccode class=\"key\">--p\u003C\u002Fcode> for the selection; the editor, from \u003Ccode class=\"key\">--code-*\u003C\u002Fcode> and \u003Ccode class=\"key\">--syn-*\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2 id=\"allowed-values\">Allowed values\u003C\u002Fh2>\n\u003Cp>Escouade filters each value before putting it on the window. What does not pass is left out, and the token keeps Escouade’s value; Settings › Application says how many values of the chosen theme were left out.\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Colors\u003C\u002Fstrong> (almost every token): \u003Ccode class=\"key\">#rgb\u003C\u002Fcode>, \u003Ccode class=\"key\">#rgba\u003C\u002Fcode>, \u003Ccode class=\"key\">#rrggbb\u003C\u002Fcode>, \u003Ccode class=\"key\">#rrggbbaa\u003C\u002Fcode>, the functions \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> and \u003Ccode class=\"key\">color-mix()\u003C\u002Fcode>, relative colors (\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>, and \u003Ccode class=\"key\">var()\u003C\u002Fcode> of another token of the list (or of \u003Ccode class=\"key\">--p\u003C\u002Fcode>). One color per token, 160 characters at most.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The proportions\u003C\u002Fstrong> \u003Ccode class=\"key\">--sel\u003C\u002Fcode> and \u003Ccode class=\"key\">--glow\u003C\u002Fcode>: a percentage from 0 to 100% (\u003Ccode class=\"key\">26%\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The number\u003C\u002Fstrong> \u003Ccode class=\"key\">--shade\u003C\u002Fcode>, which softens shadows: from 0 to 1 (\u003Ccode class=\"key\">0.3\u003C\u002Fcode>).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The three channels\u003C\u002Fstrong> \u003Ccode class=\"key\">--fg-rgb\u003C\u002Fcode>, the ink of lines: \u003Ccode>15, 17, 22\u003C\u002Fcode>.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The palette\u003C\u002Fstrong> \u003Ccode class=\"key\">projectColors\u003C\u002Fcode>: colors, without \u003Ccode class=\"key\">var()\u003C\u002Fcode>.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Never \u003Ccode class=\"key\">url()\u003C\u002Fcode>, another function (\u003Ccode class=\"key\">image-set()\u003C\u002Fcode>, \u003Ccode class=\"key\">attr()\u003C\u002Fcode>, \u003Ccode class=\"key\">env()\u003C\u002Fcode>…), quotes, backslashes, \u003Ccode class=\"key\">;\u003C\u002Fcode>, braces or \u003Ccode class=\"key\">!important\u003C\u002Fcode>: a theme loads nothing, writes no CSS of its own, and cannot hide one of Escouade’s requests (a permission, a question). A token that is not in the list is ignored.\u003C\u002Fp>\n\u003Ch2 id=\"what-the-user-sees\">What the user sees\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>The choice.\u003C\u002Fstrong> The “Colors” row, under “Theme”: “Escouade”, then the themes of the plugins installed and turned on for the app. With no theme installed, a “Browse themes” button opens the Plugins view on its “Themes” category.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>At once.\u003C\u002Fstrong> The window, the open terminals (without reopening them) and the editor take the theme as soon as it is chosen; the palette replaces Escouade’s in the “New project” wizard, in Settings › Project and in a tile’s menu. A project keeps its color: if it is not in the palette, it is added at the end.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>At startup.\u003C\u002Fstrong> The chosen theme is kept with the settings, and put on before the first paint.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>The plugin removed.\u003C\u002Fstrong> Turned off, uninstalled or gone invalid, its theme leaves the window and Escouade’s colors come back; Settings › Application says so. The choice stays: the plugin turned on again, its theme comes back.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"testing-a-theme\">Testing a theme\u003C\u002Fh2>\n\u003Cp>\u003Ccode>escouade-plugin validate\u003C\u002Fcode> checks the manifest. To see the theme, install the plugin’s folder in development (Plugins view › “In development”), pick it in Settings › Application and switch from Dark to Light. The “High contrast” example plugin, the manifest above (\u003Ccode>plugins\u002Fhigh-contrast\u003C\u002Fcode> in Escouade’s repository), is a starting point: see \u003Ca href=\"\u002Fen\u002Fdocs\u002Fplugins\u002Fexamples\u002F#high-contrast\">Example plugins\u003C\u002Fa>.\u003C\u002Fp>\n",[8,12,15,18,21,24],{"id":9,"text":10,"depth":11},"a-theme-in-the-manifest","A theme in the manifest",2,{"id":13,"text":14,"depth":11},"what-a-theme-leaves-out","What a theme leaves out",{"id":16,"text":17,"depth":11},"the-tokens","The tokens",{"id":19,"text":20,"depth":11},"allowed-values","Allowed values",{"id":22,"text":23,"depth":11},"what-the-user-sees","What the user sees",{"id":25,"text":26,"depth":11},"testing-a-theme","Testing a theme",1793889382310]