Themes

Choosing a Theme

You can also switch theme without opening the settings: run the Appearance command of the theme from the command palette, for example Appearance: Pixel, or click the Settings icon at the bottom of the activity bar and choose a theme in the Themes submenu.

Density and Text Size

A theme sets how tightly the controls are packed and how large the text is. Density and Text size in Settings > Appearance change the two values for every theme:

Follow theme, the default, uses the values of the active theme.

Sample Themes

Babel publishes a set of theme packages as samples. They are listed in the Extensions view; install one and its themes appear in Settings > Appearance > Theme.

Parchment and Pixel carry pictures and need Babel Desktop 0.3.0 or later. An older version lists them as needing a newer Babel Desktop and does not install them.

Pixel

Pixel is a single light theme, so it does not follow the appearance of the operating system. The package holds no code: it restyles the application with color tokens, shape settings, three font files and SVG pictures.

It changes:

• Colors: light grey panels and status bar, with one dark grey for the activity bar, the primary buttons, the active tab and the focus ring. Charts use a grey ramp with two muted hues, steel blue and ochre.
• Fonts: the interface is set in Pixel Operator and monospaced text in Departure Mono. Both fonts are in the package.
• Shape: square corners, thick borders, boxed tabs and outlined fields.
• Icons and logo: the 44 icons of the interface are redrawn as pixel art on a 16 by 16 grid, and the Babel logo is drawn in pixels too.
• Check boxes and radio buttons: a square pixel frame and a stepped circle replace the system controls.

Pixel fonts are drawn on a pixel grid and look sharpest at sizes that are multiples of it. If the text looks soft or small, choose a larger Text size.

Creating a Theme

A theme is a small extension. It starts from the built-in light or dark palette (base) and overrides only the color tokens you list; the rest are inherited. Setting just accent, for example, is enough to recolor buttons, links, selections and globe markers.

{
  "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" }
      }
    ]
  }
}

Increase version whenever you change a theme, then install the new package over the old one.

Shape, Controls and Type

Besides colors, a theme can set shape, controls and type. All three are optional, and a member you leave out keeps its default.

{
  "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" }
}

The named font families are fonts already installed on the computer; nothing is downloaded. The Density and Text size settings of the user, when they are not on Follow theme, take precedence over shape.density and type.size. A manifest that uses any of these members must declare minApp 0.2.0 or later.

Fonts

A .babelext package can ship its own fonts. Declare them in contributes.fonts and select one with font:<fontId>:

"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" }
]

• Font files are WOFF2 files in the fonts folder, at most 1 MiB each and 4 MiB in total.
• license is required and must be OFL-1.1, Apache-2.0, MIT, CC0-1.0 or Ubuntu-1.0.
• Every declared file must be in the package and every font file must be declared. Fonts are never loaded from the network, and a bare extension.json cannot declare them.
• A family used for type.body needs a face of weight 600 or more next to the regular one.

Skins

A skin adds pictures to a theme. It has four optional parts:

"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" }
}

• Pictures sit directly in the skins folder: PNG files up to 512 KiB and 2048 pixels a side, with an optional @2x file at twice the size, and SVG files up to 64 KiB. The whole folder stays within 4 MiB.
• A control face is cut in nine parts by slice, four whole numbers for top, right, bottom and left, so it stretches without deforming its corners. It also declares the text color ink and the background color tone, with a contrast of at least 4.5:1.
• An icon or a logo with mode tint, the default, is painted in the color the application already uses in that place; color keeps the colors of the file.
• SVG files are checked before they are used: scripts, styles, external references and entities are refused.
• Every file in the folder must be used and every file named in the manifest must be present. A bare extension.json cannot have a skin.
• A manifest with a skin must declare minApp 0.3.0 or later. The application icon and the installer cannot be themed.