How to change style of keyboard popover

How-to
1

Hi,

Description

I put a keyboard in my lvgl screen and i enabled keyboard popover, but i want to change background color of popover, change font size of popover, change font color of popover and maybe change popover overall size for a better user readability.

What MCU/Processor/Board and compiler are you using?

ESP32-S3

What LVGL version are you using?

9.2.2

What do you want to achieve?

Change background color of popover, change font size of popover, change font color of popover and maybe change popover overall size.

What have you tried so far?

Only set a bigger font size.

Code to reproduce

    kb = lv_keyboard_create(scr);
    lv_obj_set_size(kb, LV_PCT(100), LV_PCT(35));
    lv_obj_align(kb, LV_ALIGN_BOTTOM_MID, 0, 0);
    lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);  // Inicialmente escondido
    lv_keyboard_set_popovers(kb, true);
    lv_obj_set_style_text_font(kb, &lv_font_montserrat_28, 0);

    //lv_obj_set_style_text_color(kb, lv_color_black(), 0);    
    //lv_obj_set_style_background_color(kb, lv_color_white(), 0);
2

no one ?

3

I realize I’ve never tried anything like this but you can try these part:

    LV_PART_MAIN         = 0x000000,   /**< A background like rectangle*/
    LV_PART_SCROLLBAR    = 0x010000,   /**< The scrollbar(s)*/
    LV_PART_INDICATOR    = 0x020000,   /**< Indicator, e.g. for slider, bar, switch, or the tick box of the checkbox*/
    LV_PART_KNOB         = 0x030000,   /**< Like handle to grab to adjust the value*/
    LV_PART_SELECTED     = 0x040000,   /**< Indicate the currently selected option or section*/
    LV_PART_ITEMS        = 0x050000,   /**< Used if the widget has multiple similar elements (e.g. table cells)*/
    LV_PART_TICKS        = 0x060000,   /**< Ticks on scale e.g. for a chart or meter*/
    LV_PART_CURSOR       = 0x070000,   /**< Mark a specific place e.g. for text area's cursor or on a chart*/

    LV_PART_CUSTOM_FIRST = 0x080000,    /**< Extension point for custom widgets*/

    LV_PART_ANY          = 0x0F0000,    /**< Special value can be used in some functions to target all parts*/

ex: lv_obj_set_style_text_color(kb, lv_color_black(),LV_PART_ITEMS );

and keyboard and button matrix which are known to be quite similar you can find them.

4

LV_PART_ITEMS → Keyboard buttons (individual keys)
Then combine with LV_STATE_PRESSED

https://docs.lvgl.io/master/widgets/keyboard.html

lv_obj_set_style_text_color(kb, lv_color_black(), LV_PART_ITEMS | LV_STATE_PRESSED);    
lv_obj_set_style_background_color(kb, lv_color_white(), LV_PART_ITEMS | LV_STATE_PRESSED);