Themes

Settings → Theme, or Set Theme in the command palette, lists Thymer’s themes. A couple of fun light and dark themes are included by default. Pick an automatic appearance to follow your system between a light theme by day and a dark one at night, choosing which theme to use for each. Toggle Day/Night Theme switches by hand.

Each member picks their own theme. To change the look for one session, see Vibe Shift.

Install a theme

Themes made by others install from a link:

1. In Settings → Theme, click Add theme and choose Install from URL….
2. Paste the link to the theme’s GitHub repository, or a direct link to its thymer-theme.json, and click Load Theme.
3. Pick a variant to preview it, then click Install and Use. Cancel puts your theme back and installs nothing.

A theme is only CSS, so no code runs. Any member can install themes for themselves; they sync with your account in that workspace and work offline. Your themes are under My themes in Settings → Theme, and in Set Theme. Check for updates looks for newer versions; a theme that has one shows Update, which lets you preview it before Update Theme.

To share a theme with the workspace, open its … menu under My themes and choose List for everyone. The option shows once the workspace has other members. Others find the theme under From workspace and in Set Theme. They use your copy: when you update the theme, they get the update, and if you remove it, they go back to a built-in theme.

Some community themes are plugins that add a theme. Install those like any other plugin; see Plugins. If a theme makes Thymer hard to read, Safe Mode starts it without themes.

Create a theme

You can also make a theme in Thymer itself, without publishing anything. Any member can:

1. In Settings → Theme, click Add theme and choose Create a theme.
2. Give the theme a name, choose Light or Dark under Appearance, and write its CSS.
3. Click Preview to try it, then Save and Use. Cancel puts your theme back and saves nothing.

The CSS only applies while the theme is selected, so it needs no theme selector: put the variables under html:root. The theme starts from Thymer’s own light or dark theme, so you only set the colors you want to change:

html:root {
  --color-bg-50: #cbd5e1;
  --color-bg-100: #b4c1d2;
  --color-bg-150: #9aabc1;
  --color-bg-200: #8295b0;
  --color-bg-300: #5d7391;
  --color-bg-400: #405570;
  --color-bg-500: #2c3d54;
  --color-bg-600: #223148;
  --color-bg-700: #1b293d;
  --color-bg-800: #162235;
  --color-bg-900: #111c2d;
  --color-bg-950: #0d1726;
  --color-primary-50: #eff8ff;
  --color-primary-100: #dcefff;
  --color-primary-200: #bbdffc;
  --color-primary-300: #93c8ef;
  --color-primary-400: #79b6e4;
  --color-primary-500: #609ed1;
  --color-primary-600: #4a7da9;
  --color-primary-700: #375f83;
  --color-primary-800: #284761;
  --color-primary-900: #1c3145;
  --color-primary-950: #122132;
}

The colors come in three scales: --color-bg- for backgrounds, --color-text- for text and --color-primary- for the accent. In each scale, 50 stands out most against the background and 950 is closest to it, in light and dark themes alike. Set a whole scale for an even result, or leave a scale out to keep Thymer’s.

A theme you create is either light or dark. For both, create two, and choose one for day and one for night with the automatic appearance.

Your theme is under My themes in Settings → Theme, and in Set Theme. Its … menu has Edit CSS, Export, List for everyone, as with an installed theme, and Remove theme…. Members using your theme get your changes when you save. If you remove it, anyone using it goes back to a built-in theme, so export the CSS first if you want to keep it.

A theme can change more than colors, such as the font, with --font-sans: "Comic Sans MS", sans-serif;. A font you name must be installed on each member’s device, unless the theme loads it with @font-face. Images and fonts need a full https:// link or a data: URL, and @import doesn’t work. Prefer variables over selectors on Thymer’s own elements, which change between versions.

Publish a theme

To share a theme beyond your workspace, publish it. A published theme is a thymer-theme.json and one or more CSS files, in a public GitHub repository or on an HTTPS host that allows cross-origin requests:

{
  "manifestVersion": 1,
  "id": "yourname.midnight",
  "name": "Midnight",
  "author": "Your name",
  "version": "1.0.0",
  "description": "A quiet dark theme.",
  "variants": [
    {
      "id": "midnight-dark",
      "name": "Midnight",
      "appearance": "dark",
      "css": "midnight.css"
    }
  ]
}

html:root {
  color-scheme: dark;
  --color-bg-700: #1b293d;
  --color-text-200: #d5e1ef;
  --color-primary-400: #79b6e4;
}

The manifest has two kinds of id:

• The theme’s own id stands for the whole theme. Thymer recognizes the theme by it when it checks for updates, and treats two themes with the same id as the same theme, so start it with your name, as in yourname.midnight.
• Each variant’s id stands for one look within the theme, such as a light and a dark version. It only has to differ from the other variants in the same theme: Thymer gives every installed variant a selector of its own, so it can’t clash with another theme or with Thymer’s own.

Both kinds of id use lowercase letters, numbers, dots, hyphens and underscores, start with a letter or a number, and are at most 128 characters long.

Besides its id, each variant has a name, a light or dark appearance, and a CSS file. A theme has one to eight variants. With a CSS file per variant, html:root is all the selector you need, as above. Variants can also share one file, each with its own id as the selector, as in html[data-theme="midnight-dark"]. Each variant starts from Thymer’s own light or dark theme, so you only set what you change; add "base": "none" to a variant to define everything yourself. A CSS file may be 256 KB, and all of a theme’s CSS 512 KB together.

The install window shows the description, and a homepage link and a screenshot image if the manifest has them.

With thymer-theme.json at the top of the repository, people paste the repository link. To publish a new version, raise version (three numbers, such as 1.0.1) and keep the ids and the manifest’s link the same. If a variant’s id changes, members who use it go back to a built-in theme.

To publish a theme you created in Thymer, choose Export in its … menu. It gives you a thymer-theme.json and the CSS, ready to save together in a public GitHub repository; check the author and the other details first. The theme in Thymer stays a separate copy with an id of its own, so you can install the published one next to it.

Custom CSS

A theme only changes the look for the member who picks it. To add CSS for everyone in the workspace, on top of whatever theme each member uses, put it in a plugin. Workspace admins can:

1. In Settings → Plugins, on the Global Plugins tab, open Add plugin and choose Create a plugin.
2. Under Configuration, give the plugin a name, such as “Workspace CSS”.
3. Under Custom Code, add the CSS with this.ui.injectCSS in onLoad, as in the example below.
4. Click Preview to try it, then Save.

This plugin changes the font for everyone:

class Plugin extends AppPlugin {
  onLoad() {
    this.ui.injectCSS(`
      html:root[data-theme] {
        --font-sans: "Comic Sans MS", sans-serif;
      }
    `);
  }
}

Themes set their variables on html[data-theme="…"]. A selector that weighs more, such as html:root[data-theme], wins in every theme. To change only dark or only light themes, use html.is-dark:root or html.is-light:root. As with a theme, prefer variables over selectors on Thymer’s own elements.

The CSS applies for every member, on every device, until you turn the plugin off or delete it. The plugin’s Custom CSS tab works the same way, without code. If a change makes Thymer hard to use, Safe Mode starts it without plugins. For more about plugins, see Plugins.

Omarchy Linux

In the desktop app on Omarchy Linux, the theme list has one more built-in theme: Omarchy Auto. With it selected, Thymer follows when you switch themes in Omarchy, light or dark included, within a few seconds and without a restart. It is the default on Omarchy until you pick another theme; pick Omarchy Auto in Settings → Theme or Set Theme to bring it back. Thymer also leaves out its own title bar there, like the other apps on the desktop.