Merge pull request 'themes' (#58) from themes into main

Reviewed-on: https://codeberg.org/cool-tech-zone/tangara-fw/pulls/58
Reviewed-by: cooljqln <cooljqln@noreply.codeberg.org>

23 files changed, 454 insertions, 100 deletions

diff --git a/lua/browser.lua b/lua/browser.lua
index 5577d4df..924381ea 100644
--- a/lua/browser.lua
+++ b/lua/browser.lua
@@ -4,8 +4,9 @@ local backstack = require("backstack")
 local font = require("font")
 local queue = require("queue")
 local playing = require("playing")
-local theme = require("theme")
+local styles = require("styles")
 local playback = require("playback")
+local theme = require("theme")
 local screen = require("screen")
 
 return screen:new {
@@ -42,9 +43,10 @@ return screen:new {
         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 = self.breadcrumb,
@@ -89,7 +91,7 @@ return screen:new {
 
     local back = self.list:add_btn(nil, "< Back")
     back:onClicked(backstack.pop)
-    back:add_style(theme.list_item)
+    back:add_style(styles.list_item)
 
     self.focused_item = 0
     self.last_item = 0
@@ -119,7 +121,7 @@ return screen:new {
           self.add_item(self.iterator())
         end
       end)
-      btn:add_style(theme.list_item)
+      btn:add_style(styles.list_item)
     end
 
     for _ = 1, 8 do
diff --git a/lua/img/db.png b/lua/img/db.png
index 3952ded2..6245fab2 100644
--- a/lua/img/db.png
+++ b/lua/img/db.png
diff --git a/lua/img/enqueue.png b/lua/img/enqueue.png
index 9f720969..b5136a77 100644
--- a/lua/img/enqueue.png
+++ b/lua/img/enqueue.png
diff --git a/lua/img/next.png b/lua/img/next.png
index 1b22a509..1f6f044b 100644
--- a/lua/img/next.png
+++ b/lua/img/next.png
diff --git a/lua/img/next_disabled.png b/lua/img/next_disabled.png
deleted file mode 100644
index c8ff06b2..00000000
--- a/lua/img/next_disabled.png
+++ /dev/null
diff --git a/lua/img/pause.png b/lua/img/pause.png
index 29fa4b90..e7011821 100644
--- a/lua/img/pause.png
+++ b/lua/img/pause.png
diff --git a/lua/img/play.png b/lua/img/play.png
index cc10cab5..a3b8a5af 100644
--- a/lua/img/play.png
+++ b/lua/img/play.png
diff --git a/lua/img/play_small.png b/lua/img/play_small.png
index 3fc7032e..ac29aa98 100644
--- a/lua/img/play_small.png
+++ b/lua/img/play_small.png
diff --git a/lua/img/prev.png b/lua/img/prev.png
index f17e6162..b445c75a 100644
--- a/lua/img/prev.png
+++ b/lua/img/prev.png
diff --git a/lua/img/prev_disabled.png b/lua/img/prev_disabled.png
deleted file mode 100644
index accebe23..00000000
--- a/lua/img/prev_disabled.png
+++ /dev/null
diff --git a/lua/img/repeat.png b/lua/img/repeat.png
index 9a4da7fd..40a7564e 100644
--- a/lua/img/repeat.png
+++ b/lua/img/repeat.png
diff --git a/lua/img/repeat_disabled.png b/lua/img/repeat_disabled.png
deleted file mode 100644
index 20b6ab59..00000000
--- a/lua/img/repeat_disabled.png
+++ /dev/null
diff --git a/lua/img/shuffle.png b/lua/img/shuffle.png
index b54e359d..4a65635b 100644
--- a/lua/img/shuffle.png
+++ b/lua/img/shuffle.png
diff --git a/lua/img/shuffle_disabled.png b/lua/img/shuffle_disabled.png
deleted file mode 100644
index 912d0e95..00000000
--- a/lua/img/shuffle_disabled.png
+++ /dev/null
diff --git a/lua/licenses.lua b/lua/licenses.lua
index fb0e5702..1fa392cf 100644
--- a/lua/licenses.lua
+++ b/lua/licenses.lua
@@ -1,7 +1,7 @@
 local backstack = require("backstack")
 local widgets = require("widgets")
 local font = require("font")
-local theme = require("theme")
+local styles = require("styles")
 local screen = require("screen")
 
 local function show_license(text)
@@ -103,7 +103,7 @@ return function()
       w = lvgl.PCT(100),
       h = lvgl.SIZE_CONTENT,
     }
-    row:add_style(theme.list_item)
+    row:add_style(styles.list_item)
     row:Label { text = name, flex_grow = 1 }
     local button = row:Button {}
     button:Label { text = license, text_font = font.fusion_10 }
diff --git a/lua/main.lua b/lua/main.lua
index 4291c3da..dc73c964 100644
--- a/lua/main.lua
+++ b/lua/main.lua
@@ -1,13 +1,17 @@
 local font = require("font")
 local vol = require("volume")
+local theme = require("theme")
 local controls = require("controls")
 local time = require("time")
 
 local lock_time = time.ticks()
 
+local theme_dark = require("theme_dark")
+theme.set(theme_dark)
+
 -- Set up property bindings that are used across every screen.
 GLOBAL_BINDINGS = {
-  -- Show an alert with the current volume whenver the volume changes.
+  -- Show an alert with the current volume whenever the volume changes
   vol.current_pct:bind(function(pct)
     require("alerts").show(function()
       local container = lvgl.Object(nil, {
@@ -19,11 +23,10 @@ GLOBAL_BINDINGS = {
           align_items = "center",
           align_content = "center",
         },
-        bg_opa = lvgl.OPA(100),
-        bg_color = "#fafafa",
         radius = 8,
         pad_all = 2,
       })
+      theme.set_style(container, "pop_up")
       container:Label {
         text = string.format("Volume %i%%", pct),
         text_font = font.fusion_10
diff --git a/lua/main_menu.lua b/lua/main_menu.lua
index 7d47b785..ac9190be 100644
--- a/lua/main_menu.lua
+++ b/lua/main_menu.lua
@@ -4,7 +4,7 @@ local database = require("database")
 local backstack = require("backstack")
 local browser = require("browser")
 local playing = require("playing")
-local theme = require("theme")
+local styles = require("styles")
 local screen = require("screen")
 
 return screen:new {
@@ -21,7 +21,7 @@ return screen:new {
     now_playing:onClicked(function()
       backstack.push(playing:new())
     end)
-    now_playing:add_style(theme.list_item)
+    now_playing:add_style(styles.list_item)
 
     local indexes = database.indexes()
     for _, idx in ipairs(indexes) do
@@ -32,14 +32,14 @@ return screen:new {
           iterator = idx:iter(),
         })
       end)
-      btn:add_style(theme.list_item)
+      btn:add_style(styles.list_item)
     end
 
     local settings = menu.list:add_btn(nil, "Settings")
     settings:onClicked(function()
       backstack.push(require("settings"):new())
     end)
-    settings:add_style(theme.list_item)
+    settings:add_style(styles.list_item)
 
     return menu
   end,
diff --git a/lua/playing.lua b/lua/playing.lua
index a0b9fde3..3368f590 100644
--- a/lua/playing.lua
+++ b/lua/playing.lua
@@ -5,22 +5,22 @@ local font = require("font")
 local playback = require("playback")
 local queue = require("queue")
 local screen = require("screen")
+local theme = require("theme")
 
 local img = {
   play = lvgl.ImgData("//lua/img/play.png"),
   pause = lvgl.ImgData("//lua/img/pause.png"),
   next = lvgl.ImgData("//lua/img/next.png"),
-  next_disabled = lvgl.ImgData("//lua/img/next_disabled.png"),
   prev = lvgl.ImgData("//lua/img/prev.png"),
-  prev_disabled = lvgl.ImgData("//lua/img/prev_disabled.png"),
   shuffle = lvgl.ImgData("//lua/img/shuffle.png"),
-  shuffle_disabled = lvgl.ImgData("//lua/img/shuffle_disabled.png"),
-  repeat_enabled = lvgl.ImgData("//lua/img/repeat.png"),
-  repeat_disabled = lvgl.ImgData("//lua/img/repeat_disabled.png"),
+  repeat_src = lvgl.ImgData("//lua/img/repeat.png"), -- repeat is a reserved word
 }
 
 local is_now_playing_shown = false
 
+local icon_enabled_class = "icon_enabled"
+local icon_disabled_class = "icon_disabled"
+
 return screen:new {
   createUi = function(self)
     self.root = lvgl.Object(nil, {
@@ -146,11 +146,14 @@ return screen:new {
     repeat_btn:onClicked(function()
       queue.repeat_track:set(not queue.repeat_track:get())
     end)
-    local repeat_img = repeat_btn:Image { src = img.repeat_enabled }
+    local repeat_img = repeat_btn:Image { src = img.repeat_src }
+    theme.set_style(repeat_img, icon_enabled_class)
+
 
     local prev_btn = controls:Button {}
     prev_btn:onClicked(queue.previous)
-    local prev_img = prev_btn:Image { src = img.prev_disabled }
+    local prev_img = prev_btn:Image { src = img.prev }
+    theme.set_style(prev_img, icon_disabled_class)
 
     local play_pause_btn = controls:Button {}
     play_pause_btn:onClicked(function()
@@ -158,16 +161,19 @@ return screen:new {
     end)
     play_pause_btn:focus()
     local play_pause_img = play_pause_btn:Image { src = img.pause }
+    theme.set_style(play_pause_img, icon_enabled_class)
 
     local next_btn = controls:Button {}
     next_btn:onClicked(queue.next)
-    local next_img = next_btn:Image { src = img.next_disabled }
+    local next_img = next_btn:Image { src = img.next }
+    theme.set_style(next_img, icon_disabled_class)
 
     local shuffle_btn = controls:Button {}
     shuffle_btn:onClicked(function()
       queue.random:set(not queue.random:get())
     end)
     local shuffle_img = shuffle_btn:Image { src = img.shuffle }
+    theme.set_style(shuffle_img, icon_enabled_class)
 
     controls:Object({ flex_grow = 1, h = 1 }) -- spacer
 
@@ -208,26 +214,19 @@ return screen:new {
         if not pos then return end
         playlist_pos:set { text = tostring(pos) }
 
-        next_img:set_src(
-          pos < queue.size:get() and img.next or img.next_disabled
+        theme.set_style(
+          next_img, pos < queue.size:get() and icon_enabled_class or icon_disabled_class
         )
-        prev_img:set_src(
-          pos > 1 and img.prev or img.prev_disabled
+        
+        theme.set_style(
+          prev_img, pos > 1 and icon_enabled_class or icon_disabled_class
         )
       end),
       queue.random:bind(function(shuffling)
-        if shuffling then
-          shuffle_img:set_src(img.shuffle)
-        else
-          shuffle_img:set_src(img.shuffle_disabled)
-        end
+        theme.set_style(shuffle_img, shuffling and icon_enabled_class or icon_disabled_class)
       end),
       queue.repeat_track:bind(function(en)
-        if en then
-          repeat_img:set_src(img.repeat_enabled)
-        else
-          repeat_img:set_src(img.repeat_disabled)
-        end
+        theme.set_style(repeat_img, en and icon_enabled_class or icon_disabled_class)
       end),
       queue.size:bind(function(num)
         if not num then return end
diff --git a/lua/settings.lua b/lua/settings.lua
index fe36fe02..d19a6180 100644
--- a/lua/settings.lua
+++ b/lua/settings.lua
@@ -1,11 +1,12 @@
 local lvgl = require("lvgl")
 local backstack = require("backstack")
 local widgets = require("widgets")
-local theme = require("theme")
+local styles = require("styles")
 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 screen = require("screen")
 local usb = require("usb")
@@ -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,
@@ -53,10 +54,10 @@ local BluetoothSettings = screen:new {
       bluetooth.enabled:set(enabled)
     end)
 
-    self.menu.content:Label {
-      text = "Paired Device",
-      pad_bottom = 1,
-    }:add_style(theme.settings_title)
+  theme.set_style(self.menu.content:Label {
+    text = "Paired Device",
+    pad_bottom = 1,
+  }, "settings_title")
 
     local paired_container = self.menu.content:Object {
       flex = {
@@ -79,10 +80,10 @@ local BluetoothSettings = screen:new {
       bluetooth.paired_device:set()
     end)
 
-    self.menu.content:Label {
-      text = "Nearby Devices",
-      pad_bottom = 1,
-    }:add_style(theme.settings_title)
+  theme.set_style(self.menu.content:Label {
+    text = "Nearby Devices",
+    pad_bottom = 1,
+  }, "settings_title")
 
     local devices = self.menu.content:List {
       w = lvgl.PCT(100),
@@ -122,9 +123,9 @@ local HeadphonesSettings = screen:new {
   createUi = function(self)
     self.menu = SettingsScreen("Headphones")
 
-    self.menu.content:Label {
-      text = "Maximum volume limit",
-    }:add_style(theme.settings_title)
+  theme.set_style(self.menu.content:Label {
+    text = "Maxiumum volume limit",
+  }, "settings_title")
 
     local volume_chooser = self.menu.content:Dropdown {
       options = "Line Level (-10 dB)\nCD Level (+6 dB)\nMaximum (+10dB)",
@@ -137,9 +138,9 @@ local HeadphonesSettings = screen:new {
       volume.limit_db:set(limits[selection])
     end)
 
-    self.menu.content:Label {
-      text = "Left/Right balance",
-    }:add_style(theme.settings_title)
+  theme.set_style(self.menu.content:Label {
+    text = "Left/Right balance",
+  }, "settings_title")
 
     local balance = self.menu.content:Slider {
       w = lvgl.PCT(100),
@@ -185,19 +186,20 @@ local DisplaySettings = screen:new {
   createUi = function(self)
     self.menu = SettingsScreen("Display")
 
-    local brightness_title = self.menu.content:Object {
-      flex = {
-        flex_direction = "row",
-        justify_content = "flex-start",
-        align_items = "flex-start",
-        align_content = "flex-start",
-      },
-      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(theme.settings_title)
+  local brightness_title = self.menu.content:Object {
+    flex = {
+      flex_direction = "row",
+      justify_content = "flex-start",
+      align_items = "flex-start",
+      align_content = "flex-start",
+    },
+    w = lvgl.PCT(100),
+    h = lvgl.SIZE_CONTENT,
+
+  }
+  brightness_title:Label { text = "Brightness", flex_grow = 1 }
+  local brightness_pct = brightness_title:Label {}
+  theme.set_style(brightness_pct, "settings_title")
 
     local brightness = self.menu.content:Slider {
       w = lvgl.PCT(100),
@@ -221,9 +223,9 @@ local InputSettings = screen:new {
   createUi = function(self)
     self.menu = SettingsScreen("Input Method")
 
-    self.menu.content:Label {
-      text = "Control scheme",
-    }:add_style(theme.settings_title)
+  theme.set_style(self.menu.content:Label {
+    text = "Control scheme",
+  }, "settings_title")
 
     local schemes = controls.schemes()
     local option_to_scheme = {}
@@ -259,9 +261,9 @@ local InputSettings = screen:new {
       controls.scheme:set(scheme)
     end)
 
-    self.menu.content:Label {
-      text = "Scroll Sensitivity",
-    }:add_style(theme.settings_title)
+  theme.set_style(self.menu.content:Label {
+    text = "Scroll Sensitivity",
+  }, "settings_title")
 
     local slider_scale = 4; -- Power steering
     local sensitivity = self.menu.content:Slider {
@@ -331,19 +333,19 @@ local DatabaseSettings = screen:new {
     widgets.Row(self.menu.content, "Schema version", db.version())
     widgets.Row(self.menu.content, "Size on disk", string.format("%.1f KiB", db.size() / 1024))
 
-    local actions_container = self.menu.content:Object {
-      w = lvgl.PCT(100),
-      h = lvgl.SIZE_CONTENT,
-      flex = {
-        flex_direction = "row",
-        justify_content = "center",
-        align_items = "space-evenly",
-        align_content = "center",
-      },
-      pad_top = 4,
-      pad_column = 4,
-    }
-    actions_container:add_style(theme.list_item)
+  local actions_container = self.menu.content:Object {
+    w = lvgl.PCT(100),
+    h = lvgl.SIZE_CONTENT,
+    flex = {
+      flex_direction = "row",
+      justify_content = "center",
+      align_items = "space-evenly",
+      align_content = "center",
+    },
+    pad_top = 4,
+    pad_column = 4,
+  }
+  actions_container:add_style(styles.list_item)
 
     local update = actions_container:Button {}
     update:Label { text = "Update" }
@@ -381,16 +383,20 @@ return screen:new {
       flex_grow = 1,
     }
 
-    local function section(name)
-      self.list:add_text(name):add_style(theme.list_heading)
-    end
+  local function section(name)
+    local elem = self.list:Label {
+      text = name,
+      pad_left = 4,
+    }
+    theme.set_style(elem, "settings_title")
+  end
 
     local function submenu(name, class)
       local item = self.list:add_btn(nil, name)
       item:onClicked(function()
         backstack.push(class:new())
       end)
-      item:add_style(theme.list_item)
+      item:add_style(styles.list_item)
     end
 
     section("Audio")
diff --git a/lua/theme.lua b/lua/styles.lua
index 9c808946..fd45263e 100644
--- a/lua/theme.lua
+++ b/lua/styles.lua
@@ -1,7 +1,7 @@
 local lvgl = require("lvgl")
 local font = require("font")
 
-local theme = {
+local styles = {
   list_item = lvgl.Style {
     pad_left = 4,
     pad_right = 4,
@@ -13,11 +13,6 @@ local theme = {
     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 theme
+return styles
diff --git a/lua/theme_dark.lua b/lua/theme_dark.lua
new file mode 100644
index 00000000..be5feeaa
--- /dev/null
+++ b/lua/theme_dark.lua
@@ -0,0 +1,176 @@
+local lvgl = require("lvgl")
+local font = require("font")
+
+local background_color = "#5a5474"
+local background_muted = "#464258"
+local text_color = "#eeeeee"
+local highlight_color = "#9773d3"
+local icon_enabled_color = "#eeeeee"
+local icon_disabled_color = "#6d6d69"
+
+local theme_dark = {
+  base = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(0),
+      text_font = font.fusion_12,
+    }},
+  },
+  root = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_color, -- Root background color
+      bg_grad_dir = 1,
+      bg_grad_color = "#1d0e38",
+      text_color = text_color
+    }},
+  },
+  header = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_muted,
+    }},
+  },
+  pop_up = {
+    {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,
+      img_recolor_opa = 180,
+      img_recolor = highlight_color,
+      radius = 5,
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = highlight_color,
+      img_recolor_opa = 0,
+    }},
+  },
+  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_muted,
+      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,
+    }},
+    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  switch = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      width = 28,
+      height = 8,
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = background_muted,
+      border_color = highlight_color,
+    }},
+    {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_muted,
+    }},
+    {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  dropdown = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      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 = highlight_color,
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_color
+    }},
+    {lvgl.PART.SELECTED | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  database_indicator = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = highlight_color,
+    }},
+  },
+  settings_title = {
+   {lvgl.PART.MAIN, lvgl.Style {
+      pad_top = 2,
+      pad_bottom = 4,
+      text_font = font.fusion_10,
+      text_color = highlight_color,
+    }},
+  },
+  icon_disabled = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = icon_disabled_color,
+    }},
+  },
+  icon_enabled = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = icon_enabled_color,
+    }},
+  },
+
+}
+
+return theme_dark
diff --git a/lua/theme_light.lua b/lua/theme_light.lua
new file mode 100644
index 00000000..e0a4468f
--- /dev/null
+++ b/lua/theme_light.lua
@@ -0,0 +1,174 @@
+local lvgl = require("lvgl")
+local font = require("font")
+
+local background_color = "#ffffff"
+local background_muted = "#fafafa"
+local text_color = "#000000"
+local highlight_color = "#ce93d8"
+local icon_enabled_color = "#2c2c2c"
+local icon_disabled_color = "#999999"
+
+local theme_light = {
+  base = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(0),
+      text_font = font.fusion_12,
+    }},
+  },
+  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,
+    }},
+  },
+  pop_up = {
+    {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,
+      img_recolor_opa = 180,
+      img_recolor = highlight_color,
+      radius = 5,
+    }},
+    {lvgl.PART.MAIN | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      bg_color = highlight_color,
+      img_recolor_opa = 0,
+    }},
+  },
+  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_muted,
+      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,
+    }},
+    {lvgl.PART.INDICATOR | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  switch = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      bg_opa = lvgl.OPA(100),
+      width = 28,
+      height = 8,
+      radius = 32767, -- LV_RADIUS_CIRCLE = 0x7fff
+      bg_color = background_muted,
+      border_color = highlight_color,
+    }},
+    {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_muted,
+    }},
+    {lvgl.PART.KNOB | lvgl.STATE.FOCUSED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  dropdown = {
+    {lvgl.PART.MAIN, lvgl.Style{
+      radius = 2, 
+      pad_all = 2,
+      border_width = 1,
+      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 = highlight_color,
+      bg_opa = lvgl.OPA(100),
+      bg_color = background_color
+    }},
+    {lvgl.PART.SELECTED | lvgl.STATE.CHECKED, lvgl.Style {
+      bg_color = highlight_color,
+    }},
+  },
+  database_indicator = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = highlight_color,
+    }},
+  },
+  settings_title = {
+   {lvgl.PART.MAIN, lvgl.Style {
+      pad_top = 2,
+      pad_bottom = 4,
+      text_font = font.fusion_10,
+      text_color = highlight_color,
+    }},
+  },
+  icon_disabled = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = icon_disabled_color,
+    }},
+  },
+  icon_enabled = {
+    {lvgl.PART.MAIN, lvgl.Style {
+      img_recolor_opa = 180,
+      img_recolor = icon_enabled_color,
+    }},
+  },
+
+}
+
+return theme_light
diff --git a/lua/widgets.lua b/lua/widgets.lua
index 87e3f5fd..fa991758 100644
--- a/lua/widgets.lua
+++ b/lua/widgets.lua
@@ -3,8 +3,9 @@ local power = require("power")
 local bluetooth = require("bluetooth")
 local font = require("font")
 local backstack = require("backstack")
-local theme = require("theme")
+local styles = require("styles")
 local database = require("database")
+local theme = require("theme")
 
 local img = {
   db = lvgl.ImgData("//lua/img/db.png"),
@@ -55,7 +56,7 @@ function widgets.Row(parent, left, right)
     w = lvgl.PCT(100),
     h = lvgl.SIZE_CONTENT,
   }
-  container:add_style(theme.list_item)
+  container:add_style(styles.list_item)
   container:Label { text = left, flex_grow = 1 }
   container:Label { text = right }
 end
@@ -80,10 +81,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
@@ -108,6 +106,7 @@ function widgets.StatusBar(parent, opts)
   end
 
   status_bar.db_updating = status_bar.root:Image { src = img.db }
+  theme.set_style(status_bar.db_updating, "database_indicator")
   status_bar.bluetooth = status_bar.root:Image {}
   status_bar.battery = status_bar.root:Image {}
   status_bar.chg = status_bar.battery:Image { src = img.chg }