WIP Lua Theming- style classes

2024-03-10 13:20:17 +11:00
parent 20c2816a7b
commit 1133d46215
10 changed files with 264 additions and 170 deletions
@@ -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