home/ atoms/ estuary-css-theming

Estuary's visual theme is controlled by a CSS file defining four core colour variables

Estuary’s entire UI appearance is governed by a CSS theme file. The four top-level CSS custom properties — --background-color, --primary-color, --secondary-color, --transient-color — control background, text/borders, button backgrounds, and ephemeral highlights respectively. Performers can create custom themes by adding a CSS file to static/css-custom/ (for local builds) or by loading a URL via the !theme "url" terminal command at runtime. The class names .background, .code-font, .ui-font, .ui-buttons, .primary-borders, .other-borders provide hooks for more detailed customisation.

Examples

--background-color: black;
--primary-color: rgb(98, 221, 115);
--secondary-color: hsl(0,0%,20%);
--transient-color: orange;

Load at runtime: !theme "https://example.com/my-theme.css"

Assessment

Create a high-contrast dark theme for Estuary: name the four CSS variables you would set and choose appropriate values for an OLED screen with green-on-black branding.

“For quick Estuary's interface customization, modify the parameters of the variables 'background-color', 'primary-color', 'secondary-color', and 'transient-color'”
corpus · estuary-collaborative-browser-live-coding-platform-networked · chunk 4