diff --git a/lua/img/enqueue.png b/lua/img/enqueue.png index 9f720969..b5136a77 100644 Binary files a/lua/img/enqueue.png and b/lua/img/enqueue.png differ diff --git a/lua/img/next.png b/lua/img/next.png index 1b22a509..1f6f044b 100644 Binary files a/lua/img/next.png and b/lua/img/next.png differ diff --git a/lua/img/next_disabled.png b/lua/img/next_disabled.png deleted file mode 100644 index c8ff06b2..00000000 Binary files a/lua/img/next_disabled.png and /dev/null differ diff --git a/lua/img/pause.png b/lua/img/pause.png index 29fa4b90..e7011821 100644 Binary files a/lua/img/pause.png and b/lua/img/pause.png differ diff --git a/lua/img/play.png b/lua/img/play.png index cc10cab5..a3b8a5af 100644 Binary files a/lua/img/play.png and b/lua/img/play.png differ diff --git a/lua/img/play_small.png b/lua/img/play_small.png index 3fc7032e..ac29aa98 100644 Binary files a/lua/img/play_small.png and b/lua/img/play_small.png differ diff --git a/lua/img/prev.png b/lua/img/prev.png index f17e6162..b445c75a 100644 Binary files a/lua/img/prev.png and b/lua/img/prev.png differ diff --git a/lua/img/prev_disabled.png b/lua/img/prev_disabled.png deleted file mode 100644 index accebe23..00000000 Binary files a/lua/img/prev_disabled.png and /dev/null differ diff --git a/lua/img/repeat.png b/lua/img/repeat.png index 9a4da7fd..40a7564e 100644 Binary files a/lua/img/repeat.png and b/lua/img/repeat.png differ diff --git a/lua/img/repeat_disabled.png b/lua/img/repeat_disabled.png deleted file mode 100644 index 20b6ab59..00000000 Binary files a/lua/img/repeat_disabled.png and /dev/null differ diff --git a/lua/img/shuffle.png b/lua/img/shuffle.png index b54e359d..4a65635b 100644 Binary files a/lua/img/shuffle.png and b/lua/img/shuffle.png differ diff --git a/lua/img/shuffle_disabled.png b/lua/img/shuffle_disabled.png deleted file mode 100644 index 912d0e95..00000000 Binary files a/lua/img/shuffle_disabled.png and /dev/null differ diff --git a/lua/main.lua b/lua/main.lua index 1a605dab..dc73c964 100644 --- a/lua/main.lua +++ b/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") diff --git a/lua/playing.lua b/lua/playing.lua index 947bdec9..a1ba2cc1 100644 --- a/lua/playing.lua +++ b/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_enabled = "//lua/img/repeat.png", - repeat_disabled = "//lua/img/repeat_disabled.png", + repeat_src = "//lua/img/repeat.png", -- repeat is a reserved word } 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( - pos < queue.size:get() and img.next or img.next_disabled + theme.set_style( + 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 - shuffle_img:set_src(img.shuffle) - else - shuffle_img:set_src(img.shuffle_disabled) - end + theme.set_style(shuffle_img, shuffling and icon_enabled_class or icon_disabled_class) end), queue.repeat_track:bind(function(en) - if en then - repeat_img:set_src(img.repeat_enabled) - else - repeat_img:set_src(img.repeat_disabled) - end + theme.set_style(repeat_img, en and icon_enabled_class or icon_disabled_class) end), queue.size:bind(function(num) if not num then return end diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua index 8c1da65c..be5feeaa 100644 --- a/lua/theme_dark.lua +++ b/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 diff --git a/lua/theme_light.lua b/lua/theme_light.lua index 82abd368..e0a4468f 100644 --- a/lua/theme_light.lua +++ b/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