Themes

Plugins can add colour themes. They appear in Settings, Appearance next to Flare's own themes and the editor themes it ships, such as Nord, Dracula, Tokyo Night and Catppuccin.

A theme is thirty colours in the manifest. It needs no code, no permissions and no dist/plugin.js, so a theme plugin can be just a package.json. Flare expands your colours into every token its screens use, with the same code it uses for its own themes. Your theme reaches every screen, chart and value chip.

Start a theme

npm create flare-plugin@latest -- --starters theme

The theme starter writes a dark and a light theme into the manifest. There's no source, no build and nothing to type check.

Write the colours

Themes go in contributes.themes. This is Flare's own dark theme as a plugin. Copy it and change what you like:

package.json

{
  "name": "flare-plugin-midnight",
  "version": "1.0.0",
  "flare": {
    "id": "flare.midnight",
    "title": "Midnight",
    "description": "A dark theme, made from Flare's own.",
    "author": "Flare",
    "contributes": {
      "themes": [
        {
          "id": "midnight",
          "title": "Midnight",
          "description": "Flare Dark, to start from.",
          "mode": "dark",
          "colors": {
            "canvas": "#070708",
            "shell": "#0b0b0c",
            "panel": "#111113",
            "surface": "#19191c",
            "selected": "#1f1f23",
            "elevated": "#212125",
            "control": "#28282d",
            "border": "#242428",
            "borderStrong": "#3a3a40",
            "text": "#f0f0f2",
            "textSoft": "#d4d4d8",
            "muted": "#98989f",
            "subtle": "#76767e",
            "accent": "#f0f0f2",
            "accentContrast": "#0c0c0d",
            "danger": "#f06860",
            "amber": "#deb269",
            "positive": "#5fbd8a",
            "info": "#78b0e4",
            "chart": "#4c8fe6",
            "values": {
              "string": "#86efac",
              "number": "#93c5fd",
              "boolean": "#c4b5fd",
              "timestamp": "#fdba74",
              "reference": "#a5b4fc",
              "map": "#f472b6",
              "array": "#67e8f9",
              "geopoint": "#5eead4",
              "bytes": "#bef264",
              "null": "#a1a1aa"
            }
          }
        }
      ]
    }
  }
}

mode is light or dark. It picks which Flare theme yours is laid over, so details that differ between the two, such as shadows, match your theme.

Write every colour as #rrggbb, with no names and no alpha. Flare works out any tints it needs.

Each key is a role. canvas is the window background, panel is the raised surface pages sit on, and text, textSoft, muted and subtle are four levels of text. See Theme colours for what every role paints.

Flare identifies a plugin's theme as plugin:<plugin id>/<theme id>, so it can't clash with a built in one. The theme above is plugin:flare.midnight/midnight.

Tune it live

npm run dev

With Developer mode on, Flare rereads the manifest every two seconds. Pick your theme in Settings, Appearance and edit a colour. The terminal confirms the save and the app updates a moment later:

  ● 14:12:08 Theme colours updated. Flare shows them in a moment.

Check contrast

Flare checks every theme against WCAG contrast. Text needs 4.5:1 against its background. Quieter text, marks and charts need 3:1:

Pair	At least
text on panel, on canvas and on selected	4.5:1
textSoft and muted on panel	4.5:1
accentContrast on accent	4.5:1
subtle, danger, positive and chart on panel	3:1
Every colour in values on panel	3:1

A theme that falls short still installs, since some themes are soft on purpose. But flare-plugin validate lists each failing pair, flare-plugin dev prints them on every save, and the Appearance page shows them too:

  ● The theme midnight may be hard to read in places:
    muted on panel is 3.92:1, below 4.5:1, so it may be hard to read

Share it

Theme plugins pack and install like any other. npm run pack makes a .tgz, and Publishing covers the rest. The install dialog lists no permissions, because there are none.