Themes

A look is a theme (its colours) and a surface (how they're drawn), and either can be see-through. Theme… in the menu (or the palette) shows them: rest the pointer on a theme to try it, click to keep it. Your pick is kept in this browser, for every project, and wins over the code's.

The themes, after well-loved editor themes, with no two near-twins: devui (the default), Midnight, One Dark, Tokyo Night, Nord, Everforest, Gruvbox, Ayu Dark, Dracula and Catppuccin Mocha, and light ones: GitHub Light, Solarized Light, Catppuccin Latte and Rosé Pine Dawn.

The surface works with any theme:

• Flat (the default): tones apart, each row a step from the panel.
• Soft: depth. Each open folder's rows sit on a card raised off the panel on a soft shadow, the controls on it quiet; plots, textures and the search are set in. A choice of several is a channel with its pick raised in it.
• Inset: Soft's inverse. Each open folder's rows sit in a tray set into the panel, the controls standing up in it, lit from above.

Deeper folders keep their guide line inside their top folder's card or tray.

From code:

createGUI({ theme: 'nord', surface: 'soft' });
gui.setTheme('github-light');
gui.setTheme({ name: 'studio', background: '#14161b', foreground: '#e6e6e6', accent: 'oklch(0.75 0.14 160)' });
gui.setSurface('inset');
gui.setTheme('nord', { remember: true });   // kept as this browser's pick, as the panel's picker does
gui.resetTheme();                           // forget the browser's pick (theme, surface, see-through): back to the code's

A theme given as an object is listed in the panel's picker too (gui.customThemes); light: true marks a light one, and label names it there.

A theme is a background, text, an accent and, optionally, syntax colours (red, orange, yellow, green, cyan, blue, purple, pink), in any CSS colour format. The rest are derived in OKLCH the way the default theme's colours relate to each other, on each surface, with a check that text stays readable. Red is used for errors, orange for changed values, red, green and blue for the x, y and z axes, and the syntax colours for plot series. tokens: { row: '#222' } sets any single colour exactly.

Labels truncate in a label column 38% wide; the full label is in its tooltip and, on touch screens, at the top of the row's menu (long-press). createGUI({ labelWidth: '45%' }) widens the column (a CSS length or percentage, or px as a number), whatever the theme.

Translucent

Opacity and Blur, under the surfaces in the picker, work with any theme and any surface: below 100% opacity the panel, its windows, menus and popovers let your app show through, blurred, in the theme's own colours, all the way down to none. Text reads over anything behind it, at every opacity: the page is darkened behind a dark theme and lightened behind a light one, only as far as the theme's text needs, and each step down shows more of your app. Blur is how far the page behind is blurred (32 px by default, up to 64). What's data stays opaque: textures, plots, colours, the capture's pictures and timeline. It's kept with your theme pick, and opaque where the system asks for reduced transparency, unless you picked it in the panel. From code:

createGUI({ theme: 'nord', translucent: true });                    // the default glass: 58%, 32 px
createGUI({ surface: 'soft', translucent: { opacity: 0.4, blur: 48 } });
gui.setGlass({ opacity: 0.5 }, { remember: true });   // kept as this browser's pick
gui.setTranslucent(false);                             // opaque: setGlass({ opacity: 1 })
gui.glass;                                             // { opacity, blur }

The browser redraws the blur each frame what's behind it changes, which adds a little GPU time to every frame your app animates (not to your app's own GL work): set opacity to 100% when you profile.