From 1133d4621508b7ec6bac4ab8731f3493066ceeee Mon Sep 17 00:00:00 2001 From: ailurux Date: Sun, 10 Mar 2024 13:20:17 +1100 Subject: WIP Lua Theming- style classes --- lua/theme_light.lua | 106 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 lua/theme_light.lua (limited to 'lua/theme_light.lua') diff --git a/lua/theme_light.lua b/lua/theme_light.lua new file mode 100644 index 00000000..637861d9 --- /dev/null +++ b/lua/theme_light.lua @@ -0,0 +1,106 @@ +local lvgl = require("lvgl") +local font = require("font") + +local background_color = "#FFFFFF" +local background_muted = "#FFFFFF" +local text_color = "#000000" +local highlight_color = "#E3F2FD" + +local theme_light = { + base = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(0), + bg_color = background_color, -- Root background color + text_font = font.fusion_12, + text_color = text_color, + }}, + {lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, + }, + root = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_color, -- Root background color + }}, + }, + button = { + {lvgl.PART.MAIN, lvgl.Style { + pad_left = 2, + pad_right = 2, + pad_top = 1, + pad_bottom = 1, + bg_color = background_color, + 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 = highlight_color, + }}, + {lvgl.PART.KNOB, lvgl.Style { + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + pad_all = 2, + bg_color = background_color, + shadow_width = 5, + shadow_opa = lvgl.OPA(100) + }}, + {lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, + }}, + }, + switch = { + {lvgl.PART.MAIN, lvgl.Style { + 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 = 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_color, + }}, + }, + 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 = background_color + }} + } +} + +return theme_light -- cgit v1.2.3 From f1599c237c36f08e96dd5d1ab98bc04e35e1ade1 Mon Sep 17 00:00:00 2001 From: ailurux Date: Mon, 18 Mar 2024 13:11:13 +1100 Subject: Better styling for settings pages + dropdown menus --- lua/theme_light.lua | 72 +++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 54 insertions(+), 18 deletions(-) (limited to 'lua/theme_light.lua') diff --git a/lua/theme_light.lua b/lua/theme_light.lua index 637861d9..82abd368 100644 --- a/lua/theme_light.lua +++ b/lua/theme_light.lua @@ -1,28 +1,29 @@ local lvgl = require("lvgl") local font = require("font") -local background_color = "#FFFFFF" -local background_muted = "#FFFFFF" +local background_color = "#ffffff" +local background_muted = "#fafafa" local text_color = "#000000" -local highlight_color = "#E3F2FD" +local highlight_color = "#CE93D8" local theme_light = { base = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(0), - bg_color = background_color, -- Root background color text_font = font.fusion_12, - text_color = text_color, - }}, - {lvgl.STATE.FOCUSED, lvgl.Style { - bg_opa = lvgl.OPA(100), - bg_color = highlight_color, }}, }, 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, }}, }, button = { @@ -34,6 +35,16 @@ local theme_light = { bg_color = background_color, radius = 5, }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, + }, + listbutton = { + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = highlight_color, + }}, }, bar = { {lvgl.PART.MAIN, lvgl.Style { @@ -44,6 +55,7 @@ local theme_light = { 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 { @@ -57,7 +69,13 @@ local theme_light = { shadow_width = 5, shadow_opa = lvgl.OPA(100) }}, - {lvgl.STATE.FOCUSED, lvgl.Style { + {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, }}, }, @@ -65,21 +83,24 @@ local theme_light = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), width = 28, - height = 18, + height = 8, radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff }}, {lvgl.PART.INDICATOR, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff bg_color = background_muted, }}, - {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style { + {lvgl.PART.MAIN | 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_color, + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, }}, }, dropdown = { @@ -87,20 +108,35 @@ local theme_light = { radius = 2, pad_all = 2, border_width = 1, - border_color = "#2196F3", + 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 = "#607D8B", + 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, + }}, + }, + settings_title = { + {lvgl.PART.MAIN, lvgl.Style { + pad_top = 2, + pad_bottom = 4, + text_font = font.fusion_10, + text_color = highlight_color, + }}, + }, } return theme_light -- cgit v1.2.3 From 489fbceb2b5a623ea502ab647f023d2e2e566121 Mon Sep 17 00:00:00 2001 From: ailurux Date: Wed, 27 Mar 2024 16:07:22 +1100 Subject: Update icons and volume dialogue to use themes --- lua/theme_light.lua | 38 +++++++++++++++++++++++++++++++++++--- 1 file changed, 35 insertions(+), 3 deletions(-) (limited to 'lua/theme_light.lua') 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 -- cgit v1.2.3