Merge pull request 'themes' (#58) from themes into main

Reviewed-on: https://codeberg.org/cool-tech-zone/tangara-fw/pulls/58
Reviewed-by: cooljqln <cooljqln@noreply.codeberg.org>

lib/luavgl/src/luavgl.h

@@ -157,6 +157,11 @@ LUALIB_API int luavgl_obj_getuserdatauv(lua_State *L, int idx);
  */
 LUALIB_API lv_obj_t *luavgl_to_obj(lua_State *L, int idx);
 
+/**
+ * @brief Get lvgl style from stack
+ */
+LUALIB_API lv_style_t *luavgl_to_style(lua_State *L, int idx);
+
 /**
  * @brief Convert value to integer
  *

lib/luavgl/src/util.c

@@ -272,6 +272,17 @@ LUALIB_API lv_obj_t *luavgl_to_obj(lua_State *L, int idx)
   return lobj->obj;
 }
 
+LUALIB_API lv_style_t *luavgl_to_style(lua_State *L, int idx)
+{
+  luavgl_style_t *lsty = luavgl_check_style(L, idx);
+  if (lsty == NULL) {
+    luaL_argerror(L, idx, "expect lua lvgl style, got null");
+    return NULL;
+  }
+
+  return &lsty->style;
+}
+
 LUALIB_API int luavgl_tointeger(lua_State *L, int idx)
 {
   int v = 0;

lib/lvgl/src/misc/lv_style.c

@@ -92,9 +92,11 @@ const uint8_t _lv_style_builtin_prop_flag_lookup_table[_LV_STYLE_NUM_BUILT_IN_PR
     [LV_STYLE_SHADOW_COLOR] = 0,
     [LV_STYLE_SHADOW_OPA] =                LV_STYLE_PROP_EXT_DRAW,
 
-    [LV_STYLE_IMG_OPA] = 0,
+    // Image style inheritance
-    [LV_STYLE_IMG_RECOLOR] = 0,
+    // https://github.com/lvgl/lvgl/pull/4664
-    [LV_STYLE_IMG_RECOLOR_OPA] = 0,
+    [LV_STYLE_IMG_OPA] =                   LV_STYLE_PROP_INHERIT,
+    [LV_STYLE_IMG_RECOLOR] =               LV_STYLE_PROP_INHERIT,
+    [LV_STYLE_IMG_RECOLOR_OPA] =           LV_STYLE_PROP_INHERIT,
 
     [LV_STYLE_LINE_WIDTH] =                LV_STYLE_PROP_EXT_DRAW,
     [LV_STYLE_LINE_DASH_WIDTH] = 0,

lua/browser.lua

@@ -4,8 +4,9 @@ local backstack = require("backstack")
 local font = require("font")
 local queue = require("queue")
 local playing = require("playing")
-local theme = require("theme")
+local styles = require("styles")
 local playback = require("playback")
+local theme = require("theme")
 local screen = require("screen")
 
 return screen:new {
@@ -42,9 +43,10 @@ return screen:new {
         pad_right = 4,
         pad_bottom = 2,
         bg_opa = lvgl.OPA(100),
-        bg_color = "#fafafa",
         scrollbar_mode = lvgl.SCROLLBAR_MODE.OFF,
       }
+    theme.set_style(header, "header")
+
 
       header:Label {
         text = self.breadcrumb,
@@ -89,7 +91,7 @@ return screen:new {
 
     local back = self.list:add_btn(nil, "< Back")
     back:onClicked(backstack.pop)
-    back:add_style(theme.list_item)
+    back:add_style(styles.list_item)
 
     self.focused_item = 0
     self.last_item = 0
@@ -119,7 +121,7 @@ return screen:new {
           self.add_item(self.iterator())
         end
       end)
-      btn:add_style(theme.list_item)
+      btn:add_style(styles.list_item)
     end
 
     for _ = 1, 8 do

lua/licenses.lua

@@ -1,7 +1,7 @@
 local backstack = require("backstack")
 local widgets = require("widgets")
 local font = require("font")
-local theme = require("theme")
+local styles = require("styles")
 local screen = require("screen")
 
 local function show_license(text)
@@ -103,7 +103,7 @@ return function()
       w = lvgl.PCT(100),
       h = lvgl.SIZE_CONTENT,
     }
-    row:add_style(theme.list_item)
+    row:add_style(styles.list_item)
     row:Label { text = name, flex_grow = 1 }
     local button = row:Button {}
     button:Label { text = license, text_font = font.fusion_10 }

lua/main.lua

@@ -1,13 +1,17 @@
 local font = require("font")
 local vol = require("volume")
+local theme = require("theme")
 local controls = require("controls")
 local time = require("time")
 
 local lock_time = time.ticks()
 
+local theme_dark = require("theme_dark")
+theme.set(theme_dark)
+
 -- Set up property bindings that are used across every screen.
 GLOBAL_BINDINGS = {
-  -- Show an alert with the current volume whenver the volume changes.
+  -- Show an alert with the current volume whenever the volume changes
   vol.current_pct:bind(function(pct)
     require("alerts").show(function()
       local container = lvgl.Object(nil, {
@@ -19,11 +23,10 @@ GLOBAL_BINDINGS = {
           align_items = "center",
           align_content = "center",
         },
-        bg_opa = lvgl.OPA(100),
-        bg_color = "#fafafa",
         radius = 8,
         pad_all = 2,
       })
+      theme.set_style(container, "pop_up")
       container:Label {
         text = string.format("Volume %i%%", pct),
         text_font = font.fusion_10

lua/main_menu.lua

@@ -4,7 +4,7 @@ local database = require("database")
 local backstack = require("backstack")
 local browser = require("browser")
 local playing = require("playing")
-local theme = require("theme")
+local styles = require("styles")
 local screen = require("screen")
 
 return screen:new {
@@ -21,7 +21,7 @@ return screen:new {
     now_playing:onClicked(function()
       backstack.push(playing:new())
     end)
-    now_playing:add_style(theme.list_item)
+    now_playing:add_style(styles.list_item)
 
     local indexes = database.indexes()
     for _, idx in ipairs(indexes) do
@@ -32,14 +32,14 @@ return screen:new {
           iterator = idx:iter(),
         })
       end)
-      btn:add_style(theme.list_item)
+      btn:add_style(styles.list_item)
     end
 
     local settings = menu.list:add_btn(nil, "Settings")
     settings:onClicked(function()
       backstack.push(require("settings"):new())
     end)
-    settings:add_style(theme.list_item)
+    settings:add_style(styles.list_item)
 
     return menu
   end,

lua/playing.lua

@@ -5,22 +5,22 @@ local font = require("font")
 local playback = require("playback")
 local queue = require("queue")
 local screen = require("screen")
+local theme = require("theme")
 
 local img = {
   play = lvgl.ImgData("//lua/img/play.png"),
   pause = lvgl.ImgData("//lua/img/pause.png"),
   next = lvgl.ImgData("//lua/img/next.png"),
-  next_disabled = lvgl.ImgData("//lua/img/next_disabled.png"),
   prev = lvgl.ImgData("//lua/img/prev.png"),
-  prev_disabled = lvgl.ImgData("//lua/img/prev_disabled.png"),
   shuffle = lvgl.ImgData("//lua/img/shuffle.png"),
-  shuffle_disabled = lvgl.ImgData("//lua/img/shuffle_disabled.png"),
+  repeat_src = lvgl.ImgData("//lua/img/repeat.png"), -- repeat is a reserved word
-  repeat_enabled = lvgl.ImgData("//lua/img/repeat.png"),
-  repeat_disabled = lvgl.ImgData("//lua/img/repeat_disabled.png"),
 }
 
 local is_now_playing_shown = false
 
+local icon_enabled_class = "icon_enabled"
+local icon_disabled_class = "icon_disabled"
+
 return screen:new {
   createUi = function(self)
     self.root = lvgl.Object(nil, {
@@ -146,11 +146,14 @@ return screen:new {
     repeat_btn:onClicked(function()
       queue.repeat_track:set(not queue.repeat_track:get())
     end)
-    local repeat_img = repeat_btn:Image { src = img.repeat_enabled }
+    local repeat_img = repeat_btn:Image { src = img.repeat_src }
+    theme.set_style(repeat_img, icon_enabled_class)
+
 
     local prev_btn = controls:Button {}
     prev_btn:onClicked(queue.previous)
-    local prev_img = prev_btn:Image { src = img.prev_disabled }
+    local prev_img = prev_btn:Image { src = img.prev }
+    theme.set_style(prev_img, icon_disabled_class)
 
     local play_pause_btn = controls:Button {}
     play_pause_btn:onClicked(function()
@@ -158,16 +161,19 @@ return screen:new {
     end)
     play_pause_btn:focus()
     local play_pause_img = play_pause_btn:Image { src = img.pause }
+    theme.set_style(play_pause_img, icon_enabled_class)
 
     local next_btn = controls:Button {}
     next_btn:onClicked(queue.next)
-    local next_img = next_btn:Image { src = img.next_disabled }
+    local next_img = next_btn:Image { src = img.next }
+    theme.set_style(next_img, icon_disabled_class)
 
     local shuffle_btn = controls:Button {}
     shuffle_btn:onClicked(function()
       queue.random:set(not queue.random:get())
     end)
     local shuffle_img = shuffle_btn:Image { src = img.shuffle }
+    theme.set_style(shuffle_img, icon_enabled_class)
 
     controls:Object({ flex_grow = 1, h = 1 }) -- spacer
 
@@ -208,26 +214,19 @@ return screen:new {
         if not pos then return end
         playlist_pos:set { text = tostring(pos) }
 
-        next_img:set_src(
+        theme.set_style(
-          pos < queue.size:get() and img.next or img.next_disabled
+          next_img, pos < queue.size:get() and icon_enabled_class or icon_disabled_class
         )
-        prev_img:set_src(
+        
-          pos > 1 and img.prev or img.prev_disabled
+        theme.set_style(
+          prev_img, pos > 1 and icon_enabled_class or icon_disabled_class
         )
       end),
       queue.random:bind(function(shuffling)
-        if shuffling then
+        theme.set_style(shuffle_img, shuffling and icon_enabled_class or icon_disabled_class)
-          shuffle_img:set_src(img.shuffle)
-        else
-          shuffle_img:set_src(img.shuffle_disabled)
-        end
       end),
       queue.repeat_track:bind(function(en)
-        if en then
+        theme.set_style(repeat_img, en and icon_enabled_class or icon_disabled_class)
-          repeat_img:set_src(img.repeat_enabled)
-        else
-          repeat_img:set_src(img.repeat_disabled)
-        end
       end),
       queue.size:bind(function(num)
         if not num then return end

lua/settings.lua

@@ -1,11 +1,12 @@
 local lvgl = require("lvgl")
 local backstack = require("backstack")
 local widgets = require("widgets")
-local theme = require("theme")
+local styles = require("styles")
 local volume = require("volume")
 local display = require("display")
 local controls = require("controls")
 local bluetooth = require("bluetooth")
+local theme = require("theme")
 local database = require("database")
 local screen = require("screen")
 local usb = require("usb")
@@ -23,7 +24,7 @@ local function SettingsScreen(title)
       align_items = "flex-start",
       align_content = "flex-start",
     },
-    w = lvgl.PCT(100),
+    w = lvgl.PCT(90),
     flex_grow = 1,
     pad_left = 4,
     pad_right = 4,
@@ -53,10 +54,10 @@ local BluetoothSettings = screen:new {
       bluetooth.enabled:set(enabled)
     end)
 
-    self.menu.content:Label {
+  theme.set_style(self.menu.content:Label {
-      text = "Paired Device",
+    text = "Paired Device",
-      pad_bottom = 1,
+    pad_bottom = 1,
-    }:add_style(theme.settings_title)
+  }, "settings_title")
 
     local paired_container = self.menu.content:Object {
       flex = {
@@ -79,10 +80,10 @@ local BluetoothSettings = screen:new {
       bluetooth.paired_device:set()
     end)
 
-    self.menu.content:Label {
+  theme.set_style(self.menu.content:Label {
-      text = "Nearby Devices",
+    text = "Nearby Devices",
-      pad_bottom = 1,
+    pad_bottom = 1,
-    }:add_style(theme.settings_title)
+  }, "settings_title")
 
     local devices = self.menu.content:List {
       w = lvgl.PCT(100),
@@ -122,9 +123,9 @@ local HeadphonesSettings = screen:new {
   createUi = function(self)
     self.menu = SettingsScreen("Headphones")
 
-    self.menu.content:Label {
+  theme.set_style(self.menu.content:Label {
-      text = "Maximum volume limit",
+    text = "Maxiumum volume limit",
-    }:add_style(theme.settings_title)
+  }, "settings_title")
 
     local volume_chooser = self.menu.content:Dropdown {
       options = "Line Level (-10 dB)\nCD Level (+6 dB)\nMaximum (+10dB)",
@@ -137,9 +138,9 @@ local HeadphonesSettings = screen:new {
       volume.limit_db:set(limits[selection])
     end)
 
-    self.menu.content:Label {
+  theme.set_style(self.menu.content:Label {
-      text = "Left/Right balance",
+    text = "Left/Right balance",
-    }:add_style(theme.settings_title)
+  }, "settings_title")
 
     local balance = self.menu.content:Slider {
       w = lvgl.PCT(100),
@@ -185,19 +186,20 @@ local DisplaySettings = screen:new {
   createUi = function(self)
     self.menu = SettingsScreen("Display")
 
-    local brightness_title = self.menu.content:Object {
+  local brightness_title = self.menu.content:Object {
-      flex = {
+    flex = {
-        flex_direction = "row",
+      flex_direction = "row",
-        justify_content = "flex-start",
+      justify_content = "flex-start",
-        align_items = "flex-start",
+      align_items = "flex-start",
-        align_content = "flex-start",
+      align_content = "flex-start",
-      },
+    },
-      w = lvgl.PCT(100),
+    w = lvgl.PCT(100),
-      h = lvgl.SIZE_CONTENT,
+    h = lvgl.SIZE_CONTENT,
-    }
+
-    brightness_title:Label { text = "Brightness", flex_grow = 1 }
+  }
-    local brightness_pct = brightness_title:Label {}
+  brightness_title:Label { text = "Brightness", flex_grow = 1 }
-    brightness_pct:add_style(theme.settings_title)
+  local brightness_pct = brightness_title:Label {}
+  theme.set_style(brightness_pct, "settings_title")
 
     local brightness = self.menu.content:Slider {
       w = lvgl.PCT(100),
@@ -221,9 +223,9 @@ local InputSettings = screen:new {
   createUi = function(self)
     self.menu = SettingsScreen("Input Method")
 
-    self.menu.content:Label {
+  theme.set_style(self.menu.content:Label {
-      text = "Control scheme",
+    text = "Control scheme",
-    }:add_style(theme.settings_title)
+  }, "settings_title")
 
     local schemes = controls.schemes()
     local option_to_scheme = {}
@@ -259,9 +261,9 @@ local InputSettings = screen:new {
       controls.scheme:set(scheme)
     end)
 
-    self.menu.content:Label {
+  theme.set_style(self.menu.content:Label {
-      text = "Scroll Sensitivity",
+    text = "Scroll Sensitivity",
-    }:add_style(theme.settings_title)
+  }, "settings_title")
 
     local slider_scale = 4; -- Power steering
     local sensitivity = self.menu.content:Slider {
@@ -331,19 +333,19 @@ local DatabaseSettings = screen:new {
     widgets.Row(self.menu.content, "Schema version", db.version())
     widgets.Row(self.menu.content, "Size on disk", string.format("%.1f KiB", db.size() / 1024))
 
-    local actions_container = self.menu.content:Object {
+  local actions_container = self.menu.content:Object {
-      w = lvgl.PCT(100),
+    w = lvgl.PCT(100),
-      h = lvgl.SIZE_CONTENT,
+    h = lvgl.SIZE_CONTENT,
-      flex = {
+    flex = {
-        flex_direction = "row",
+      flex_direction = "row",
-        justify_content = "center",
+      justify_content = "center",
-        align_items = "space-evenly",
+      align_items = "space-evenly",
-        align_content = "center",
+      align_content = "center",
-      },
+    },
-      pad_top = 4,
+    pad_top = 4,
-      pad_column = 4,
+    pad_column = 4,
-    }
+  }
-    actions_container:add_style(theme.list_item)
+  actions_container:add_style(styles.list_item)
 
     local update = actions_container:Button {}
     update:Label { text = "Update" }
@@ -381,16 +383,20 @@ return screen:new {
       flex_grow = 1,
     }
 
-    local function section(name)
+  local function section(name)
-      self.list:add_text(name):add_style(theme.list_heading)
+    local elem = self.list:Label {
-    end
+      text = name,
+      pad_left = 4,
+    }
+    theme.set_style(elem, "settings_title")
+  end
 
     local function submenu(name, class)
       local item = self.list:add_btn(nil, name)
       item:onClicked(function()
         backstack.push(class:new())
       end)
-      item:add_style(theme.list_item)
+      item:add_style(styles.list_item)
     end
 
     section("Audio")

lua/styles.lua

@@ -1,7 +1,7 @@
 local lvgl = require("lvgl")
 local font = require("font")
 
-local theme = {
+local styles = {
   list_item = lvgl.Style {
     pad_left = 4,
     pad_right = 4,
@@ -13,11 +13,6 @@ local theme = {
     text_font = font.fusion_10,
     text_align = lvgl.ALIGN.CENTER,
   },
-  settings_title = lvgl.Style {
-    pad_top = 2,
-    pad_bottom = 4,
-    text_font = font.fusion_10,
-  }
 }
 
-return theme
+return styles

lua/theme_dark.lua

@@ -0,0 +1,176 @@
+local lvgl = require("lvgl")
+local font = require("font")
+
+local background_color = "#5a5474"
+local background_muted = "#464258"
+local text_color = "#eeeeee"
+local highlight_color = "#9773d3"
+local icon_enabled_color = "#eeeeee"
+local icon_disabled_color = "#6d6d69"
+
+local theme_dark = {
+  base = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(0),
+      text_font = font.fusion_12,
+    }},
+  },
+  root = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_color, -- Root background color
+      bg_grad_dir = 1,
+      bg_grad_color = "#1d0e38",
+      text_color = text_color
+    }},
+  },
+  header = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_muted,
+    }},
+  },
+  pop_up = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_muted,
+    }},
+  },
+  button = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      pad_left = 2,
+      pad_right = 2,
+      pad_top = 1,
+      pad_bottom = 1,
+      bg_color = background_color,
+      img_recolor_opa = 180,
+      img_recolor = highlight_color,
+      radius = 5,
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = highlight_color,
+      img_recolor_opa = 0,
+    }},
+  },
+  listbutton = {
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = highlight_color,
+    }},
+  },
+  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),
+      bg_color = background_muted,
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = highlight_color,
+    }},
+    {lvgl.PART.KNOB, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      pad_all = 2,
+      bg_color = background_muted,
+      shadow_width = 5,
+      shadow_opa = lvgl.OPA(100)
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  switch = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      width = 28,
+      height = 8,
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = background_muted,
+      border_color = highlight_color,
+    }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+    {lvgl.PART.KNOB, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      pad_all = 2,
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  dropdown = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      border_color = background_muted,
+      border_side = 15, -- LV_BORDER_SIDE_FULL
+      bg_color = background_color,
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      border_color = highlight_color,
+    }},
+  },
+  dropdownlist = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      border_color = highlight_color,
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_color
+    }},
+    {lvgl.PART.SELECTED | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  database_indicator = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = highlight_color,
+    }},
+  },
+  settings_title = {
+   {lvgl.PART.MAIN, lvgl.Style {
+      pad_top = 2,
+      pad_bottom = 4,
+      text_font = font.fusion_10,
+      text_color = highlight_color,
+    }},
+  },
+  icon_disabled = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = icon_disabled_color,
+    }},
+  },
+  icon_enabled = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = icon_enabled_color,
+    }},
+  },
+
+}
+
+return theme_dark

lua/theme_light.lua

@@ -0,0 +1,174 @@
+local lvgl = require("lvgl")
+local font = require("font")
+
+local background_color = "#ffffff"
+local background_muted = "#fafafa"
+local text_color = "#000000"
+local highlight_color = "#ce93d8"
+local icon_enabled_color = "#2c2c2c"
+local icon_disabled_color = "#999999"
+
+local theme_light = {
+  base = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(0),
+      text_font = font.fusion_12,
+    }},
+  },
+  root = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_color, -- Root background color
+      text_color = text_color
+    }},
+  },
+  header = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_muted,
+    }},
+  },
+  pop_up = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_muted,
+    }},
+  },
+  button = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      pad_left = 2,
+      pad_right = 2,
+      pad_top = 1,
+      pad_bottom = 1,
+      bg_color = background_color,
+      img_recolor_opa = 180,
+      img_recolor = highlight_color,
+      radius = 5,
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = highlight_color,
+      img_recolor_opa = 0,
+    }},
+  },
+  listbutton = {
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = highlight_color,
+    }},
+  },
+  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),
+      bg_color = background_muted,
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = highlight_color,
+    }},
+    {lvgl.PART.KNOB, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      pad_all = 2,
+      bg_color = background_muted,
+      shadow_width = 5,
+      shadow_opa = lvgl.OPA(100)
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  switch = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      width = 28,
+      height = 8,
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = background_muted,
+      border_color = highlight_color,
+    }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+    {lvgl.PART.KNOB, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      pad_all = 2,
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  dropdown = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      border_color = background_muted,
+      border_side = 15, -- LV_BORDER_SIDE_FULL
+      bg_color = background_color,
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      border_color = highlight_color,
+    }},
+  },
+  dropdownlist = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      border_color = highlight_color,
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_color
+    }},
+    {lvgl.PART.SELECTED | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  database_indicator = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = highlight_color,
+    }},
+  },
+  settings_title = {
+   {lvgl.PART.MAIN, lvgl.Style {
+      pad_top = 2,
+      pad_bottom = 4,
+      text_font = font.fusion_10,
+      text_color = highlight_color,
+    }},
+  },
+  icon_disabled = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = icon_disabled_color,
+    }},
+  },
+  icon_enabled = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = icon_enabled_color,
+    }},
+  },
+
+}
+
+return theme_light

lua/widgets.lua

@@ -3,8 +3,9 @@ local power = require("power")
 local bluetooth = require("bluetooth")
 local font = require("font")
 local backstack = require("backstack")
-local theme = require("theme")
+local styles = require("styles")
 local database = require("database")
+local theme = require("theme")
 
 local img = {
   db = lvgl.ImgData("//lua/img/db.png"),
@@ -55,7 +56,7 @@ function widgets.Row(parent, left, right)
     w = lvgl.PCT(100),
     h = lvgl.SIZE_CONTENT,
   }
-  container:add_style(theme.list_item)
+  container:add_style(styles.list_item)
   container:Label { text = left, flex_grow = 1 }
   container:Label { text = right }
 end
@@ -80,10 +81,7 @@ function widgets.StatusBar(parent, opts)
   }
 
   if not opts.transparent_bg then
-    status_bar.root:set {
+    theme.set_style(status_bar.root, "header");
-      bg_opa = lvgl.OPA(100),
-      bg_color = "#fafafa",
-    }
   end
 
   if opts.back_cb then
@@ -108,6 +106,7 @@ function widgets.StatusBar(parent, opts)
   end
 
   status_bar.db_updating = status_bar.root:Image { src = img.db }
+  theme.set_style(status_bar.db_updating, "database_indicator")
   status_bar.bluetooth = status_bar.root:Image {}
   status_bar.battery = status_bar.root:Image {}
   status_bar.chg = status_bar.battery:Image { src = img.chg }

src/lua/CMakeLists.txt

@@ -3,8 +3,8 @@
 # SPDX-License-Identifier: GPL-3.0-only
 
 idf_component_register(
-  SRCS "lua_thread.cpp" "bridge.cpp" "property.cpp" "lua_database.cpp"
+  SRCS "lua_theme.cpp" "lua_thread.cpp" "bridge.cpp" "property.cpp" "lua_database.cpp"
-  "lua_queue.cpp" "lua_version.cpp" "lua_controls.cpp" "registry.cpp"
+  "lua_queue.cpp" "lua_version.cpp" "lua_theme.cpp" "lua_controls.cpp" "registry.cpp"
   "lua_screen.cpp"
   INCLUDE_DIRS "include"
   REQUIRES "drivers" "lvgl" "tinyfsm" "events" "system_fsm" "database"

src/lua/bridge.cpp

@@ -21,6 +21,7 @@
 #include "lua_queue.hpp"
 #include "lua_screen.hpp"
 #include "lua_version.hpp"
+#include "lua_theme.hpp"
 #include "lvgl.h"
 
 #include "font/lv_font_loader.h"
@@ -85,6 +86,7 @@ auto Bridge::installBaseModules(lua_State* L) -> void {
   RegisterDatabaseModule(L);
   RegisterQueueModule(L);
   RegisterVersionModule(L);
+  RegisterThemeModule(L);
   RegisterScreenModule(L);
 }
 

src/lua/include/lua_theme.hpp

@@ -0,0 +1,15 @@
+/*
+ * Copyright 2024 ailurux <ailuruxx@gmail.com>
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ */
+
+#pragma once
+
+#include "lua.hpp"
+
+namespace lua {
+
+auto RegisterThemeModule(lua_State*) -> void;
+
+}  // namespace lua

src/lua/lua_theme.cpp

@@ -0,0 +1,89 @@
+
+/*
+ * Copyright 2023 ailurux <ailuruxx@gmail.com>
+ *
+ * SPDX-License-Identifier: GPL-3.0-only
+ */
+
+#include "lua_version.hpp"
+
+#include <string>
+
+#include "bridge.hpp"
+#include "lua.hpp"
+
+#include "esp_app_desc.h"
+#include "esp_log.h"
+#include "lauxlib.h"
+#include "lua.h"
+#include "lua_thread.hpp"
+#include "luavgl.h"
+#include "themes.hpp"
+
+namespace lua {
+
+static auto set_style(lua_State* L) -> int {
+  // Get the object and class name from the stack
+  std::string class_name = luaL_checkstring(L, -1);
+  lv_obj_t* obj = luavgl_to_obj(L, -2);
+  if (obj != NULL) {
+    ui::themes::Theme::instance()->ApplyStyle(obj, class_name);
+  }
+  return 0;
+}
+
+static auto set_theme(lua_State* L) -> int {
+  std::string class_name;
+  luaL_checktype(L, -1, LUA_TTABLE);
+  lua_pushnil(L);  /* first key */
+  while (lua_next(L, -2) != 0) {
+    /* uses 'key' (at index -2) and 'value' (at index -1) */
+    if (lua_type(L, -2) == LUA_TSTRING) {
+      class_name = lua_tostring(L, -2);
+    }
+    if (lua_type(L, -1) == LUA_TTABLE) {
+      // Nesting
+      lua_pushnil(L); // First key
+      while (lua_next(L, -2) != 0) {
+        // Nesting the second
+        int selector = -1;
+        lua_pushnil(L); // First key
+        while (lua_next(L, -2) != 0) {
+          int idx = lua_tointeger(L, -2);
+          if (idx == 1) {
+            // Selector
+            selector = lua_tointeger(L, -1);
+          } else if (idx == 2) {
+            // Style
+            lv_style_t* style = luavgl_to_style(L, -1);
+            if (style == NULL) {
+              ESP_LOGI("lua_theme", "Style was null or malformed");
+              return 0;
+            } else {
+              ui::themes::Theme::instance()->AddStyle(class_name, selector, style);
+            }
+          }
+          lua_pop(L, 1); 
+        }
+        lua_pop(L, 1); 
+      }
+    }
+    /* removes 'value'; keeps 'key' for next iteration */
+    lua_pop(L, 1);
+  }
+  return 0;
+}
+
+static const struct luaL_Reg kThemeFuncs[] = {{"set", set_theme}, {"set_style", set_style}, {NULL, NULL}};
+
+static auto lua_theme(lua_State* L) -> int {
+  luaL_newlib(L, kThemeFuncs);
+  return 1;
+}
+
+auto RegisterThemeModule(lua_State* L) -> void {
+  luaL_requiref(L, "theme", lua_theme, true);
+  lua_pop(L, 1);
+}
+
+}  // namespace lua

src/ui/include/themes.hpp

@@ -1,5 +1,8 @@
 #pragma once
 
+#include <string>
+#include <map>
+#include <vector>
 #include "lvgl.h"
 
 namespace ui {
@@ -19,31 +22,17 @@ class Theme {
  public:
   void Apply(void);
   void Callback(lv_obj_t* obj);
-  void ApplyStyle(lv_obj_t* obj, Style style);
+  void ApplyStyle(lv_obj_t* obj, std::string style_key);
+
+  void AddStyle(std::string key, int selector, lv_style_t* style);
 
   static auto instance() -> Theme*;
 
  private:
   Theme();
-
+  std::map<std::string, std::vector<std::pair<int, lv_style_t*>>> style_map;
-  lv_style_t base_style_;
-  lv_style_t base_focused_style_;
-
-  lv_style_t button_style_;
-  lv_style_t bar_style_;
-  lv_style_t dropdown_style_;
-  lv_style_t dropdown_list_style_;
-
-  lv_style_t slider_indicator_style_;
-  lv_style_t slider_knob_style_;
-  lv_style_t slider_knob_focused_style_;
-
-  lv_style_t switch_style_;
-  lv_style_t switch_indicator_style_;
-  lv_style_t switch_indicator_checked_style_;
-  lv_style_t switch_knob_style_;
-
   lv_theme_t theme_;
+
 };
 }  // namespace themes
 }  // namespace ui

