Theme
One palette for a screen: fill and text colours for the normal, accent and danger roles, a plain button's words, and how far a button lightens on hover and darkens when pressed. Apply theme writes these into every widget below it.
On this page
Add it
+ Add node → Canvas creates a node with it already on. Already have a node for it? Add component → ThemeComponent.
From a script
A script on the same node writes these fields by name. ThemeComponent is the name to pass.
rgs
set_colour("ThemeComponent", "panel", vec4(0.0, 0.0, 0.0, 0.5));
set_colour("ThemeComponent", "panel_accent", vec4(0.15, 0.2, 0.3, 0.75));
set_colour("ThemeComponent", "panel_danger", vec4(0.3, 0.1, 0.1, 0.75));
set_colour("ThemeComponent", "text", vec4(1.0, 1.0, 1.0, 1.0));
set_colour("ThemeComponent", "text_accent", vec4(0.9, 0.95, 1.0, 1.0));
set_colour("ThemeComponent", "text_danger", vec4(1.0, 0.75, 0.7, 1.0));
set_colour("ThemeComponent", "button", vec4(0.2, 0.22, 0.26, 1.0));
set_colour("ThemeComponent", "button_text", vec4(1.0, 1.0, 1.0, 1.0));
set_number("ThemeComponent", "hover_lift", 0.2);
set_number("ThemeComponent", "press_sink", 0.2); Fields
| Field | Script name | Kind | Default | What it does |
|---|---|---|---|---|
| Panel | panel | colour | #000000, 50% opaque | Panel fill for Normal. |
| Panel Accent | panel_accent | colour | #26334d, 75% opaque | Panel fill for Accent. |
| Panel Danger | panel_danger | colour | #4d1a1a, 75% opaque | Panel fill for Danger. |
| Text | text | colour | #ffffff | Text colour for Normal. |
| Text Accent | text_accent | colour | #e6f2ff | Text colour for Accent. |
| Text Danger | text_danger | colour | #ffbfb3 | Text colour for Danger. |
| Button | button | colour | #333842 | Button tint when idle. |
| Button Text | button_text | colour | #ffffff | Colour of the words on a plain button; an accent or danger button takes its role's text colour. |
| Hover Lift | hover_lift | number, 0 to 1, step 0.01 | 0.2 | How much lighter a hovered button is, as a fraction towards white. |
| Press Sink | press_sink | number, 0 to 1, step 0.01 | 0.2 | How much darker a pressed button is, as a fraction towards black. |
Buttons
- Apply theme Writes this palette into every widget below it, except those whose Theme Role is Custom.