WIP Lua Theming- style classes

5 files changed, 240 insertions, 96 deletions

diff --git a/lua/browser.lua b/lua/browser.lua
index e174a05d..055c8641 100644
--- a/lua/browser.lua
+++ b/lua/browser.lua
@@ -6,6 +6,7 @@ local queue = require("queue")
 local playing = require("playing")
 local styles = require("styles")
 local playback = require("playback")
+local theme = require("theme")
 
 local browser = {}
 
@@ -43,9 +44,10 @@ function browser.create(opts)
       pad_right = 4,
       pad_bottom = 2,
       bg_opa = lvgl.OPA(100),
-      bg_color = "#fafafa",
       scrollbar_mode = lvgl.SCROLLBAR_MODE.OFF,
     }
+    theme.set_style(header, "header")
+
 
     header:Label {
       text = opts.breadcrumb,
diff --git a/lua/main.lua b/lua/main.lua
index 6cdef17d..f2533387 100644
--- a/lua/main.lua
+++ b/lua/main.lua
@@ -35,97 +35,8 @@ GLOBAL_BINDINGS = {
   end),
 }
 
-local lvgl = require("lvgl")
-local my_theme = {
-  base = {
-    {lvgl.PART.MAIN, lvgl.Style {
-      bg_opa = lvgl.OPA(0),
-      text_font = font.fusion_12,
-      text_color = "#000000",
-    }},
-    {lvgl.STATE.FOCUSED, lvgl.Style {
-      bg_opa = lvgl.OPA(100),
-      bg_color = "#E3F2FD",
-    }},
-  },
-  button = {
-    {lvgl.PART.MAIN, lvgl.Style {
-      pad_left = 2,
-      pad_right = 2,
-      pad_top = 1,
-      pad_bottom = 1,
-      bg_color = "#ffffff",
-      radius = 5,
-    }},
-  },
-  bar = {
-    {lvgl.PART.MAIN, lvgl.Style {
-      bg_opa = lvgl.OPA(100),
-      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
-    }},
-  },
-  slider = {
-    {lvgl.PART.MAIN, lvgl.Style {
-      bg_opa = lvgl.OPA(100),
-      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
-    }},
-    {lvgl.PART.INDICATOR, lvgl.Style {
-      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
-      bg_color = "#2196F3",
-    }},
-    {lvgl.PART.KNOB, lvgl.Style {
-      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
-      pad_all = 2,
-      bg_color = "#ffffff",
-      shadow_width = 5,
-      shadow_opa = lvgl.OPA(100)
-    }},
-    {lvgl.STATE.FOCUSED, lvgl.Style {
-      bg_color = "#BBDEFB",
-    }},
-  },
-  switch = {
-    {lvgl.PART.MAIN, lvgl.Style {
-      bg_opa = lvgl.OPA(100),
-      width = 28,
-      height = 18,
-      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
-    }},
-    {lvgl.PART.INDICATOR, lvgl.Style {
-      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
-      bg_color = "#9E9E9E",
-    }},
-    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
-      bg_color = "#2196F3",
-    }},
-    {lvgl.PART.KNOB, lvgl.Style {
-      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
-      pad_all = 2,
-      bg_opa = lvgl.OPA(100),
-      bg_color = "#ffffff",
-    }},
-  },
-  dropdown = {
-    {lvgl.PART.MAIN, lvgl.Style{
-      radius = 2, 
-      pad_all = 2,
-      border_width = 1,
-      border_color = "#2196F3",
-      border_side = 15, -- LV_BORDER_SIDE_FULL
-    }}
-  },
-  dropdownlist = {
-    {lvgl.PART.MAIN, lvgl.Style{
-      radius = 2, 
-      pad_all = 2,
-      border_width = 1,
-      border_color = "#607D8B",
-      bg_opa = lvgl.OPA(100),
-      bg_color = "#ffffff"
-    }}
-  }
-}
-theme.set(my_theme)
+local theme_light = require("theme_dark")
+theme.set(theme_light)
 
 local backstack = require("backstack")
 local main_menu = require("main_menu")
diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua
new file mode 100644
index 00000000..5c91ea1e
--- /dev/null
+++ b/lua/theme_dark.lua
@@ -0,0 +1,127 @@
+local lvgl = require("lvgl")
+local font = require("font")
+
+local background_color = "#242933"
+local background_muted = "#353c4b"
+local text_color = "#fefefe"
+local highlight_color = "#ff0077"
+
+local theme_dark = {
+  base = {
+    {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
+    }},
+  },
+  header = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_muted,
+    }},
+  },
+  button = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      pad_left = 2,
+      pad_right = 2,
+      pad_top = 1,
+      pad_bottom = 1,
+      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 {
+      bg_opa = lvgl.OPA(100),
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+  },
+  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 {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = highlight_color,
+    }},
+    {lvgl.PART.KNOB, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      pad_all = 2,
+      bg_color = background_color,
+      shadow_width = 5,
+      shadow_opa = lvgl.OPA(100)
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  switch = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      width = 28,
+      height = 12,
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = background_muted,
+    }},
+    {lvgl.PART.INDICATOR | 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 = 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
+    }},
+    {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 = text_color,
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_color
+    }},
+  }
+}
+
+return theme_dark
diff --git a/lua/theme_light.lua b/lua/theme_light.lua
new file mode 100644
index 00000000..637861d9
--- /dev/null
+++ b/lua/theme_light.lua
@@ -0,0 +1,106 @@
+local lvgl = require("lvgl")
+local font = require("font")
+
+local background_color = "#FFFFFF"
+local background_muted = "#FFFFFF"
+local text_color = "#000000"
+local highlight_color = "#E3F2FD"
+
+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
+    }},
+  },
+  button = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      pad_left = 2,
+      pad_right = 2,
+      pad_top = 1,
+      pad_bottom = 1,
+      bg_color = background_color,
+      radius = 5,
+    }},
+  },
+  bar = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+  },
+  slider = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+    }},
+    {lvgl.PART.INDICATOR, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = highlight_color,
+    }},
+    {lvgl.PART.KNOB, lvgl.Style {
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      pad_all = 2,
+      bg_color = background_color,
+      shadow_width = 5,
+      shadow_opa = lvgl.OPA(100)
+    }},
+    {lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  switch = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      width = 28,
+      height = 18,
+      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 {
+      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,
+    }},
+  },
+  dropdown = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      border_color = "#2196F3",
+      border_side = 15, -- LV_BORDER_SIDE_FULL
+    }}
+  },
+  dropdownlist = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      border_color = "#607D8B",
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_color
+    }}
+  }
+}
+
+return theme_light
diff --git a/lua/widgets.lua b/lua/widgets.lua
index 8253041b..15212ded 100644
--- a/lua/widgets.lua
+++ b/lua/widgets.lua
@@ -5,6 +5,7 @@ local font = require("font")
 local backstack = require("backstack")
 local styles = require("styles")
 local database = require("database")
+local theme = require("theme")
 
 local widgets = {}
 
@@ -66,10 +67,7 @@ function widgets.StatusBar(parent, opts)
   }
 
   if not opts.transparent_bg then
-    status_bar.root:set {
-      bg_opa = lvgl.OPA(100),
-      bg_color = "#fafafa",
-    }
+    theme.set_style(status_bar.root, "header");
   end
 
   if opts.back_cb then