Skip to content

Theme studio

Start from a built-in theme or from your theme file. Change the colours, corners, and fonts, and examine the preview. Download the .json file, then add it to the launcher as Themes tells you. The preview uses the parts of this website to show the launcher. It is near to the launcher, but it is not the same.

Theme

Colours

#rrggbb, or #rrggbbaa for a colour with opacity.

Body and text
Page backgroundpage
Panels, lists and fieldspanel
Rules and bordershairline
Textink
Captions and secondary valuesmuted
Keys
White keyskey_white
Black keyskey_black
Grey keys: tabs, disabled keys, tagskey_grey
Text on white keyson_white
Text on black keyson_black
Accent
Accent fill: primary key, open tab, lit LEDorange
Accent as textorange_text
Text on the accent fillon_orange
Danger
Destructive confirm keydanger
Danger as textdanger_text
LEDs
LED that is offled_off
Success LEDok
Display windows
Display backgrounddisplay
Lit segments and barsdisplay_ink
Unlit segmentsdisplay_dim
Display labels and unitsdisplay_label

Corners and fonts

The launcher's own keys and panels keep their corners.

A font family name. Leave empty for the launcher's font.

Contrast

The launcher's rules for its own themes. A failed rule still loads.

19 of 19 rules met

  • Text on the page14.70 / 4.5
  • Text on panels16.12 / 4.5
  • Captions on the page4.53 / 4.5
  • Captions on panels4.96 / 4.5
  • Text on white keys17.77 / 4.5
  • Text on black keys15.03 / 4.5
  • Text on grey keys and tags12.48 / 4.5
  • Accent text on the page4.56 / 4.5
  • Accent text on panels5.00 / 4.5
  • Danger text on the page5.16 / 4.5
  • Danger text on panels5.66 / 4.5
  • Text on the danger key5.60 / 4.5
  • Lit segments on the display6.45 / 4.5
  • Labels on the display5.12 / 4.5
  • Page colour on an ink tag14.70 / 4.5
  • Text on the accent fill3.55 / 3
  • Lit LED on the page2.78 / 2.7
  • Accent on panels3.05 / 3
  • Unlit LED on the page1.99 / 1.5

To use the file, put it in the launcher's themes folder and choose Reload in Settings › Appearance. How to add a local theme →

Theme file
{
  "themes": [
    {
      "name": "My theme",
      "appearance": "light",
      "colors": {
        "page": "#e4e4e1",
        "panel": "#eeeeeb",
        "hairline": "#bcbcb7",
        "ink": "#121212",
        "muted": "#666662",
        "key_white": "#f9f9f7",
        "key_black": "#1d1d1d",
        "key_grey": "#d3d3cf",
        "on_white": "#121212",
        "on_black": "#f2f2ef",
        "orange": "#f0520f",
        "orange_text": "#b53c08",
        "on_orange": "#ffffff",
        "danger": "#c8261b",
        "danger_text": "#b42318",
        "led_off": "#a3a39e",
        "ok": "#2f9a3c",
        "display": "#141414",
        "display_ink": "#ff6a2a",
        "display_dim": "#3d2619",
        "display_label": "#948479"
      },
      "radius": 4,
      "radius_lg": 6
    }
  ]
}

Your work is kept in this browser.