Global styles hold the style values shared by the whole project, so a color, size, or typography change is defined once instead of being repeated on every widget. This guide explains the concept, how to configure global styles, and what to watch out for.

Overview

A project usually repeats itself: the same background color on many panels, the same text color on many labels. Without global styles, each value is typed into the inspector widget by widget, and a theme change means editing every widget one at a time.

Global styles provide the shared baseline under the per-widget properties:

LayerScopeEdited in
Global styleValues shared by the whole project.The global style editor (see Usage).
Widget propertyThe override for one selected widget.Inspector

Typical scenarios:

  • Keeping one consistent visual theme across all screens.
  • Changing a shared value once, instead of per widget.
  • Reducing repetitive property setup when many screens reuse the same look.

Usage

  1. Open the global style editor.
  2. Set the shared style values. The editable properties follow the active LVGL runtime version, the same way the inspector resolves its property definitions; see Dynamic LVGL version.
  3. Select widgets on the canvas and confirm the shared values are applied.
  4. Verify the result in preview, then check the resolved values in the code view or the codegen output.

Attention points

  • anyui-LIVE currently does not support global components or higher-order components; global styles are project-level style values, not reusable components. See Introduction.
  • Do not confuse the global style editor with the Global align snap setting in Settings, which controls canvas alignment behavior.
  • A widget property overrides the shared baseline for that widget only; changing a global value does not rewrite properties that were already set explicitly on a widget.
  • Text styles depend on fonts: a color or size only shows up if the glyphs can be rendered, which requires a matching font library. See Font library.
  • Generated code reflects the resolved styles, and the generated/ output is produced automatically and must not be edited by hand; make style changes in the editor and rebuild. See Codegen.