Better styling for settings pages + dropdown menus

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")

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 {
+  theme.set_style(menu.content:Label {
-    text = "Maximum volume limit",
+    text = "Maxiumum volume limit",
-  }:add_style(styles.settings_title)
+  }, "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)

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

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

lua/theme_light.lua

@@ -1,28 +1,29 @@
 local lvgl = require("lvgl")
 local font = require("font")
 
-local background_color = "#FFFFFF"
+local background_color = "#ffffff"
-local background_muted = "#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