Styles

Styles let templates share named design tokens. Put them in a .qtml token module, usually ui/styles/theme.qtml, then import it normally. Token values are emitted as CSS custom properties and can be used through the imported namespace.

Define a theme

// ui/styles/theme.qtml
token background: #ffffff
token foreground: #0f172a
token primary: #2563eb

dark {
    token background: #0f172a
    token foreground: #f8fafc
}

The dark block overrides tokens when a dark ancestor is active. Include the token module in the Rust layout or application entry point with render_qtml_styles! so its CSS variables are emitted.

use qtml_macro::render_qtml_styles;

const QTML_STYLES: &str = render_qtml_styles!("ui/styles/theme.qtml");

Import and use it

import "styles/theme.qtml" as theme

Page {
    background: theme.background
    color: theme.foreground

    Button {
        text: "Continue"
        background: theme.primary
    }
}

Imports are file-local. Import the token module in every template that references it, and use theme.name wherever the property accepts a token reference.