Themes
How to add custom color themes to the UI.
The UI ships with several built-in color presets and supports adding your own. Themes are defined as CSS custom properties in their own file and imported into the main stylesheet.
The built-in presets are default, ocean, midnight, neon, and void.
1. Create the Theme File
Create a new CSS file in src-web/themes/, for example src-web/themes/mytheme.css:
:root[data-preset="mytheme"] {
--color-root-bg: rgba(10, 10, 20, 1);
--color-root-text: rgba(220, 220, 255, 1);
--color-topbar-bg: rgba(20, 20, 40, 1);
--color-topbar-bg-hover: rgba(30, 30, 60, 1);
--color-topbar-text: rgba(220, 220, 255, 1);
--color-section-header-bg: rgba(20, 20, 40, 1);
--color-section-header-bg-hover: rgba(30, 30, 60, 1);
--color-section-header-text: rgba(220, 220, 255, 1);
--color-modal-panel-bg: rgba(10, 10, 20, 1);
--color-modal-header-bg: rgba(20, 20, 40, 1);
--color-modal-header-text: rgba(220, 220, 255, 1);
--color-modal-body-bg: rgba(10, 10, 20, 1);
--color-modal-body-text: rgba(220, 220, 255, 1);
--color-modal-button-bg: rgba(30, 30, 60, 1);
--color-modal-button-hover: rgba(50, 50, 80, 1);
--color-select-trigger-bg: rgba(30, 30, 60, 1);
--color-select-trigger-bg-hover: rgba(50, 50, 80, 1);
--color-select-trigger-text: rgba(220, 220, 255, 1);
--color-select-placeholder-text: rgba(220, 220, 255, 1);
--color-select-tag-bg: rgba(30, 30, 60, 1);
--color-select-tag-text: rgba(220, 220, 255, 1);
--color-dropdown-panel-bg: rgba(10, 10, 20, 1);
--color-dropdown-panel-text: rgba(220, 220, 255, 1);
--color-dropdown-item-text: rgba(220, 220, 255, 1);
--color-dropdown-item-hover: rgba(50, 50, 80, 1);
--color-keybind-capture-bg: rgba(30, 30, 60, 1);
--color-switch-track-bg: rgba(30, 30, 60, 1);
--color-tooltip-bg: rgba(20, 20, 40, 1);
--color-tooltip-text: rgba(220, 220, 255, 1);
--color-border: rgba(220, 220, 255, 0.1);
--color-border-content: rgba(220, 220, 255, 0.12);
--color-dropdown-item-border: rgba(220, 220, 255, 0.05);
--color-primary: #a78bfa;
--color-slider-track-fill: #a78bfa;
--color-slider-thumb-border: rgba(196, 181, 253, 1);
}2. Import the Theme
Open src-web/style.css and add your new file to the imports:
@import "./themes/default-light.css";
@import "./themes/default-dark.css";
@import "./themes/ocean.css";
@import "./themes/midnight.css";
@import "./themes/neon.css";
@import "./themes/void.css";
@import "./themes/mytheme.css"; /* add this */3. Register the Preset
Open src-web/lib/colours.ts and add your preset ID to the ColourPresetId type and PRESET_IDS array:
export type ColourPresetId =
| "default"
| "ocean"
| "midnight"
| "neon"
| "void"
| "mytheme";
const PRESET_IDS: ColourPresetId[] = [
"default",
"ocean",
"midnight",
"neon",
"void",
"mytheme",
];