Each window can have its own palette. Style containers, labels, fields and buttons with colors, typography, rounded corners, borders, spacing and interaction states. These changes stay inside that window. Native keyboard navigation, focus and display scaling continue to work.
Open examples/styled-workbench/main.lua in Creator and choose Preview. To install the complete example, package its folder using the CLI described in the SDK guide; the manifest is next to the source. It needs no permissions and does not edit the project. Switch palettes, edit the preset name, and drag the drawing or use arrow keys. Palette changes preserve your input.
vlt.ui.window{
id="tool", title="My tool", width=520, height=340,
theme={background="#151d26", surface="#223140", field="#101820",
text="#f0f6fc", muted="#a7b9c9", accent="#78e3bc",
onAccent="#102820", border="#3b5063"},
style={padding=24, fontSize=14},
styles={
card={background="$surface", radius=12, padding=18},
title={fontSize=24, fontWeight=700},
action={background="$accent", color="$onAccent", radius=8,
borderWidth=0, padding=10,
pressed={background="$surface",color="$text"}}
},
children={
{type="label", text="My new tool", style="title"},
{type="column", style="card", spacing=12, children={
{type="field", id="name", value="My preset"},
{type="button", text="Apply", style="action", onClick=function()
vlt.ui.set{id="result", text=vlt.ui.get{id="name"}.value}
end}
}},
{type="label", id="result", text="Ready", style={color="$muted"}}
}
}
The window's optional theme colors are background, surface, field, text, muted, accent, onAccent and border. Omitted colors follow VLTONE. Theme colors must be opaque. Styles accept Qt colors: #RRGGBB, #AARRGGBB, color names and transparent. Reference the window palette with $background, $surface, $field, $text, $muted, $accent, $onAccent or $border.
styles defines up to 64 named styles. A widget accepts style="card", style={radius=10}, or style={use="card",padding=24}. Local properties replace the named style's matching properties; each nested state is replaced as a whole. Named definitions cannot reference one another.
When accent changes without an explicit onAccent, its text color is chosen for contrast.
| Style property | Value |
|---|---|
| background, color, accent, borderColor | Background, text, control accent and border color. Literal color or palette token. |
| borderWidth | Integer 0…12; zero removes the border. |
| radius | Integer 0…96; corner radius. |
| padding | Integer 0…96; inner spacing. Containers use this as their layout inset. |
| fontSize, fontWeight, fontFamily | Size 10…96; weight 100…900 in steps of 100; installed font name. The OS substitutes unavailable fonts. |
| hover, pressed, checked, disabled, focus | Objects containing background, color and borderColor. Keyboard focus also retains the native accessibility outline. |
All sizes use logical pixels and scale with the display. Text color and fonts inherit into children. Backgrounds, borders and padding affect the styled widget itself. Native knobs retain their geometry; use canvas with pointer/key handlers for a fully custom dial. Use image for packaged pictures.
vlt.ui.set{id="name", style={color="$accent",fontWeight=600}}
vlt.ui.set{id="name", style={}} -- Reset local overrides
vlt.ui.set{id="tool", theme={accent="#d795ff"}} -- Other colors follow VLTONE
vlt.ui.set{id="tool", theme={}} -- Follow the complete application theme
ui.set replaces the entire style/theme object rather than merging with previous overrides. Invalid arguments leave existing controls unchanged. ui.get{id}.style returns resolved local properties, excluding inherited values. ui.replace keeps the theme, definitions and root style unless replacements are supplied, but replaces all child controls. Prefer ui.set for value or appearance changes so input and focus survive.
Use column/row for flow, grid for equal cells, scroll for long content and tabs for separate tasks. stretch distributes space in a row, column or window root. spacing separates children; margin sets a container's inset. Labels support wrap and align: left/center/right. ui.set width/height set fixed widget dimensions, just like tree definitions; the window itself remains resizable.
Choose one primary accent, keep text readable and label ambiguous controls. Test Tab navigation, long translated captions and 100/150/200% scaling. Do not communicate errors through color alone. Prefer palette tokens when adapting to VLTONE's light and dark themes.
Raw CSS/QSS, selectors and URLs are rejected. Styling cannot modify DAW chrome or open files. This API styles VLTONE extension windows, not other applications.