theme
import theme from "theme";
theme.set(theme.dark()); // every widget paints with the dark palette from the next frame
theme.reset(); // back to the default, theme.light()theme holds the palette the widgets and ui paint
with: colors for buttons, fields, tracks, text and the window behind them,
and the text size. A widget uses the active theme for every color prop you
leave at its zero value (#00000000) and for a size of 0, each time it
paints. So switching the theme changes every such widget on the next frame;
a color you set yourself, at the instantiation or with a
#style rule, stays.
Themes
| Function | Does |
|---|---|
light() -> Theme | The default palette: light widgets on a dark window |
dark() -> Theme | Dark widgets on a darker window |
current() -> Theme | The active theme: light() until set |
set(t: Theme) | Make t the active theme; windows and headless screens paint their next frame with it |
reset() | Back to light() |
version() -> i64 | How many times set/reset changed the theme (ui repaints everything when it changes) |
Theme is a plain struct, so a theme of your own is a copy with some
fields changed:
var mine: theme.Theme = theme.light();
mine.accent = #CC3366;
mine.button = #FFF4F8;
theme.set(mine);| Field | Used for |
|---|---|
window | Behind the tree, in a window and in ui.headless |
text, text_size | Label, TextInput and Checkbox text, the caret; the text size |
placeholder, muted, selection | A TextInput’s placeholder, secondary text, selected text |
accent, accent_border, on_accent, check | A checked Checkbox, a pressed Button’s ring, text on a colored Button, the check mark |
focus | A focused TextInput’s border; ProgressBar and Slider fill |
button, button_hover, button_pressed | A Button’s fill per state |
button_border, button_hover_border, button_disabled_border, button_text | Its border and text |
field, field_border, field_hover_border | TextInput and Checkbox boxes, a Slider’s thumb |
track, thumb, thumb_active | ProgressBar, Slider and ScrollArea tracks; ScrollArea thumbs |
scroll_track, scroll_thumb, image_bg | Scrollable’s bars; behind an Image |
The palette in #style
The light palette is also a set of constants in theme’s #style
region, for your own style rules:
#style
import theme from "theme#style";
Toolbar {
widgets.Button { bg: theme.accent; }
}These are compile-time values: a rule with theme.accent keeps the light
accent after theme.set(theme.dark()). Leave a prop unset to have it
follow the active theme.
See the example stdlib/examples/theme.tape.
Last modified: