# Styles (/syntax/styles)



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

Overview [#overview]

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

Style Sheets [#style-sheets]

Simple Usage [#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 title="xml" lineNumbers=1
<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 title="xml" lineNumbers=1
<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`.

<Callout>
  It's recommended to prefix style names with `style_` to avoid name collisions.
</Callout>

Style Binding [#style-binding]

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](./data-binding) 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 title="xml" lineNumbers=1
<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 [#local-styles]

Simple Usage [#simple-usage-1]

Local styles can be used directly on individual elements:

```xml title="xml" lineNumbers=1
<lv_label style_bg_opa="200" style_bg_color="0x123456"/>
```

Selectors are also supported for local style properties:

```xml title="xml" lineNumbers=1
<lv_slider style_bg_opa-indicator-pressed="200"/>
```

Local Style Binding [#local-style-binding]

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

```xml title="xml" lineNumbers=1
<component>
 <view extends="lv_slider">
  <bind_style_prop prop="bg_opa" selector="knob|pressed" subject="slider_knob_opa" />
 </view>
</component>
```

Relation to Constants [#relation-to-constants]

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

```xml title="xml" lineNumbers=1
<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 [#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 title="xml" lineNumbers=1
<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>`](./api) properties to local style properties:

```xml title="xml" lineNumbers=1
<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]

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

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 title="xml" lineNumbers=1
<style bg_grad="grad1"/>
```

Or apply it directly to elements:

```xml title="xml" lineNumbers=1
<lv_button style_bg_grad="grad1"/>
```

<Callout type="info">
  Gradients are not yet supported in LVGL's UI Editor, but can be used when exporting and running your code.
</Callout>

Horizontal or Vertical Gradient [#horizontal-or-vertical-gradient]

To define a simple horizontal or vertical gradient:

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

Linear Gradient [#linear-gradient]

To define a skewed gradient between two points:

```xml title="xml" lineNumbers=1
<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 [#radial-gradient]

To define a radial gradient:

```xml title="xml" lineNumbers=1
<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 [#conical-gradient]

To define a conical gradient:

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