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

High contrast theme + Icon Improvements (#100)

Browse Source 
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>
custom
ailurux 7 months ago committed by cooljqln
parent dacf3efc45
commit 45937ac648
5 changed files with 274 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. BIN
      lua/img/pausecirc.png
  2. BIN
      lua/img/playcirc.png
  3. BIN
      lua/img/settings.png
  4. 1
      lua/settings.lua
  5. 273
      lua/theme_hicon.lua

BIN
lua/img/pausecirc.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
lua/img/playcirc.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.9 KiB

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
lua/img/settings.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.8 KiB

After

Width:  |  Height:  |  Size: 12 KiB

1
lua/settings.lua
Unescape View File

@ -313,6 +313,7 @@ local ThemeSettings = SettingsScreen:new {
local themeOptions = {} local themeOptions = {}
themeOptions["Dark"] = "/lua/theme_dark.lua" themeOptions["Dark"] = "/lua/theme_dark.lua"
themeOptions["Light"] = "/lua/theme_light.lua" themeOptions["Light"] = "/lua/theme_light.lua"
themeOptions["High Contrast"] = "/lua/theme_hicon.lua"
-- Parse theme directory for more themes -- Parse theme directory for more themes
local theme_dir_iter = filesystem.iterator("/.themes/") local theme_dir_iter = filesystem.iterator("/.themes/")

273
lua/theme_hicon.lua
Unescape View File

@ -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
Write Preview
Loading…
Cancel
Save