Themes

A Theme is a collection of styles with the knowledge of which subset of styles are applied to which types of Widgets. If there is an active theme LVGL applies it to every newly-created widget.

Edit on GitHub

Overview

A theme is a collection of styles plus the knowledge of which styles apply to which Widget types. An active theme is applied to every newly created Widget, giving the UI a default look that further styles can refine. Each display can use its own theme (e.g. a colorful TFT alongside a monochrome secondary display).

Setting a theme takes two calls — initialize it, then assign it to the display:

 
lv_theme_t * th = lv_theme_default_init(display,                 /* Use DPI, size, etc. from this display */
                                        LV_COLOR_PALETTE_BLUE,   /* Primary and secondary palette */
                                        LV_COLOR_PALETTE_CYAN,
                                        false,                   /* Dark theme?  False = light theme. */
                                        &lv_font_montserrat_10,  /* Small, normal, large fonts */
                                        &lv_font_montserrat_14,
                                        &lv_font_montserrat_18);

lv_display_set_theme(display, th); /* Assign theme to display */

If LV_USE_THEME_DEFAULT is enabled in lv_conf.h, LVGL initializes and sets the default theme automatically when a display is created.

Extending themes

This extends the current theme with an extra button style. It is C-only because a lv_theme_* callback has no XML form.

A custom theme can select a parent theme: the parent's styles are applied before the custom theme's, and themes can be chained (e.g. default → custom → dark).

lv_theme_set_parent(new_theme, base_theme)

extends base_theme with new_theme.

Last updated on

On this page