src/ui/modal.cpp

@@ -41,8 +41,6 @@ Modal::Modal(Screen* host)
   lv_obj_set_style_bg_opa(root_, LV_OPA_COVER, 0);
   lv_obj_set_style_bg_color(root_, lv_color_white(), 0);
 
-  themes::Theme::instance()->ApplyStyle(root_, themes::Style::kPopup);
-
   host_->modal_group(group_);
 }
 

src/ui/screen.cpp

@@ -33,7 +33,7 @@ Screen::Screen()
   lv_obj_center(alert_);
 
   lv_obj_set_style_bg_opa(modal_content_, LV_OPA_TRANSP, 0);
-  lv_obj_set_style_bg_color(modal_content_, lv_color_black(), 0);
+  lv_obj_set_style_bg_opa(alert_, LV_OPA_TRANSP, 0);
 
   lv_obj_set_scrollbar_mode(root_, LV_SCROLLBAR_MODE_OFF);
   lv_obj_set_scrollbar_mode(content_, LV_SCROLLBAR_MODE_OFF);

src/ui/screen_lua.cpp

@@ -9,6 +9,7 @@
 #include "core/lv_obj_tree.h"
 #include "lua.h"
 #include "lua.hpp"
+#include "themes.hpp"
 
 #include "lua_thread.hpp"
 #include "luavgl.h"
