Add other styles to lua theme

lua/main.lua

@@ -41,22 +41,89 @@ local my_theme = {
     {lvgl.PART.MAIN, lvgl.Style {
       bg_opa = lvgl.OPA(0),
       text_font = font.fusion_12,
-      text_color = "#ff0000", -- Red to check it applies
+      text_color = "#000000",
     }},
     {lvgl.STATE.FOCUSED, lvgl.Style {
       bg_opa = lvgl.OPA(100),
-      bg_color = "#0000ff", -- ew
+      bg_color = "#E3F2FD",
-      text_color = "#ff0000", -- Red to check it applies
     }},
   },
   button = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      pad_left = 2,
+      pad_right = 2,
+      pad_top = 1,
+      pad_bottom = 1,
+      bg_color = "#ffffff",
+      radius = 5,
+    }},
+  },
+  bar = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+  },
+  slider = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = "#2196F3",
+    }},
+    {lvgl.PART.KNOB, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      pad_all = 2,
+      bg_color = "#ffffff",
+      shadow_width = 5,
+      shadow_opa = lvgl.OPA(100)
+    }},
     {lvgl.STATE.FOCUSED, lvgl.Style {
-      bg_color = "#00ff00",
+      bg_color = "#BBDEFB",
     }},
+  },
+  switch = {
     {lvgl.PART.MAIN, lvgl.Style {
-      bg_color = "#00ff00",
+      bg_opa = lvgl.OPA(100),
+      width = 28,
+      height = 18,
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = "#9E9E9E",
+    }},
+    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = "#2196F3",
+    }},
+    {lvgl.PART.KNOB, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      pad_all = 2,
+      bg_opa = lvgl.OPA(100),
+      bg_color = "#ffffff",
     }},
   },
+  dropdown = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      border_color = "#2196F3",
+      border_side = 15, -- LV_BORDER_SIDE_FULL
+    }}
+  },
+  dropdownlist = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      border_color = "#607D8B",
+      bg_opa = lvgl.OPA(100),
+      bg_color = "#ffffff"
+    }}
+  }
 }
 theme.set(my_theme)
 

src/ui/themes.cpp

@@ -40,11 +40,92 @@ void Theme::Callback(lv_obj_t* obj) {
       }
   }
 
-  // TODO: Apply widget style
+  // Determine class name
+  std::string class_name;
+  if (lv_obj_check_type(obj, &lv_btn_class)) {
+    class_name = "button";
+  } else if (lv_obj_check_type(obj, &lv_bar_class)) {
+    class_name = "bar";
+  } else if (lv_obj_check_type(obj, &lv_slider_class)) {
+    class_name = "slider";
+  } else if (lv_obj_check_type(obj, &lv_switch_class)) {
+    class_name = "switch";
+  } else if (lv_obj_check_type(obj, &lv_dropdown_class)) {
+    class_name = "dropdown";
+  } else if (lv_obj_check_type(obj, &lv_dropdownlist_class)) {
+    class_name = "dropdownlist";
+  }
+
+  // Apply all styles from class
+  if (auto search = style_map.find(class_name); search != style_map.end()) {
+      for (const auto& pair : search->second) {
+        lv_obj_add_style(obj, pair.second, pair.first);
+      }
+  }
 
 }
 
-void Theme::ApplyStyle(lv_obj_t* obj, Style style) {}
+void Theme::ApplyStyle(lv_obj_t* obj, Style style) {
+  switch (style) {
+    case Style::kTopBar:
+      lv_obj_set_style_pad_bottom(obj, 1, LV_PART_MAIN);
+
+      lv_obj_set_style_shadow_width(obj, 6, LV_PART_MAIN);
+      lv_obj_set_style_shadow_opa(obj, LV_OPA_COVER, LV_PART_MAIN);
+      lv_obj_set_style_shadow_ofs_x(obj, 0, LV_PART_MAIN);
+      break;
+    case Style::kPopup:
+      lv_obj_set_style_shadow_width(obj, 6, LV_PART_MAIN);
+      lv_obj_set_style_shadow_opa(obj, LV_OPA_COVER, LV_PART_MAIN);
+      lv_obj_set_style_shadow_ofs_x(obj, 0, LV_PART_MAIN);
+      lv_obj_set_style_shadow_ofs_y(obj, 0, LV_PART_MAIN);
+
+      lv_obj_set_style_radius(obj, 5, LV_PART_MAIN);
+
+      lv_obj_set_style_bg_opa(obj, LV_OPA_COVER, LV_PART_MAIN);
+      lv_obj_set_style_bg_color(obj, lv_color_white(), LV_PART_MAIN);
+
+      lv_obj_set_style_pad_top(obj, 2, LV_PART_MAIN);
+      lv_obj_set_style_pad_bottom(obj, 2, LV_PART_MAIN);
+      lv_obj_set_style_pad_left(obj, 2, LV_PART_MAIN);
+      lv_obj_set_style_pad_right(obj, 2, LV_PART_MAIN);
+      break;
+    case Style::kTab:
+      lv_obj_set_style_radius(obj, 0, LV_PART_MAIN);
+
+      lv_obj_set_style_border_width(obj, 1, LV_STATE_CHECKED);
+      lv_obj_set_style_border_color(obj, lv_palette_main(LV_PALETTE_BLUE),
+                                    LV_STATE_CHECKED);
+      lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_BOTTOM,
+                                   LV_STATE_CHECKED);
+      break;
+    case Style::kButtonPrimary:
+      lv_obj_set_style_border_width(obj, 1, LV_PART_MAIN);
+      lv_obj_set_style_border_color(obj, lv_palette_main(LV_PALETTE_BLUE),
+                                    LV_PART_MAIN);
+      lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_FULL, LV_PART_MAIN);
+      break;
+    case Style::kMenuSubheadFirst:
+    case Style::kMenuSubhead:
+      lv_obj_set_style_text_color(obj, lv_palette_darken(LV_PALETTE_GREY, 3),
+                                  LV_PART_MAIN);
+      lv_obj_set_style_text_align(obj, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN);
+
+      lv_obj_set_style_border_width(obj, 1, LV_PART_MAIN);
+      lv_obj_set_style_border_color(obj, lv_palette_lighten(LV_PALETTE_GREY, 3),
+                                    LV_PART_MAIN);
+
+      if (style == Style::kMenuSubhead) {
+        lv_obj_set_style_border_side(
+            obj, LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_BOTTOM, LV_PART_MAIN);
+      } else {
+        lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_BOTTOM, LV_PART_MAIN);
+      }
+      break;
+    default:
+      break;
+  }
+}
 
 auto Theme::instance() -> Theme* {
   static Theme sTheme{};