Is it possible to change the theme in LVGL at a time of day or with a button? My goal is to have a Day/Night mode button on my screen. This requires changing the background to black the text to white and the colors of most of the text and objects. What’s the best way to accomplish this?
The only way I can see is to do an lvgl.update for each property. This would be a long list.
Basically LVGL does not provide a way to change a theme at run time due to the way that themes are implemented. However changing styles at run time is (now) possible:
dev ← clydebarrow:lvgl-style-update
opened 04:41AM - 08 Apr 25 UTC
# What does this implement/fix?
Allow styles to be updated at run time. S… pecific use-case to implement light/dark mode.
## Types of changes
- [ ] Bugfix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] Code quality improvements to existing code or addition of tests
- [ ] Other
**Related issue or feature (if applicable):**
- fixes <link to issue>
**Pull request in [esphome-docs](https://github.com/esphome/esphome-docs) with documentation (if applicable):**
- esphome/esphome-docs#4807
- [ ] ESP32
- [ ] ESP32 IDF
- [ ] ESP8266
- [ ] RP2040
- [ ] BK72xx
- [ ] RTL87xx
- [x] host
## Example entry for `config.yaml`:
```yaml
# Example config.yaml
lvgl:
style_definitions:
- id: label_style
text_font: montserrat_20
text_color: black
- id: bg_style
bg_color: white
theme:
label:
styles:
- label_style
styles:
- bg_style
widgets:
- label:
id: label_id
text: I am a label
align: center
on_click:
then:
- if:
condition:
lambda: return id(dark_mode);
then:
- globals.set:
id: dark_mode
value: "false"
- lvgl.style.update:
id: label_style
text_color: black
- lvgl.style.update:
id: bg_style
bg_color: white
else:
- globals.set:
id: dark_mode
value: "true"
- lvgl.style.update:
id: label_style
text_color: white
- lvgl.style.update:
id: bg_style
bg_color: black
- lvgl.widget.redraw:
- logger.log:
format: "Mode is %s"
args: ['id(dark_mode) ? "Dark" : "Light"']
```
## Checklist:
- [x] The code change is tested and works locally.
- [x] Tests have been added to verify that the new code works (under `tests/` folder).
If user exposed functionality or configuration variables are added/changed:
- [x] Documentation added/updated in [esphome-docs](https://github.com/esphome/esphome-docs).
There is an example of use in the PR.
1 Like
Wow! Thanks. This is a great update to ESPHome LVGL. I’m adding it to my button library now.