MightyPork/tangara-fw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better styling for settings pages + dropdown menus

Browse Source
This commit is contained in:
ailurux
2024-03-18 13:11:13 +11:00
parent 1133d46215
commit f1599c237c
5 changed files with 92 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lua/theme_light.lua
+54 -18
View File
@@ -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