The Styles tab edits global design tokens — brand colors, backgrounds, typography, and radius. Changes preview immediately; publish Style & layout from Settings to update the live site.
Styles vs block styles
Scope
Where
Site theme
Styles tab — affects whole site
Single block
Visual editor — copy/paste style on a selected component
This section covers site theme. Per-block styling is in Block styles.
Opening Styles
Click Styles on the editor rail. Controls group by token type — primary brand colors, neutrals, link colors, radius scales, and related presets.
Style presets
The site wizard and Styles tab may offer presets — curated starting palettes. Applying a preset overwrites draft tokens; review preview before publishing.You can still tweak individual tokens after applying a preset.
Removing overrides
When you clear a customized token back to the default, the change persists. The Styles panel saves the full draft rather than shallow-merging over stored keys, so removed overrides do not reappear on reload. Tokens that match Aveiro defaults are pruned from storage — the tab only lists values you have actually overridden.
Preview
The editor preview iframe reads draft style tokens as you edit. Public visitors see tokens from the last Style & layout publish.
Relationship to layout
Layout chrome (header background, sidebar borders) consumes the same token system. Large brand changes in Styles often pair with a quick check in Layout preview.
AI style updates
Quasar can call update site style tools. Review the Styles tab after AI runs to confirm tokens match brand guidelines.
