Update icons and volume dialogue to use themes

lua/main.lua

@@ -6,6 +6,9 @@ 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 whenever the volume changes
@@ -20,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
@@ -52,9 +54,6 @@ GLOBAL_BINDINGS = {
   end),
 }
 
-local theme_dark = require("theme_dark")
-theme.set(theme_dark)
-
 local backstack = require("backstack")
 local main_menu = require("main_menu")
 

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 = "//lua/img/play.png",
   pause = "//lua/img/pause.png",
   next = "//lua/img/next.png",
-  next_disabled = "//lua/img/next_disabled.png",
   prev = "//lua/img/prev.png",
-  prev_disabled = "//lua/img/prev_disabled.png",
   shuffle = "//lua/img/shuffle.png",
-  shuffle_disabled = "//lua/img/shuffle_disabled.png",
+  repeat_src = "//lua/img/repeat.png", -- repeat is a reserved word
-  repeat_enabled = "//lua/img/repeat.png",
-  repeat_disabled = "//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/theme_dark.lua

@@ -5,6 +5,8 @@ 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 = {
@@ -28,6 +30,12 @@ local theme_dark = {
       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,
@@ -35,13 +43,14 @@ local theme_dark = {
       pad_top = 1,
       pad_bottom = 1,
       bg_color = background_color,
-      img_opa = 180,
+      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_opa = 255,
+      img_recolor_opa = 0,
     }},
   },
   listbutton = {
@@ -149,6 +158,19 @@ local theme_dark = {
       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

@@ -4,7 +4,9 @@ local font = require("font")
 local background_color = "#ffffff"
 local background_muted = "#fafafa"
 local text_color = "#000000"
-local highlight_color = "#CE93D8"
+local highlight_color = "#ce93d8"
+local icon_enabled_color = "#2c2c2c"
+local icon_disabled_color = "#999999"
 
 local theme_light = {
   base = {
@@ -26,6 +28,12 @@ local theme_light = {
       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,
@@ -33,11 +41,14 @@ local theme_light = {
       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 = {
@@ -65,7 +76,7 @@ local theme_light = {
     {lvgl.PART.KNOB, lvgl.Style {
       radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
       pad_all = 2,
-      bg_color = background_color,
+      bg_color = background_muted,
       shadow_width = 5,
       shadow_opa = lvgl.OPA(100)
     }},
@@ -85,12 +96,14 @@ local theme_light = {
       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.MAIN | lvgl.STATE.CHECKED, lvgl.Style {
+    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
       bg_color = highlight_color,
     }},
     {lvgl.PART.KNOB, lvgl.Style {
@@ -129,6 +142,12 @@ local theme_light = {
       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,
@@ -137,6 +156,19 @@ local theme_light = {
       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