How to get rid of focus border on page widget?


I’ve been using lv_theme_night. I am trying to port my code to 7.0 but I cannot get rid of the focus border on page widget. If I set BORDER_WIDTH to “0”, borders on textarea, dropdown and chart disappears (may be other widgets that I am not using)

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

STM32F4/Custom board/GCC

What do you want to achieve?

Disable the focus border of page widget

What have you tried so far?

Tried to modify lv_theme_material without any luck

Code to reproduce

// some other props
    lv_style_set_border_width(&styles->bg, LV_STATE_DEFAULT, BORDER_WIDTH); 
// If I set BORDER_WIDTH to 0, border disappears on page but it disappears on other widgets as well. 

Screenshot and/or video

You should avoid modifying the built-in themes. Instead, you should create styles that override the properties you want and add those styles to your objects.

In your case I think you want to change the border color on LV_STATE_FOCUSED.

Playing with supplied examples are the best way to learn. You can always make a fresh start by executing
git fetch --all && git reset --hard && git pull
in lvgl directory.

That’s not the point. I handled it like this:

static lv_style_t style_page_override;
scr = lv_page_create(NULL, NULL);
lv_style_set_border_width(&style_page_override, LV_STATE_DEFAULT , 0);
lv_obj_add_style(scr, LV_PAGE_PART_BG , &style_page_override);

I am not sure if it is the cleanest way but it works!

It’s not the same exact case, but how would you do it if you would like to disable all the focus borders? I am using only touch and it’s not needed…



#define BORDER_WIDTH 0
In lv_theme_material.c will disable all borders as I see.

Yes, it’s what I did. But as embeddedt said that we should not modify themes, I thought maybe there was another way (option) to disable it.

At the moment, though, I have created a copy of the material theme, and modified it, so I have my personal theme to test.

Thanks for the help.


As I discovered so far, you can achieve it by defining a custom style like this:

lv_style_t my_custom_style;
lv_style_set_border_width(&my_custom_style, LV_STATE_DEFAULT , 0);

or you can modify the theme file or create your own by using template or modifying the existing themes. The author of this framework distributes it under MIT license -and this is awesome :blush:- so you are free to use, copy, modify, merge, publish, distribute… :grinning:

For myself I choose to make my own ubuntu community theme like theme based on lv_theme_material.c

Creating your own theme should be safe. The problem with modifying the existing theme file is that you open up the possibility of merge conflicts/incompatibilities when you try to update.

It’s more of a “best practice” than a mandated rule.

That’s what I say. Use an existing theme instead of making one from scratch. It does not mean to modify built in source. Just make a copy.

Removing the border is not exactly the same as removing the highlight if focused.

You can se here that the pages border uses the bg style:

And here is how the focused color is added:

As @embeddedt suggested it’s better to hack the built-in themes externally than modifying the theme itself. So:

    static lv_style_t style;
    lv_style_set_border_color(&style, LV_STATE_FOCUSED, lv_color_hex(0xd6dde3));
    lv_obj_add_style(page, LV_PAGE_PART_BG, &style);