High contrast theme + Icon Improvements (#100)
Updated settings icon, rounded the circular play/pause icons, and addition of a new high contrast theme. Would be good to get feedback on the high contrast theme at this stage, as my intention is to use it as the basis for other 2-colour themes. One issue I'm aware of is the charge indicator when recoloured to black is not very legible on the black battery icon. I am planning on adding an additonal outline image that can be recoloured to the background colour to make it stand out more. Happy to fix that in a later PR or I can add it now but it will take a bit of work. Reviewed-on: https://codeberg.org/cool-tech-zone/tangara-fw/pulls/100 Co-authored-by: ailurux <ailuruxx@gmail.com> Co-committed-by: ailurux <ailuruxx@gmail.com>
This commit is contained in:
ailurux
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 12 KiB |
@@ -313,6 +313,7 @@ local ThemeSettings = SettingsScreen:new {
|
||||
local themeOptions = {}
|
||||
themeOptions["Dark"] = "/lua/theme_dark.lua"
|
||||
themeOptions["Light"] = "/lua/theme_light.lua"
|
||||
themeOptions["High Contrast"] = "/lua/theme_hicon.lua"
|
||||
|
||||
-- Parse theme directory for more themes
|
||||
local theme_dir_iter = filesystem.iterator("/.themes/")
|
||||
|
||||
@@ -0,0 +1,273 @@
|
||||
local lvgl = require("lvgl")
|
||||
local font = require("font")
|
||||
|
||||
-- local background_color = "#000000"
|
||||
-- local text_color = "#33b5e5"
|
||||
|
||||
local text_color = "#000000"
|
||||
local background_color = "#FFFFFF"
|
||||
|
||||
local theme_hicon = {
|
||||
base = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(0),
|
||||
text_font = font.fusion_12,
|
||||
}},
|
||||
{lvgl.PART.SCROLLBAR, lvgl.Style {
|
||||
bg_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 = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = background_color,
|
||||
}},
|
||||
},
|
||||
pop_up = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = background_color,
|
||||
border_color = text_color,
|
||||
border_width = 1,
|
||||
}},
|
||||
},
|
||||
button = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
pad_left = 2,
|
||||
pad_right = 2,
|
||||
pad_top = 1,
|
||||
pad_bottom = 1,
|
||||
bg_color = background_color,
|
||||
image_recolor_opa = 255,
|
||||
image_recolor = text_color,
|
||||
radius = 5,
|
||||
border_color = text_color,
|
||||
border_width = 1,
|
||||
}},
|
||||
{lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = text_color,
|
||||
image_recolor_opa = 255,
|
||||
image_recolor = background_color,
|
||||
text_color = background_color,
|
||||
}},
|
||||
},
|
||||
listbutton = {
|
||||
{lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = text_color,
|
||||
text_color = background_color,
|
||||
}},
|
||||
},
|
||||
bar = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = background_color,
|
||||
border_color = text_color,
|
||||
border_width = 1,
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
}},
|
||||
{lvgl.PART.INDICATOR, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = text_color,
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
}},
|
||||
},
|
||||
slider = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = background_color,
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
border_color = text_color,
|
||||
border_width = 1,
|
||||
height = 8,
|
||||
}},
|
||||
{lvgl.PART.INDICATOR, lvgl.Style {
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
bg_color = text_color,
|
||||
}},
|
||||
{lvgl.PART.KNOB, lvgl.Style {
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
bg_color = background_color,
|
||||
border_color = text_color,
|
||||
border_width = 1,
|
||||
}},
|
||||
{lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
|
||||
bg_color = background_color,
|
||||
}},
|
||||
{lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
|
||||
bg_color = text_color,
|
||||
}},
|
||||
{lvgl.PART.KNOB | lvgl.STATE.EDITED, lvgl.Style {
|
||||
pad_all = 2,
|
||||
}},
|
||||
{lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
|
||||
bg_color = text_color,
|
||||
}},
|
||||
},
|
||||
scrubber = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = background_color,
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
border_color = text_color,
|
||||
border_width = 1,
|
||||
}},
|
||||
{lvgl.PART.INDICATOR, lvgl.Style {
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
bg_color = text_color,
|
||||
}},
|
||||
{lvgl.PART.KNOB, lvgl.Style {
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
bg_color = background_color,
|
||||
border_color = text_color,
|
||||
border_width = 1,
|
||||
}},
|
||||
{lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
|
||||
bg_color = background_color,
|
||||
}},
|
||||
{lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
|
||||
bg_color = text_color,
|
||||
pad_all = 1,
|
||||
}},
|
||||
{lvgl.PART.KNOB | lvgl.STATE.EDITED, lvgl.Style {
|
||||
pad_all = 4,
|
||||
}},
|
||||
{lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
|
||||
bg_color = text_color,
|
||||
}},
|
||||
},
|
||||
switch = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
width = 18,
|
||||
height = 10,
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
bg_color = background_color,
|
||||
border_color = text_color,
|
||||
border_width = 1,
|
||||
}},
|
||||
{lvgl.PART.INDICATOR, lvgl.Style {
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
bg_color = background_color,
|
||||
}},
|
||||
{lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = text_color,
|
||||
}},
|
||||
{lvgl.PART.KNOB, lvgl.Style {
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
bg_opa = lvgl.OPA(100),
|
||||
bg_color = background_color,
|
||||
border_color = text_color,
|
||||
border_width = 1,
|
||||
}},
|
||||
{lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
|
||||
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
|
||||
bg_color = background_color,
|
||||
bg_opa = lvgl.OPA(100),
|
||||
}},
|
||||
{lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
|
||||
border_color = text_color,
|
||||
bg_color = text_color,
|
||||
text_color = background_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
|
||||
}},
|
||||
{lvgl.PART.SELECTED | lvgl.STATE.CHECKED, lvgl.Style {
|
||||
bg_color = text_color,
|
||||
text_color = background_color,
|
||||
}},
|
||||
},
|
||||
database_indicator = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
image_recolor_opa = 255,
|
||||
image_recolor = text_color,
|
||||
}},
|
||||
},
|
||||
settings_title = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
pad_top = 2,
|
||||
pad_bottom = 4,
|
||||
text_font = font.fusion_10,
|
||||
text_color = text_color,
|
||||
}},
|
||||
},
|
||||
icon_disabled = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
image_recolor_opa = 255,
|
||||
image_recolor = text_color,
|
||||
}},
|
||||
},
|
||||
icon_enabled = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
image_recolor_opa = 255,
|
||||
image_recolor = text_color,
|
||||
}},
|
||||
},
|
||||
now_playing = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
bg_opa = lvgl.OPA(100),
|
||||
radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
|
||||
border_width = 1,
|
||||
border_color = text_color,
|
||||
border_side = 15, -- LV_BORDER_SIDE_FULL
|
||||
}},
|
||||
},
|
||||
menu_icon = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
pad_all = 4,
|
||||
radius = 4
|
||||
}},
|
||||
},
|
||||
battery = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
image_recolor_opa = 255,
|
||||
image_recolor = text_color,
|
||||
}},
|
||||
},
|
||||
battery_0 = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
image_recolor_opa = 255,
|
||||
image_recolor = text_color,
|
||||
}},
|
||||
},
|
||||
battery_charging = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
image_recolor_opa = 255,
|
||||
image_recolor = text_color,
|
||||
}},
|
||||
},
|
||||
battery_charge_icon = {
|
||||
{lvgl.PART.MAIN, lvgl.Style {
|
||||
image_recolor_opa = 200,
|
||||
image_recolor = text_color,
|
||||
}},
|
||||
},
|
||||
}
|
||||
|
||||
return theme_hicon
|
||||
Reference in New Issue
Block a user