diff --git a/lua/main.lua b/lua/main.lua index f2533387..f7dfb2c9 100644 --- a/lua/main.lua +++ b/lua/main.lua @@ -35,7 +35,7 @@ GLOBAL_BINDINGS = { end), } -local theme_light = require("theme_dark") +local theme_light = require("theme_light") theme.set(theme_light) local backstack = require("backstack") diff --git a/lua/settings.lua b/lua/settings.lua index cb726a2a..aac5ce9b 100644 --- a/lua/settings.lua +++ b/lua/settings.lua @@ -6,6 +6,7 @@ local volume = require("volume") local display = require("display") local controls = require("controls") local bluetooth = require("bluetooth") +local theme = require("theme") local database = require("database") local settings = {} @@ -23,7 +24,7 @@ local function SettingsScreen(title) align_items = "flex-start", align_content = "flex-start", }, - w = lvgl.PCT(100), + w = lvgl.PCT(90), flex_grow = 1, pad_left = 4, pad_right = 4, @@ -52,10 +53,10 @@ function settings.bluetooth() bluetooth.enabled:set(enabled) end) - menu.content:Label { + theme.set_style(menu.content:Label { text = "Paired Device", pad_bottom = 1, - }:add_style(styles.settings_title) + }, "settings_title") local paired_container = menu.content:Object { flex = { @@ -78,10 +79,10 @@ function settings.bluetooth() bluetooth.paired_device:set() end) - menu.content:Label { + theme.set_style(menu.content:Label { text = "Nearby Devices", pad_bottom = 1, - }:add_style(styles.settings_title) + }, "settings_title") local devices = menu.content:List { w = lvgl.PCT(100), @@ -119,9 +120,9 @@ end function settings.headphones() local menu = SettingsScreen("Headphones") - menu.content:Label { - text = "Maximum volume limit", - }:add_style(styles.settings_title) + theme.set_style(menu.content:Label { + text = "Maxiumum volume limit", + }, "settings_title") local volume_chooser = menu.content:Dropdown { options = "Line Level (-10 dB)\nCD Level (+6 dB)\nMaximum (+10dB)", @@ -134,9 +135,9 @@ function settings.headphones() volume.limit_db:set(limits[selection]) end) - menu.content:Label { + theme.set_style(menu.content:Label { text = "Left/Right balance", - }:add_style(styles.settings_title) + }, "settings_title") local balance = menu.content:Slider { w = lvgl.PCT(100), @@ -191,10 +192,11 @@ function settings.display() }, w = lvgl.PCT(100), h = lvgl.SIZE_CONTENT, + } brightness_title:Label { text = "Brightness", flex_grow = 1 } local brightness_pct = brightness_title:Label {} - brightness_pct:add_style(styles.settings_title) + theme.set_style(brightness_pct, "settings_title") local brightness = menu.content:Slider { w = lvgl.PCT(100), @@ -218,9 +220,9 @@ end function settings.input() local menu = SettingsScreen("Input Method") - menu.content:Label { + theme.set_style(menu.content:Label { text = "Control scheme", - }:add_style(styles.settings_title) + }, "settings_title") local schemes = controls.schemes() local option_to_scheme = {} @@ -256,9 +258,9 @@ function settings.input() controls.scheme:set(scheme) end) - menu.content:Label { + theme.set_style(menu.content:Label { text = "Scroll Sensitivity", - }:add_style(styles.settings_title) + }, "settings_title") local slider_scale = 4; -- Power steering local sensitivity = menu.content:Slider { @@ -321,7 +323,11 @@ function settings.root() } local function section(name) - menu.list:add_text(name):add_style(styles.list_heading) + local elem = menu.list:Label { + text = name, + pad_left = 4, + } + theme.set_style(elem, "settings_title") end local function submenu(name, fn) diff --git a/lua/styles.lua b/lua/styles.lua index 76ecad2a..fd45263e 100644 --- a/lua/styles.lua +++ b/lua/styles.lua @@ -13,11 +13,6 @@ local styles = { text_font = font.fusion_10, text_align = lvgl.ALIGN.CENTER, }, - settings_title = lvgl.Style { - pad_top = 2, - pad_bottom = 4, - text_font = font.fusion_10, - } } return styles 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 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