summaryrefslogtreecommitdiff
path: root/lua
diff options
context:
space:
mode:
Diffstat (limited to 'lua')
-rw-r--r--lua/browser.lua4
-rw-r--r--lua/main.lua93
-rw-r--r--lua/theme_dark.lua127
-rw-r--r--lua/theme_light.lua106
-rw-r--r--lua/widgets.lua6
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