Colours, code, type and glass
The four pages of knobs — the nine named colours, the file editor's look, the fonts and sizes, and how much shows through.
Four pages on the Theme tab hold the knobs. Each row has a reset arrow that appears once you've moved it, and drops that one row back to the theme's value.
Colours#
Nine rows, each with a swatch, under Tokens:
| Row | What it paints |
|---|---|
| Secondary color | Selected rows, active tabs, focus rings, links and highlights |
| Error | Failed runs and error marks |
| 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.
Secondary color is one knob with a whole tonal ramp. 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 — and, by default, the colours of code outside the editor.
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 the only colour row that accepts a gradient instead of a flat colour, via the toggle inside its picker.
Under the tokens, File icons: Brand colours gives each file type its own colour in the explorer, tabs and chat; Secondary color paints every icon in the theme's secondary. The 3D graph keeps its own colours either way.
Code#
The file editor's own look, under Editor:
- Syntax theme — seventeen to choose from, dark and light, with a live preview under the row.
Studio Secondary, the default, colours code in shades of your Secondary colour, so it follows the theme. - Typeface — the editor buffer's font. Seven monospace choices; the first four ship with Semantix and render the same on any machine, the rest use what your system has.
- Font size — 10 to 24, 13 by default.
- Minimap — the file thumbnail in the right gutter. Off by default: it repaints on every scroll, which costs smoothness on long files.
A theme can declare a syntax theme and a typeface; picking that theme applies them. A theme that declares neither leaves your choices alone.
Under Code outside the editor, nine rows — Keyword, String, Comment, Function, Number / Variable, Class / Built-in, Tag / Name, Literal, Default text — colour the highlighted code in chat, diffs and hover cards. By default they're live shades of the Secondary colour; set one by hand and it saves with the theme.
Typography#
Under Fonts and sizes:
- Interface font — every chrome surface: menus, panels, labels. Eleven families, from System UI to Georgia (serif).
- Mono font — the terminal and every monospaced chrome surface. The editor buffer has its own typeface, on the Code page. Seven families.
- Interface font size and Chat font size — 10 to 24 each, 15 by default.
Ctrl+=andCtrl+-move the interface size (and the editor's) a step at a time too. The chat size zooms the whole conversation, avatars and code blocks included.
Fonts save with the theme. Sizes are yours — they're remembered per project, not baked into a theme, so a theme you export doesn't carry them.
Glass#
Under Translucency, three sliders, one per layer:
- Window translucency — the whole IDE over your desktop, from 30% up. Desktop app only.
- Panel opacity — the explorer, the chat panel and the tab strip over the graph. 0 is bare glass, 100 a solid floor.
- Surface opacity — the Settings, Task Manager and Project Manager windows over the graph.
Under Depth, the shade where the header and the side panels meet the main view: a Shadow switch (off makes the IDE flat), Depth in pixels, Strength, a Colour (near-black by default; a tint suits a coloured theme), and the main view's Corner radius.
Note
Everything on the Glass page is stored per project, not with the theme. Set translucency in one project and the next one still opens opaque.
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. Theme colours are opaque; transparency comes from the Glass page, or from a gradient's own per-stop opacity where a gradient is allowed.
What the theme does not reach#
The 3D graph keeps its own colours. Orb and bolt colours are deliberately independent of the theme, so a palette change can't make the graph unreadable. The one connection is the backdrop: the graph paints no background of its own, so Studio background and the Wallpaper are what you see behind the orbs.