Styles

Learn how to style UI elements using properties and styles in LVGL Pro Editor.

Apply visual styling to your UI components through style sheets, local styles, and dynamic bindings that enable conditional styling and theme switching.

Overview

In Components, Widgets, and Screens, both style sheets (lv_style_t) and local styles can be used.

Style Sheets

Simple Usage

In the <styles> section, styles and their properties can be defined. The styles later can be assigned to Components, Widgets, or Screens.

The <styles> can be defined in the UI elements' XML file, or in globals.xml.

It looks like this in the practice

xml

<component> <!-- Could be <widget> or <screen> too -->
<styles>
    <style name="style_red"
           help="Red border"
           border_width="2px"
           border_color="0xff0000"/>

    <style name="style_blue_bg"
           help="Blue background"
           bg_opa="50%"
           bg_color="0x00f"/>

    <style name="style_large_text"
           help="Big blue text"/>
</styles>
</component>

Styles can be referenced in the view like this:

xml

<view>
 <lv_slider value="20">
  <style name="style_red"/>
  <style name="style_blue_bg" selector="knob"/>
  <style name="style_blue_bg" selector="knob|focused"/>
 </lv_slider>
</view>

As shown in the example, parts and states can be set using selector.

It's recommended to prefix style names with style_ to avoid name collisions.

Instead of directly adding styles to UI elements, you can add them conditionally when a subject's value equals a reference value. This enables dynamic styling at runtime, allowing you to change appearance or layout based on conditions.

See Data-bindings for more information.

A typical use case is light/dark theme switching, which requires:

A subject such as subject_dark_theme_on
Default styles added normally with the style tag
Dark styles with the required color adjustments

Here is an example:

xml

<component>
 <styles>
  <style name="style_base" bg_color="0xeee" text_color="0x111" radius="20" />
  <style name="style_dark" bg_color="0x333" text_color="0xeee" />
 </styles>

 <view extends="lv_button">
  <style name="style_base" />
  <bind_style name="style_dark" subject="subject_dark_theme_on" ref_value="1"/>
  <lv_label text="Apply"/>
 </view>
</component>

Local Styles

Simple Usage

Local styles can be used directly on individual elements:

xml

<lv_label style_bg_opa="200" style_bg_color="0x123456"/>

Selectors are also supported for local style properties:

xml

<lv_slider style_bg_opa-indicator-pressed="200"/>

Local Style Binding

Instead of setting local style properties directly, you can bind them to subject values for dynamic behavior:

xml

<component>
 <view extends="lv_slider">
  <bind_style_prop prop="bg_opa" selector="knob|pressed" subject="slider_knob_opa" />
 </view>
</component>

Relation to Constants

In the values of style properties constants can be used as well.

xml

<component>
    <constants>
        <int name="thin" value="2" help="Thin border"/>
        <color name="dark" value="0x333" help="A dark color for the button's background"/>
    </constants>

    <styles>
        <!-- Global constants can be used as well, e.g. #muted below  --> 
        <style name="style_main" border_width="#thin" bg_color="#dark" bg_opa="#muted"/>
    </styles>
</component>

Relation to API Properties

Since styles are initialized only once, it's not possible to pass API properties to them when the instances ar created. So this is invalid:

xml

<component>
    <api> 
        <prop name="thickness" type="int"/>
    </api>

    <styles>
       <!-- ❌ CAN'T DO THIS -->
       <style name="style_main" border_width="$thickness"/>
    </styles>
    
</component>

However you can pass <api> properties to local style properties:

xml

<component>
    <api> 
        <prop name="thickness" type="int"/>
        <prop name="bg_color" type="color"/>
    </api>

    <view style_bg_color="$bg_color">
       <!-- ✅ Passing api properties to local styles work -->
       <lv_slider style_border_width-knob="$thickness"/>
    </view>
</component>

Gradients

Gradients are not yet supported in the UI Editor preview, but they can be used in exported and runtime code.

Before the styles tag, the gradients tag can be used to define various gradients that can later be referenced in your styles.

When a gradient is created, reference it by name in your styles:

xml

<style bg_grad="grad1"/>

Or apply it directly to elements:

xml

<lv_button style_bg_grad="grad1"/>

Gradients are not yet supported in LVGL's UI Editor, but can be used when exporting and running your code.

Horizontal or Vertical Gradient

To define a simple horizontal or vertical gradient:

xml

<gradients>
 <horizontal name="grad1">
  <stop color="#ff0000" offset="20%" opa="40%"/>
  <stop color="#00ff00" offset="128" opa="100%"/>
 </horizontal>
</gradients>

Linear Gradient

To define a skewed gradient between two points:

xml

<gradients>
 <linear name="grad1" start="50 50" end="100 80">
  <stop color="#ff0000" offset="20%" opa="100%"/>
  <stop color="#00ff00" offset="240" opa="100%"/>
 </linear>
</gradients>

Radial Gradient

To define a radial gradient:

xml

<gradients>
 <radial name="grad1" center="100 50%" edge="200 50" focal_center="50 80%" focal_edge="55 80%">
  <stop color="#ff0000" opa="100%"/>
  <stop color="#00ff00" opa="100%"/>
 </radial>
</gradients>

Conical Gradient

To define a conical gradient:

xml

<gradients>
 <conical name="grad1" center="80 50%" angle="45 270">
  <stop color="#ff0000" opa="100%"/>
  <stop color="#00ff00" opa="100%"/>
 </conical>
</gradients>

Styles

On this page