Themes and colours
The four shipped themes, and the panel where you change colours, syntax highlighting, fonts and translucency.
A theme is a complete palette plus the editor font and syntax colours that go with it. Everything else in the Theme Editor layers on top of one.
The four shipped themes#
| Theme | |
|---|---|
| Semantix Native | The default. Dark, near-black, restrained. |
| Daylight | The light one. |
| Gruvbox Dark | Warm, low-contrast dark. |
| Solarized Light | The classic muted light palette. |
Your own saved themes appear after these.
Two panels live behind the buttons at the top of the Sections map, not on the toolbar — which is why they are easy to miss:
- Theme opens the gallery of themes, each drawn as a small mock IDE painted in its own colours.
- Global opens the variables panel described below.
Clicking an active button again closes its panel.
Important
Switching a theme discards your unsaved colour edits. Picking a different theme paints exactly that theme — hand-picked colours and anything an agent painted are dropped, along with any section CSS and part edits that weren't baked into a saved theme. Gradients painted onto a surface with the brush are the one thing that survives, and they follow you into the new theme. Re-picking the theme you are already on is safe and changes nothing.
The Light checkbox in the theme gallery filters and switches. The gallery only ever shows themes of the current mode, so ticking it both reveals the light ones and moves you onto the first of them — with the same loss of unsaved edits. It cannot be used to browse without committing.
One consequence to expect: your own saved themes are only listed when the box matches their mode. A light theme you made is invisible while the gallery is showing dark ones.
Picking a theme also changes your code editor font and syntax highlighting, if that theme declares them. Semantix Native brings its own monospace stack; Daylight brings a light syntax theme. Themes that declare neither leave your choices alone.
The Global panel#
Hand-picked knobs rather than the raw token list, in this order: Colors, Syntax highlighting, the Window translucency slider, then Fonts. There is no search and no filter.
Colors#
Eight rows, each with a swatch. A small reset link appears beside any row you've changed, and drops just that one back to the theme's value.
| Row | What it paints |
|---|---|
| Selected / Active | Selected rows, active tabs, focus rings, links |
| Text | Body copy |
| Secondary text | Labels and muted copy |
| Code editor background | The editor when viewing a file |
| Studio background | The IDE floor, the panel glass tint — and the backdrop the 3D graph shows through |
| Elevated | Menus, modals, popovers |
| Border | Dividers and outlines |
| Scrollbar | The scrollbar thumb |
Two of these do more than they look like they do.
Selected / Active is one knob with six derived steps. Lighter and darker variants are computed from whatever you pick, so a single choice moves hovers, focus rings and accent gradients across the whole app at once.
Studio background is not the code editor background. The first is the IDE's floor — panels, sidebars, the surface behind the 3D graph. The second is only the file-viewing buffer. They are separate rows because they are separate surfaces.
The Code editor background row is also the only colour row that accepts a gradient instead of a flat colour, via the toggle inside its picker.
Syntax highlighting#
Nine rows — Keyword, String, Comment, Function, Number / Variable, Class / Built-in, Tag / Name, Literal, Default text — each with a hint naming what it covers.
Note
These colour the highlighted code blocks in chat, diffs and hover cards. The file editor uses its own syntax theme, which arrives with the theme you pick rather than from these rows.
Window translucency#
A slider from 30 % to 100 %, letting your desktop show through the IDE. Desktop app only — there is nothing behind a browser tab to see.
Unlike everything else on this page, translucency is stored per project, so it has to be set again in each one.
Fonts#
Two dropdowns: UI font (eleven families, from Inter to Georgia) and Code font (seven, including JetBrains Mono, Fira Code and Cascadia Code). If your current font isn't on the list it is added to it, so nothing gets silently replaced.
What the colour picker accepts#
Semantix draws its own picker rather than opening the operating system's: a saturation square, a hue rail, and a hex field. The typed field takes hex only. Below it are two conveniences derived from your current colour rather than a fixed palette — a Shades row of five related tones, and a Gradients block offering monochromatic, analogous and complementary pairings, each with buttons to copy the CSS or Tailwind form.
Theme colours are opaque. Transparency in a theme comes from gradients, which carry their own per-stop opacity — see Gradients.
What the theme does not reach#
The 3D graph keeps its own colours. Node accent and label colours are deliberately independent of the theme, so a palette change can't make the graph unreadable. Node appearance is edited in the 3D Editor instead.
The one connection is the backdrop: the graph paints no background of its own, so Studio background is what you see behind the nodes.