@@ -16,7 +17,9 @@
 namespace ui {
 namespace screens {
 
-Lua::Lua() : s_(nullptr), obj_ref_() {}
+Lua::Lua() : s_(nullptr), obj_ref_() {
+  themes::Theme::instance()->ApplyStyle(root_, "root");
+}
 
 Lua::~Lua() {
   if (s_ && obj_ref_) {

src/ui/themes.cpp

@@ -19,84 +19,6 @@ static void theme_apply_cb(lv_theme_t* th, lv_obj_t* obj) {
 }
 
 Theme::Theme() {
-  lv_style_init(&base_style_);
-  lv_style_set_bg_opa(&base_style_, LV_OPA_TRANSP);
-  lv_style_set_text_font(&base_style_, &font_fusion_12);
-  lv_style_set_text_color(&base_style_, lv_color_black());
-
-  lv_style_init(&base_focused_style_);
-  lv_style_set_bg_opa(&base_focused_style_, LV_OPA_COVER);
-  lv_style_set_bg_color(&base_focused_style_,
-                        lv_palette_lighten(LV_PALETTE_BLUE, 5));
-
-  lv_style_init(&button_style_);
-  lv_style_set_pad_left(&button_style_, 2);
-  lv_style_set_pad_right(&button_style_, 2);
-  lv_style_set_pad_top(&button_style_, 1);
-  lv_style_set_pad_bottom(&button_style_, 1);
-  lv_style_set_bg_color(&button_style_, lv_color_white());
-  lv_style_set_radius(&button_style_, 5);
-
-  lv_style_init(&bar_style_);
-  lv_style_set_bg_opa(&bar_style_, LV_OPA_COVER);
-  lv_style_set_radius(&bar_style_, LV_RADIUS_CIRCLE);
-
-  lv_style_init(&slider_indicator_style_);
-  lv_style_set_radius(&slider_indicator_style_, LV_RADIUS_CIRCLE);
-  lv_style_set_bg_color(&slider_indicator_style_,
-                        lv_palette_main(LV_PALETTE_BLUE));
-
-  lv_style_init(&slider_knob_style_);
-  lv_style_set_radius(&slider_knob_style_, LV_RADIUS_CIRCLE);
-  lv_style_set_pad_all(&slider_knob_style_, 2);
-  lv_style_set_bg_color(&slider_knob_style_, lv_color_white());
-  lv_style_set_shadow_width(&slider_knob_style_, 5);
-  lv_style_set_shadow_opa(&slider_knob_style_, LV_OPA_COVER);
-
-  lv_style_init(&slider_knob_focused_style_);
-  lv_style_set_bg_color(&slider_knob_focused_style_,
-                        lv_palette_lighten(LV_PALETTE_BLUE, 4));
-
-  lv_style_init(&switch_style_);
-  lv_style_set_width(&switch_style_, 28);
-  lv_style_set_height(&switch_style_, 18);
-  lv_style_set_radius(&switch_style_, LV_RADIUS_CIRCLE);
-
-  lv_style_init(&switch_knob_style_);
-  lv_style_set_pad_all(&switch_knob_style_, -2);
-  lv_style_set_radius(&switch_knob_style_, LV_RADIUS_CIRCLE);
-  lv_style_set_bg_opa(&switch_knob_style_, LV_OPA_COVER);
-  lv_style_set_bg_color(&switch_knob_style_, lv_color_white());
-
-  lv_style_init(&slider_knob_focused_style_);
-  lv_style_set_bg_color(&slider_knob_focused_style_,
-                        lv_palette_lighten(LV_PALETTE_BLUE, 4));
-
-  lv_style_init(&switch_indicator_style_);
-  lv_style_set_radius(&switch_indicator_style_, LV_RADIUS_CIRCLE);
-  lv_style_set_bg_opa(&switch_indicator_style_, LV_OPA_COVER);
-  lv_style_set_bg_color(&switch_indicator_style_,
-                        lv_palette_main(LV_PALETTE_GREY));
-
-  lv_style_init(&switch_indicator_checked_style_);
-  lv_style_set_bg_color(&switch_indicator_checked_style_,
-                        lv_palette_main(LV_PALETTE_BLUE));
-
-  lv_style_init(&dropdown_style_);
-  lv_style_set_radius(&dropdown_style_, 2);
-  lv_style_set_pad_all(&dropdown_style_, 2);
-  lv_style_set_border_width(&dropdown_style_, 1);
-  lv_style_set_border_color(&dropdown_style_, lv_palette_main(LV_PALETTE_BLUE));
-  lv_style_set_border_side(&dropdown_style_, LV_BORDER_SIDE_FULL);
-
-  lv_style_init(&dropdown_list_style_);
-  lv_style_set_radius(&dropdown_list_style_, 2);
-  lv_style_set_border_width(&dropdown_list_style_, 1);
-  lv_style_set_border_color(&dropdown_list_style_, lv_palette_main(LV_PALETTE_BLUE_GREY));
-  lv_style_set_bg_opa(&dropdown_list_style_, LV_OPA_COVER);
-  lv_style_set_bg_color(&dropdown_list_style_, lv_color_white());
-  lv_style_set_pad_all(&dropdown_list_style_, 2);
-
   lv_theme_t* parent_theme = lv_disp_get_theme(NULL);
   theme_ = *parent_theme;
   theme_.user_data = this;
@@ -111,91 +33,46 @@ void Theme::Apply(void) {
 }
 
 void Theme::Callback(lv_obj_t* obj) {
-  lv_obj_add_style(obj, &base_style_, LV_PART_MAIN);
+  // Find and apply base styles
-  lv_obj_add_style(obj, &base_focused_style_, LV_PART_SELECTED);
+  if (auto search = style_map.find("base"); search != style_map.end()) {
-  lv_obj_add_style(obj, &base_focused_style_, LV_STATE_FOCUSED);
+      for (const auto& pair : search->second) {
+        lv_obj_add_style(obj, pair.second, pair.first);
+      }
+  }
 
+  // Determine class name
+  std::string class_name;
   if (lv_obj_check_type(obj, &lv_btn_class)) {
-    lv_obj_add_style(obj, &button_style_, LV_PART_MAIN);
+    class_name = "button";
+  } else if (lv_obj_check_type(obj, &lv_list_btn_class)) {
+    class_name = "listbutton";
   } else if (lv_obj_check_type(obj, &lv_bar_class)) {
-    lv_obj_add_style(obj, &bar_style_, LV_PART_MAIN);
+    class_name = "bar";
   } else if (lv_obj_check_type(obj, &lv_slider_class)) {
-    lv_obj_add_style(obj, &bar_style_, LV_PART_MAIN);
+    class_name = "slider";
-    lv_obj_add_style(obj, &slider_indicator_style_, LV_PART_INDICATOR);
-    lv_obj_add_style(obj, &slider_knob_style_, LV_PART_KNOB);
-    lv_obj_add_style(obj, &slider_knob_focused_style_, LV_STATE_FOCUSED);
   } else if (lv_obj_check_type(obj, &lv_switch_class)) {
-    lv_obj_add_style(obj, &switch_style_, LV_PART_MAIN);
+    class_name = "switch";
-    lv_obj_add_style(obj, &switch_indicator_style_, LV_PART_INDICATOR);
-    lv_obj_add_style(obj, &switch_indicator_checked_style_,
-                     LV_PART_INDICATOR | LV_STATE_CHECKED);
-    lv_obj_add_style(obj, &switch_knob_style_, LV_PART_KNOB);
   } else if (lv_obj_check_type(obj, &lv_dropdown_class)) {
-    lv_obj_add_style(obj, &dropdown_style_, LV_PART_MAIN);
+    class_name = "dropdown";
   } else if (lv_obj_check_type(obj, &lv_dropdownlist_class)) {
-    lv_obj_add_style(obj, &dropdown_list_style_, LV_PART_MAIN);
+    class_name = "dropdownlist";
   }
-}
-
-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);
+  // Apply all styles from class
-      lv_obj_set_style_pad_bottom(obj, 2, LV_PART_MAIN);
+  if (auto search = style_map.find(class_name); search != style_map.end()) {
-      lv_obj_set_style_pad_left(obj, 2, LV_PART_MAIN);
+      for (const auto& pair : search->second) {
-      lv_obj_set_style_pad_right(obj, 2, LV_PART_MAIN);
+        lv_obj_add_style(obj, pair.second, pair.first);
-      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) {
+void Theme::ApplyStyle(lv_obj_t* obj, std::string style_key) {
-        lv_obj_set_style_border_side(
+  if (auto search = style_map.find(style_key); search != style_map.end()) {
-            obj, LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_BOTTOM, LV_PART_MAIN);
+      for (const auto& pair : search->second) {
-      } else {
+        lv_obj_remove_style(obj, pair.second, pair.first);
-        lv_obj_set_style_border_side(obj, LV_BORDER_SIDE_BOTTOM, LV_PART_MAIN);
+        lv_obj_add_style(obj, pair.second, pair.first);
       }
-      break;
-    default:
-      break;
   }
 }
 
@@ -204,5 +81,15 @@ auto Theme::instance() -> Theme* {
   return &sTheme;
 }
 
+void Theme::AddStyle(std::string key, int selector, lv_style_t* style) {
+  style_map.try_emplace(key, std::vector<std::pair<int, lv_style_t*>>{});
+  if (auto search = style_map.find(key); search != style_map.end()) {
+    // Key exists
+    auto &vec = search->second;
+    // Add it to the list
+    vec.push_back(std::make_pair(selector, style));
+  }
+}
+
 }  // namespace themes
 }  // namespace ui

src/ui/ui_fsm.cpp

@@ -489,6 +489,7 @@ void Lua::entry() {
     sAlertTimer = xTimerCreate("ui_alerts", pdMS_TO_TICKS(1000), false, NULL,
                                alert_timer_callback);
     sAlertContainer = lv_obj_create(sCurrentScreen->alert());
+    lv_obj_set_style_bg_opa(sAlertContainer, LV_OPA_TRANSP, 0);
 
     auto& registry = lua::Registry::instance(*sServices);
     sLua = registry.uiThread();