Styling Gotchas

Styling results that surprise people. Each specimen shows the trap, why it happens, and the fix.

checkbox and radio span three surfaces

The unchecked well reads themeInput, the outline and label read themeButton, and the checked state reads themeAccent.

select and comboBox use different surfaces

They look alike when closed, but select reads themeButton and comboBox reads themeInput.

scrollWith changes surface with its sizing

A bounded scroller draws a well. A grow scroller drops it and fills the page background.

callout tints nested panels

The tinted panelStyle a callout sets reaches every panel inside it.

toggleButton ignores buttonStyle when on

While on, it fills with its tone colour (themeAccent for Accent) regardless of buttonStyle.

borderWidth does not add layout space

Borders are drawn inset and never grow a widget’s bounds.

Modifier order in (.) and styled

The leftmost layout modifier wins; nested styled scopes apply outside in, so the inner one wins.

tabs read themePanel, not themeButton

Tab headers are buttons, but their colours come from themePanel and themeAccent.