▌Logier

Theme Builder

Design a Logier theme in your browser with a live preview of the app, then send it straight to the desktop app with one click — no JSON, no files to move around.

The theme builder lets you design a Logier colour theme in your browser. You pick ten colours, watch a mock of Logier's window repaint as you go, and send the finished theme to the app when you are happy with it.

It is the easiest way to make a theme. If you would rather write the file by hand — or want to understand what the builder is producing — see Custom Themes.

You can also reach it from the Design your own theme button on the app's Welcome tab, underneath the diagram of the interface.

Start from something#

A blank palette is a hard place to begin, so the builder opens on Logier's Dark theme. Use Start from to load any of the built-in themes — Light, Solarized, Monokai, Nord, Sepia and the rest — and adjust from there. Picking a preset again resets everything back to it, so you can always start over.

Give the theme a name — this is what you will see in Logier's theme list — and set the category, which only decides whether it is grouped under Dark, Light or High Contrast.

Picking colours#

A Logier theme is made of ten colours. Every one of them paints something visible in the preview, so you can always see what you are changing:

  • —Background — the main canvas, where your log lines sit
  • —Text and Muted text — log messages, and the quieter labels and timestamps
  • —Accent — the active tab, selected nav item, buttons and links
  • —Sidebar, Sidebar hover, Raised surface and Secondary surface — the layers of panels, cards and dialogs
  • —Borders and Deep border — the dividers between regions

Use the colour swatch to open your system's colour picker, or type a hex value like #50a2ff directly. You can also click a region of the preview to jump straight to the colour that paints it.

Keep an eye on readability#

A palette that looks striking as a row of swatches can be miserable to read at log-line size. The Readability panel scores the combinations that matter — text on the background, muted text, text on the sidebar, and the accent — against the WCAG contrast standard.

Aim for AA or AAA on "Text on background". Anything scored lower is fine for a splash of colour, but tiring once you have been reading log output for an hour.

Sending it to Logier#

Press Use in Logier. Your browser hands the theme to the desktop app, which comes to the front and asks whether you want to import it, showing the name and the palette so you can see exactly what you are accepting.

Choose Import & use and the theme is saved to your themes folder and applied straight away. It then behaves like any other custom theme — you will find it under Settings → General → Appearance.

Logier always asks before importing. Because any web page can ask an app to open, that confirmation is a security boundary, not just a politeness — if a theme prompt ever appears when you did not press the button, decline it.

You need Logier 1.9 or newer installed. If nothing happens when you press the button, the app is either not installed or too old to recognise the link.

Downloading it instead#

Two other ways to get the theme out of the builder:

  • —Download .json — saves the theme file, which you can drop into Logier's themes folder or import with Import Theme in the Theme Manager
  • —Copy JSON — puts the same content on your clipboard, handy for pasting into a chat or a repository

Both produce exactly the file the app writes, so a theme you share this way behaves the same for whoever receives it.

Using your theme on several machines#

Settings Sync shares which theme you have selected, but not the theme file. Open the builder on each machine and press Use in Logier there too, and the theme will be available everywhere. See Settings Sync for the details.

←Back to App Experience