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_dark.lua | 127 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 127 insertions(+) create mode 100644 lua/theme_dark.lua (limited to 'lua/theme_dark.lua') diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua new file mode 100644 index 00000000..5c91ea1e --- /dev/null +++ b/lua/theme_dark.lua @@ -0,0 +1,127 @@ +local lvgl = require("lvgl") +local font = require("font") + +local background_color = "#242933" +local background_muted = "#353c4b" +local text_color = "#fefefe" +local highlight_color = "#ff0077" + +local theme_dark = { + base = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(0), + text_font = font.fusion_12, + text_color = text_color, + }}, + }, + root = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + bg_color = background_color, -- Root background color + }}, + }, + header = { + {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, + 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 { + 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_color, + 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, + }}, + }, + switch = { + {lvgl.PART.MAIN, lvgl.Style { + bg_opa = lvgl.OPA(100), + width = 28, + height = 12, + radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff + }}, + {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = background_muted, + }}, + {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 = text_color, + }}, + }, + dropdown = { + {lvgl.PART.MAIN, lvgl.Style{ + radius = 2, + pad_all = 2, + border_width = 1, + border_color = text_color, + border_side = 15, -- LV_BORDER_SIDE_FULL + }}, + {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 = text_color, + bg_opa = lvgl.OPA(100), + bg_color = background_color + }}, + } +} + +return theme_dark -- 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_dark.lua | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) (limited to 'lua/theme_dark.lua') diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua index 5c91ea1e..e5082ff1 100644 --- a/lua/theme_dark.lua +++ b/lua/theme_dark.lua @@ -1,9 +1,9 @@ local lvgl = require("lvgl") local font = require("font") -local background_color = "#242933" +local background_color = "#1c1c1c" local background_muted = "#353c4b" -local text_color = "#fefefe" +local text_color = "#eeeeee" local highlight_color = "#ff0077" local theme_dark = { @@ -11,13 +11,13 @@ local theme_dark = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(0), text_font = font.fusion_12, - text_color = text_color, }}, }, root = { {lvgl.PART.MAIN, lvgl.Style { bg_opa = lvgl.OPA(100), bg_color = background_color, -- Root background color + text_color = text_color }}, }, header = { @@ -121,7 +121,18 @@ local theme_dark = { 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_dark -- cgit v1.2.3 From 170c23b832eed6dad2b118e50164464cc93e5c4c Mon Sep 17 00:00:00 2001 From: ailurux Date: Wed, 20 Mar 2024 11:47:58 +1100 Subject: Fairyfloss dark theme palette test --- lua/theme_dark.lua | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) (limited to 'lua/theme_dark.lua') diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua index e5082ff1..21cfe76c 100644 --- a/lua/theme_dark.lua +++ b/lua/theme_dark.lua @@ -1,10 +1,10 @@ local lvgl = require("lvgl") local font = require("font") -local background_color = "#1c1c1c" -local background_muted = "#353c4b" +local background_color = "#5a5474" +local background_muted = "#464258" local text_color = "#eeeeee" -local highlight_color = "#ff0077" +local highlight_color = "#9773d3" local theme_dark = { base = { @@ -65,7 +65,7 @@ local theme_dark = { {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) }}, @@ -75,16 +75,18 @@ local theme_dark = { {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 = 12, + height = 8, radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff - }}, - {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_color = background_muted, + border_color = highlight_color, }}, {lvgl.PART.INDICATOR, lvgl.Style { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff @@ -97,7 +99,10 @@ local theme_dark = { radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff pad_all = 2, bg_opa = lvgl.OPA(100), - bg_color = text_color, + bg_color = background_muted, + }}, + {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style { + bg_color = highlight_color, }}, }, dropdown = { @@ -105,8 +110,9 @@ local theme_dark = { radius = 2, pad_all = 2, border_width = 1, - border_color = text_color, + 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, @@ -117,7 +123,7 @@ local theme_dark = { radius = 2, pad_all = 2, border_width = 1, - border_color = text_color, + border_color = highlight_color, bg_opa = lvgl.OPA(100), bg_color = background_color }}, -- cgit v1.2.3 From f29d31d01c26ee0cb175e44ac4096e5904c282cd Mon Sep 17 00:00:00 2001 From: ailurux Date: Wed, 20 Mar 2024 15:30:32 +1100 Subject: Image recolouring for database indicator --- lua/theme_dark.lua | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'lua/theme_dark.lua') diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua index 21cfe76c..8c1da65c 100644 --- a/lua/theme_dark.lua +++ b/lua/theme_dark.lua @@ -17,6 +17,8 @@ local theme_dark = { {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 }}, }, @@ -33,11 +35,13 @@ local theme_dark = { pad_top = 1, pad_bottom = 1, bg_color = background_color, + img_opa = 180, radius = 5, }}, {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style { bg_opa = lvgl.OPA(100), bg_color = highlight_color, + img_opa = 255, }}, }, listbutton = { @@ -131,6 +135,12 @@ local theme_dark = { 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, -- 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_dark.lua | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) (limited to 'lua/theme_dark.lua') 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 -- cgit v1.2.3