Sections and parts
The six regions of the IDE, the parts inside them, and the twelve properties you can set on each.
This is the main way to theme the app. You pick a region, pick a piece of it, and set properties — and because you are writing a rule rather than touching one element, every matching element follows.
The map#
The Sections panel opens with the editor. It is a small wireframe of the IDE laid out the way the IDE is: a header bar across the top, a row of left column / tabs over main / right column, and a footer across the bottom.
Click a region to drill into it. Click it again to come back out. A chevron at the top of the panel walks you back — Back to parts, then Back to map.
The panel can be dragged, resized and closed. Closing it is recoverable: the toolbar button tooltipped Sections designer brings it back, and it reopens automatically next time you enter edit mode.
Note
Selecting a region highlights it on the map, not in the app. Nothing lights up in the live IDE to show you what you've selected — the wireframe is the only indicator. If you want to point at the running interface instead, that's the element inspector.
The six sections#
| Section | What it covers |
|---|---|
| Header | The top menu bar — logo, the File/User/View menus, the centre cluster |
| Tabs | The editor tab strip, and nothing else |
| Left panel | The left sidebar — the file tree and its sibling tabs |
| Main content | The centre column — the graph and code area |
| Right panel | The chat sidebar |
| Footer | The status bar |
Main content has no parts. Drilling into it says "This section isn't mapped yet — we'll add its parts together." The reason is that the 3D view paints no background of its own, so there is nothing section-specific to target. It can still be reached through a theme's own section stylesheet and by the global colours.
Parts#
A part is a hand-picked target inside a section — not the raw DOM. The list is deliberately short: the things a person theming an IDE actually reaches for.
Header — Surface (the whole bar), Menu label, Logo.
Tabs — Container (the strip behind the tabs), Tab, Tab · active.
Left panel — Surface, Toolbar, Breadcrumbs, then the file rows: Row, Row · active, Icon, Chevron, Label, Error badge.
Right panel — Surface, Composer (the "Ask your coworker…" box), User message, Agent message.
Footer — Surface, Project label.
There is no "edit the whole section" form. The part named Surface — Container in the Tabs section — is that whole-region control.
Note
Breadcrumbs is listed but not yet wired. Opening it says so plainly rather than pretending; the part is reserved for when the sticky path bar gets its anchor.
What you can set#
Twelve properties per part, labelled with their CSS names:
color · background-color · background-image · opacity · border-width · border-color ·
border-radius · box-shadow · padding · font-size · font-weight · display
Five of them — opacity, border width, border radius, padding and font size — are a slider with a number box beside it, and the number box will go past the slider's range on purpose when you need it to. Three are colour pickers.
Four of them open richer controls:
- background-color accepts a flat colour or a gradient.
- background-image offers your uploaded images with cover/contain/auto sizing, a nine-point position grid, exact percentages, and tiling — none, tile, horizontal or vertical.
- box-shadow has five presets — None, Soft, Medium, Hard, Glow — plus x, y, blur, spread, alpha, colour, and an inset toggle.
- display is a Visible / Hidden switch. Choosing Visible clears the override rather than guessing a value, so the element goes back to however the app draws it.
Font weight is a dropdown: Light, Regular, Medium, Semibold, Bold.
These edits are permanent immediately#
Unlike theme colours, part edits need no save. They apply as you make them, they survive leaving edit mode, and they survive a restart.
That asymmetry is worth repeating because nothing in the interface signals it: a colour you nudge in the Global panel disappears when you leave without saving, and a gradient you paint on the header does not.
The one thing that does clear them is switching to a different theme — a switch replaces your part edits with whatever the incoming theme carries, which is usually nothing. Save first.
Two resets, at two sizes:
- Reset section — drops the part edits for the section you're in. It does not touch a gradient painted on that section with the brush, or free-hand CSS the theme carries. If you reset a section and the background is still there, that is why.
- Reset all — drops all part edits, all painted surfaces, all section CSS, and your global colour and font overrides.
Re-picking your theme restores anything that came with it.
Important
Reset all also removes the wallpaper, including one that arrived as part of a built-in theme. It leaves you on a bare flat surface rather than on the theme's intended look. Re-selecting the theme brings its wallpaper back.
Some parts reach further than their section#
Most parts are scoped to the region they live in. Three groups are not, and it's worth knowing which before you wonder why something else changed colour.
File rows — Row, Row · active, Icon, Chevron, Label, Error badge — match tree rows anywhere in the app. Styling the file tree also restyles other tree views, such as the run explorer in the testing lab.
Chat parts — Composer, User message, Agent message — follow the chat components wherever they are drawn, which includes the full-screen chat and the heads-up display, not only the right panel.
Project label matches any accent-coloured text in the status bar, not strictly the project name.
There is also a layering effect on Row · active: the visible selection highlight is painted by an inner element, so a background you set on the active row can sit behind it. Setting the colour on the row still works; it just may not be the pixel you see.