Skip to content

Components

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

FieldScript nameKindDefaultWhat it does
Panelpanelcolour#000000, 50% opaquePanel fill for Normal.
Panel Accentpanel_accentcolour#26334d, 75% opaquePanel fill for Accent.
Panel Dangerpanel_dangercolour#4d1a1a, 75% opaquePanel fill for Danger.
Texttextcolour#ffffffText colour for Normal.
Text Accenttext_accentcolour#e6f2ffText colour for Accent.
Text Dangertext_dangercolour#ffbfb3Text colour for Danger.
Buttonbuttoncolour#333842Button tint when idle.
Button Textbutton_textcolour#ffffffColour of the words on a plain button; an accent or danger button takes its role's text colour.
Hover Lifthover_liftnumber, 0 to 1, step 0.010.2How much lighter a hovered button is, as a fraction towards white.
Press Sinkpress_sinknumber, 0 to 1, step 0.010.2How 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.