Description
Hi there, I am struggling with getting themes and styles to work properly.
I have created two themes, a “light” theme and a “dark” theme. The dark theme is a theme on its own, as I want to specify the behaviour of the dark theme myself - so it isn’t built as a standard lvgl “dark” theme.
My themes seem to be applying, to an extent. Some of the objects are getting the new styles, but others aren’t. Also, the styles are only applied if I specify the theme at compile time (hardcoded), but when I try to toggle between them ,the themes aren’t applied to existing objects.
I am also not sure I am creating the themes correctly, I understand that they behave as a collection of styles, but from what I see in the documentation and examples, the styles aren’t applied automatically, and they aren’t really part of the theme, if that makes sense, it is up to the user to implement and apply the styles in the lv_theme_set_apply_cb. Please correct me if I am wrong here.
What MCU/Processor/Board and compiler are you using?
A custom board, with an STM32F769BIT6. I am using STM32CubeIDE
What LVGL version are you using?
Version 8.1+ (master, latest)
What do you want to achieve?
I want to be able to specify theme styles for two custom themes, I want to switch between them at runtime and have the styles apply to all objects.
What have you tried so far?
I have the themes created, I have specified a few styles and have set the theme callbacks. I am having trouble applying the themes to all objects.
For instance, I have normal buttons, which seem to get the styles when they are created (if the theme is specified at compile time), but buttons which are part of a list don’t get the styles applied to them.
Code
This is where I create my themes.
/*---------------------
*Local variables
*---------------------*/
static void Display_DarkThemeApply(lv_theme_t * darkTheme, lv_obj_t * obj);
static void Display_LightThemeApply(lv_theme_t * darkTheme, lv_obj_t * obj);
/*=============================================
* This function initialises the dark theme,
* creates the styles and sets the theme apply
* callbacks.
*=============================================*/
void Display_DarkThemeInit(void)
{
/*---------------------
* Set the theme styles
*---------------------*/
Display_DarkThemeStyleInit();
/*---------------------------------------------------------------------
* Inititalise the theme (it will be built from the basic theme)
*---------------------------------------------------------------------*/
DarkTheme = *(lv_theme_default_init(MyLCDDisplay, lv_palette_main(LV_PALETTE_NONE), lv_palette_main(LV_PALETTE_NONE), false, &lv_font_montserrat_14));
/*---------------------
* Set the parent theme
*---------------------*/
lv_theme_set_parent(&DarkTheme, lv_disp_get_theme(MyLCDDisplay));
/*------------------------------
* Set the theme apply callback
*------------------------------*/
lv_theme_set_apply_cb(&DarkTheme, Display_DarkThemeApply);
}
/*=======================================
* This function initialises the dark theme,
* creates the styles and sets the theme apply
* callbacks.
*=======================================*/
void Display_LightThemeInit(void)
{
/*---------------------
* Set the theme styles
*---------------------*/
Display_LightThemeStyleInit();
/*---------------------------------------------------------------------
* Inititalise the theme (it will be built from the basic theme)
*---------------------------------------------------------------------*/
LightTheme = *(lv_disp_get_theme(MyLCDDisplay));
/*---------------------
* Set the parent theme
*---------------------*/
lv_theme_set_parent(&LightTheme, lv_disp_get_theme(MyLCDDisplay));
/*------------------------------
* Set the theme apply callback
*------------------------------*/
lv_theme_set_apply_cb(&LightTheme, Display_LightThemeApply);
}
This is where I create the styles for these themes
/*=======================================
* This function creates the styles for
* the dark theme.
*=======================================*/
void Display_DarkThemeStyleInit(void)
{
/*------------------------------
* Base style for the dark theme
*------------------------------*/
lv_style_init(&Dark_base);
lv_style_set_bg_color(&Dark_base, lv_color_hex(0x1d293b));
lv_style_set_line_rounded(&Dark_base, 0);
lv_style_set_border_color(&Dark_base, lv_color_hex(0xffffff));
lv_style_set_text_color(&Dark_base, lv_color_hex(0x22d664));
/*---------------------------
* Style for focussed objects
*---------------------------*/
lv_style_init(&Dark_focussed);
lv_style_set_bg_color(&Dark_focussed, lv_color_hex(0xcdd930));
}
/*=======================================
* This function creates the styles for
* the light theme.
*=======================================*/
void Display_LightThemeStyleInit(void)
{
/*------------------------------
* Base style for the dark theme
*------------------------------*/
lv_style_init(&Light_base);
lv_style_set_bg_color(&Light_base, lv_color_hex(0xdefffb));
lv_style_set_line_rounded(&Light_base, 3);
lv_style_set_text_color(&Light_base, lv_color_hex(0x443f73));
/*-----------------------------------
* Style for the focussed objects
*-----------------------------------*/
lv_style_init(&Light_focussed);
lv_style_set_bg_color(&Light_focussed, lv_color_hex(0xd124d4));
lv_style_set_text_color(&Light_focussed, lv_color_hex(0x78513c));
}
These are my theme apply callbacks
/*=======================================
* This function applies the dark theme
* It will set all the style properties
* for the objects.
*=======================================*/
static void Display_DarkThemeApply(lv_theme_t * darkTheme, lv_obj_t * obj)
{
/*------------------------------
* All objects get the base style
*------------------------------*/
lv_obj_add_style(obj, &Dark_base, 0);
/*----------------------------------------
* All objects get the focussed style
*----------------------------------------*/
lv_obj_add_style(obj, &Dark_focussed, LV_STATE_FOCUSED);
}
/*=======================================
* This function applies the light theme
* It will set all the style properties
* for the objects.
*=======================================*/
static void Display_LightThemeApply(lv_theme_t * lightTheme, lv_obj_t * obj)
{
/*------------------------------
* All objects get the base theme
*------------------------------*/
lv_obj_add_style(obj, &Light_base, 0);
/*----------------------------------------
* All objects get the focussed style
*----------------------------------------*/
lv_obj_add_style(obj, &Light_focussed, LV_STATE_FOCUSED);
}
Lastly, this function toggles between the two themes:
/*=======================================
* This function toggles between the light
* and the dark themes.
*=======================================*/
void Display_ToggleDarkTheme(lv_event_t *e)
{
if (lv_disp_get_theme(MyLCDDisplay) == &LightTheme)
{
lv_disp_set_theme(MyLCDDisplay, &DarkTheme);
}
else if (lv_disp_get_theme(MyLCDDisplay) == &DarkTheme)
{
lv_disp_set_theme(MyLCDDisplay, &LightTheme);
}
}