Wallpaper and custom code
A gradient or image behind the whole IDE, and — for the adventurous — a stylesheet or a whole live HTML document per region.
Two pages on the Theme tab go beyond knobs. Both save with the theme, both are drafts until you save, and both apply live.
Wallpaper#
Painted behind the whole IDE — through the glass chrome and behind the 3D graph. One row:
- A swatch showing what's there now, and a picker that sets a gradient by hand.
- Image uploads a picture instead (Replace once one is set).
- Remove leaves the floor bare — even over a wallpaper baked into the theme itself.
- The row's reset arrow returns the theme's own wallpaper.
The wallpaper shows through wherever the Glass page lets it: turn the panel and surface opacity down and it fills the window.
Note
An image rides inside the theme when you export it, as embedded data. A photographic wallpaper can make a theme file several megabytes; pictures are downscaled on the way in to keep that in check.
Section CSS#
For anyone who'd rather write the look than click it: a real stylesheet, or a whole HTML document,
for any one of the IDE's five regions — Header, Tabs, Left panel, Main content,
Right panel. Pick the region with the chips, CSS or HTML with the toggle, and type. A dot on
a chip means that region has code; the counter reads 2 of 5.
CSS is the safe tier. The applier never rewrites what you write, so scope your rules to the
class it prints above the editor — .ide-section-main and so on — or they'll reach the whole app. It
cannot hang the window and cannot reach anything.
HTML is a full document — markup, <style> and <script> — mounted in a sandboxed frame that
fills the region's decor anchor. It has no origin and no network: it can't read the IDE, your
files, or any server, and it never receives clicks. Bundled libraries are handed to the frame
directly and the page says which — Served locally: … — while a library that isn't on the shelf
is named as Not on the shelf, and the document won't run until it's gone.
Important
A script that never yields freezes the IDE. The frame can't reach anything, but an endless
loop inside it stalls the window all the same. If that happens, the next run holds every HTML
slot back — Custom HTML is held back this run — and says how long the window stopped and which
region was running. Your markup is kept; it just isn't mounted. Fix it, then press Re-enable.
Keep loops bounded and animate on requestAnimationFrame.
The Run custom HTML switch at the foot of the page is the kill switch: off leaves every HTML slot saved but unmounted.
Two things the page catches for you: HTML pasted into the CSS slot (That looks like HTML…), and CSS pasted into the HTML slot. And one it can only warn about: the Main content anchor exists only while the 3D view is on screen, so a document there shows Not mounted right now while you're looking at the Theme tab. Close the tab to see it run.
Animations in both tiers pause when the window loses focus.