diff --git a/Grayjay.ClientServer/Settings/GrayjaySettings.cs b/Grayjay.ClientServer/Settings/GrayjaySettings.cs
index 8aac7fd5..0ae661a3 100644
--- a/Grayjay.ClientServer/Settings/GrayjaySettings.cs
+++ b/Grayjay.ClientServer/Settings/GrayjaySettings.cs
@@ -19,6 +19,15 @@ public class LanguageSettings
             public int AppLanguage { get; set; } = 0;
         }
 
+        [SettingsField("Appearance", "group", "Configure the application appearance", 1)]
+        public AppearanceSettings Appearance { get; set; } = new AppearanceSettings();
+        public class AppearanceSettings
+        {
+            [SettingsField("Theme", SettingsField.DROPDOWN, "Choose whether Grayjay follows the system theme or uses a fixed theme", 0)]
+            [SettingsDropdownOptions("System", "Dark", "Light")]
+            public int Theme { get; set; } = 0;
+        }
+
         //Home
         public HomeSettings Home { get; set; } = new HomeSettings();
         public class HomeSettings
diff --git a/Grayjay.Desktop.CEF/CEFWindowProvider.cs b/Grayjay.Desktop.CEF/CEFWindowProvider.cs
index 8915af4a..8c938c8d 100644
--- a/Grayjay.Desktop.CEF/CEFWindowProvider.cs
+++ b/Grayjay.Desktop.CEF/CEFWindowProvider.cs
@@ -2,6 +2,7 @@
 using Grayjay.ClientServer;
 using Grayjay.ClientServer.Browser;
 using Grayjay.ClientServer.Dialogs;
+using Grayjay.ClientServer.Settings;
 using Grayjay.Desktop.POC;
 using Microsoft.AspNetCore.Mvc.Formatters;
 using System;
@@ -44,7 +45,7 @@ public async Task<IWindow> CreateWindowAsync(string url, string title, int prefe
             if(beforeLoad != null)
                 await beforeLoad(windowResult);
             await window.SetDevelopmentToolsEnabledAsync(true);
-            await window.LoadUrlAsync($"{GrayjayServer.Instance.BaseUrl}{GrayjayServer.Instance.GetIndexUrl()}");
+            await window.LoadUrlAsync(StartupSplash.CreateThemedWebUrl(GrayjayServer.Instance.BaseUrl, GrayjayServer.Instance.GetIndexUrl(), GrayjaySettings.Instance.Appearance.Theme));
             return windowResult;
         }
 
diff --git a/Grayjay.Desktop.CEF/Program.cs b/Grayjay.Desktop.CEF/Program.cs
index d794c92b..19fdd76c 100644
--- a/Grayjay.Desktop.CEF/Program.cs
+++ b/Grayjay.Desktop.CEF/Program.cs
@@ -1,4 +1,4 @@
-using JustCef;
+using JustCef;
 using Grayjay.ClientServer;
 using Grayjay.ClientServer.Constants;
 using Grayjay.ClientServer.Controllers;
@@ -409,7 +409,7 @@ static async Task EntryPoint(string[] args)
                 Stopwatch startWindowWatch = Stopwatch.StartNew();
                 Logger.i(nameof(Program), "Main: Starting window.");
                 window = await cef.CreateWindowAsync(
-                    url: """data:text/html;base64,PHN0eWxlPkBpbXBvcnQgdXJsKGh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzMj9mYW1pbHk9Um9ib3RvOndnaHRANDAwOzcwMCZkaXNwbGF5PXN3YXApO2JvZHl7YmFja2dyb3VuZC1jb2xvcjojMWIxYjFiO21hcmdpbjowO2ZvbnQtZmFtaWx5OlJvYm90byxzYW5zLXNlcmlmfS5sb2FkZXItY29udGFpbmVye2Rpc3BsYXk6ZmxleDtqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyO2ZsZXgtZGlyZWN0aW9uOmNvbHVtbjthbGlnbi1pdGVtczpjZW50ZXI7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwdmh9LmxvYWRlci1zdmd7d2lkdGg6MjAwcHg7aGVpZ2h0OjIwMHB4O2FuaW1hdGlvbjpnZW50bGUtcHVsc2UgM3MgZWFzZS1pbi1vdXQgaW5maW5pdGV9LmxvYWRpbmctdGV4dHtjb2xvcjojZmZmO2ZvbnQtc2l6ZToyNHB4O21hcmdpbi10b3A6MjBweDtmb250LXdlaWdodDo3MDA7bGV0dGVyLXNwYWNpbmc6MXB4fS5sb2FkaW5nLXRleHQgc3BhbntvcGFjaXR5OjA7YW5pbWF0aW9uOmRvdCAxLjVzIGluZmluaXRlfS5sb2FkaW5nLXRleHQgc3BhbjpudGgtY2hpbGQoMSl7YW5pbWF0aW9uLWRlbGF5OjBzfS5sb2FkaW5nLXRleHQgc3BhbjpudGgtY2hpbGQoMil7YW5pbWF0aW9uLWRlbGF5Oi41c30ubG9hZGluZy10ZXh0IHNwYW46bnRoLWNoaWxkKDMpe2FuaW1hdGlvbi1kZWxheToxc31Aa2V5ZnJhbWVzIGdlbnRsZS1wdWxzZXswJSwxMDAle3RyYW5zZm9ybTpzY2FsZSgxKTtvcGFjaXR5Oi44fTUwJXt0cmFuc2Zvcm06c2NhbGUoMS4xKTtvcGFjaXR5OjF9fUBrZXlmcmFtZXMgZG90ezAle29wYWNpdHk6MH01MCV7b3BhY2l0eToxfTEwMCV7b3BhY2l0eTowfX08L3N0eWxlPjxkaXYgY2xhc3M9bG9hZGVyLWNvbnRhaW5lcj48c3ZnIGNsYXNzPWxvYWRlci1zdmcgZmlsbD1ub25lIGhlaWdodD0yMDAgdmlld0JveD0iMCAwIDQ4IDQ4IndpZHRoPTIwMCB4bWxucz1odHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zz48cGF0aCBkPSJNMjMuODYxMiA0MS4yNTE2TDQ2LjIyMjUgNy4wMDIySDEuNUwyMy44NjEyIDQxLjI1MTZaImZpbGw9dXJsKCNwYWludDBfbGluZWFyXzgyOF85NTA2KSAvPjxwYXRoIGQ9Ik02LjgxMjUgMzAuODcxNUM3LjcyMzgxIDI5Ljg5OTQgOS45ODM4OSAyNy42NzU4IDExLjczMzYgMjYuNTU3OUMxMy40ODMzIDI1LjQ0MDEgMTUuNTgxNCAyMi4yNDQ0IDE2LjQxMTcgMjAuNzg2M0MxOC45NDMxIDE3LjA2IDI0LjYxMzUgOS4yNzk0NSAyNy4wNDM3IDcuOTY3MTNDMjcuNDgxMSA3LjYyNjg5IDI4LjExNyA3LjA5NjMyIDI4LjM4MDMgNi44NzM1OEMyOS4yOTE2IDQuODQ4NCAzMi4zOTAxIDEuNDA1NjYgMzcuNDkzNCAzLjgzNTg2QzM3LjkzMDkgMy42OTAwMyAzOS4wMTIzIDMuNjUzNTggMzkuNDk4MyAzLjY1MzU4QzM5LjExMzUgMy45MTY4NiAzOC4zMDc1IDQuNjg2NCAzOC4xNjE3IDUuNjU4NDhDMzcuNzcyOSA4LjMzMTY0IDM2LjI5ODYgOS44OTEwMyAzNS42MSAxMC4zMzY1QzM1LjEyNCAxMy40MzUgMzQuNDU1NyAxNi4xNjkgMzIuOTk3NiAxNy4xNDFMMzQuMzM0MiAxOS41MTA0QzM2LjMzOTEgMjEuNjM2OSA0MC40OTQ3IDI2LjIyOTkgNDEuMDc3NyAyNy41OTA4QzM5LjEzMzggMjYuOTU4OSAzNy44NzgyIDI2LjM1NTQgMzcuNDkzNCAyNi4xMzI3TDQxLjA3NzcgMzEuMDUzOEMzOC45NzE4IDMwLjg5MTggMzQuMjM3IDI5LjUyMjggMzIuMTQ3MSAyNS4zNDI5QzMyLjk3MzMgMjcuNTc4NiAzMy43ODc0IDMwLjM2NTIgMzQuMDkxMiAzMS40NzlDMzIuOTU3MSAzMC41NDc1IDMwLjUxODggMjcuODQ1OSAyOS44Mzg0IDI0LjQ5MjNDMzAuMDMyOCAyNy43NDg3IDMwLjAwMDQgMzAuMDYxNCAyOS45NTk5IDMwLjgxMDdDMjkuNDEzMSAzMC4zMDQ1IDI4LjE0OTQgMjguNzMyOSAyNy40Njg5IDI2LjQ5NzJWMzAuMjY0QzI2LjY1MjkgMjkuMTI5NCAyNS4wMTEyIDI2LjM3NSAyNC44NjI5IDI0LjI5NjZDMjQuOTk5OCAyNi42NTI0IDI0LjkxNjQgMjcuNzU2NyAyNC44NTY1IDI4LjAxNkwyMS43NTgxIDI1LjA5OTlDMjAuOTI3NyAyNS41NDU0IDE4LjY5NjEgMjYuNTU3OSAxNi40MTE3IDI3LjA0NEMxNC44NTY0IDI4LjM1NjMgMTIuOTY4OSAzMS42NDExIDEyLjIxOTYgMzMuMTE5NFYzMS4yMzZMMTAuMTU0IDMzLjMwMTdMMTAuODgzIDMxLjExNDVMOS41NDY0NCAzMi4yNjg5QzkuMjQyNjUgMzIuNDUxMSA4LjUzNzkgMzIuODE1NiA4LjE0OTEgMzIuODE1NkM4LjI5NDg5IDMyLjQ3NTQgOC41NzQzOSAzMi4xMDY4IDguNjk1OSAzMS45NjUxTDYuOTM0MDEgMzIuNjMzNEM3LjEzNjUxIDMyLjA0NjEgNy43NzI0MiAzMC43NSA4LjY5NTkgMzAuMjY0QzcuNDMyMTkgMzAuNzUgNi45MTM3OCAzMC44NzE1IDYuODEyNSAzMC44NzE1WiJmaWxsPXdoaXRlIC8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGdyYWRpZW50VW5pdHM9dXNlclNwYWNlT25Vc2UgaWQ9cGFpbnQwX2xpbmVhcl84MjhfOTUwNiB4MT0yMy44NjEyIHgyPTIzLjg2MTIgeTE9NDEuMjUxNiB5Mj0tNC40MTQyOD48c3RvcCBzdG9wLWNvbG9yPSMwMUQ2RTYgLz48c3RvcCBzdG9wLWNvbG9yPSMwMTgyRTcgb2Zmc2V0PTEgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz48cCBjbGFzcz1sb2FkaW5nLXRleHQ+TG9hZGluZzxzcGFuPi48L3NwYW4+PHNwYW4+Ljwvc3Bhbj48c3Bhbj4uPC9zcGFuPjwvZGl2Pg==""",
+                    url: StartupSplash.CreateDataUrl(GrayjaySettings.Instance.Appearance.Theme),
                     minimumWidth: 900,
                     minimumHeight: 550,
                     preferredWidth: 1300,
@@ -512,9 +512,9 @@ static async Task EntryPoint(string[] args)
 
             Logger.i(nameof(Program), "Main: Navigate.");
             if (window != null)
-                await window.LoadUrlAsync($"{server.BaseUrl}/web/index.html");
+                await window.LoadUrlAsync(StartupSplash.CreateThemedWebUrl(server.BaseUrl, "/web/index.html", GrayjaySettings.Instance.Appearance.Theme));
             else if (!isServer)
-                OSHelper.OpenUrl($"{server.BaseUrl}/web/index.html");
+                OSHelper.OpenUrl(StartupSplash.CreateThemedWebUrl(server.BaseUrl, "/web/index.html", GrayjaySettings.Instance.Appearance.Theme));
             
             if (window != null)
                 StateApp.SetMainWindow(new CEFWindowProvider.Window(window));
diff --git a/Grayjay.Desktop.CEF/StartupSplash.cs b/Grayjay.Desktop.CEF/StartupSplash.cs
new file mode 100644
index 00000000..a1a0937e
--- /dev/null
+++ b/Grayjay.Desktop.CEF/StartupSplash.cs
@@ -0,0 +1,117 @@
+using System;
+using System.Text;
+
+namespace Grayjay.Desktop
+{
+    internal static class StartupSplash
+    {
+        private const int ThemeSystem = 0;
+        private const int ThemeDark = 1;
+        private const int ThemeLight = 2;
+
+        private const string DarkBackground = "#141414";
+        private const string LightBackground = "#f5f5f3";
+        private const string DarkText = "#ffffff";
+        private const string LightText = "#141414";
+        private const string DarkLoaderGlow = "rgba(1, 155, 231, 0.35)";
+        private const string LightLoaderGlow = "rgba(20, 20, 20, 0.10)";
+        private const string Accent = "#019be7";
+        private const string AccentGradientStop = "#01D6E6";
+
+        public static string CreateDataUrl(int theme)
+        {
+            var html = CreateHtml(theme);
+            return "data:text/html;base64," + Convert.ToBase64String(Encoding.UTF8.GetBytes(html));
+        }
+
+
+        public static string CreateThemedWebUrl(string baseUrl, string indexUrl, int theme)
+        {
+            return AppendStartupThemeQuery(baseUrl + indexUrl, theme);
+        }
+
+        public static string AppendStartupThemeQuery(string url, int theme)
+        {
+            var fragmentStart = url.IndexOf('#');
+            var mainUrl = fragmentStart >= 0 ? url[..fragmentStart] : url;
+            var fragment = fragmentStart >= 0 ? url[fragmentStart..] : string.Empty;
+            var separator = mainUrl.Contains('?') ? "&" : "?";
+
+            return mainUrl + separator + "gjStartupTheme=" + GetStartupThemeSource(theme) + fragment;
+        }
+
+        private static string GetStartupThemeSource(int theme)
+        {
+            if (theme == ThemeLight)
+                return "light";
+
+            if (theme == ThemeSystem)
+                return "system";
+
+            return "dark";
+        }
+
+        private static string CreateHtml(int theme)
+        {
+            return "<!doctype html><html><head><meta charset=\"utf-8\"><style>" +
+                "@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);" +
+                CreateThemeCss(theme) +
+                "html,body{width:100%;height:100%;background:var(--gj-bg-root);color:var(--gj-text-primary);margin:0;font-family:Roboto,sans-serif;}" +
+                ".loader-container{display:flex;justify-content:center;flex-direction:column;align-items:center;width:100%;height:100vh;}" +
+                ".loader-svg{width:200px;height:200px;animation:gentle-pulse 3s ease-in-out infinite;filter:drop-shadow(0 0 28px var(--gj-loader-glow));}" +
+                ".loading-text{color:var(--gj-text-primary);font-size:24px;margin-top:20px;font-weight:700;letter-spacing:1px;}" +
+                ".loading-text span{opacity:0;animation:dot 1.5s infinite;}" +
+                ".loading-text span:nth-child(1){animation-delay:0s;}" +
+                ".loading-text span:nth-child(2){animation-delay:.5s;}" +
+                ".loading-text span:nth-child(3){animation-delay:1s;}" +
+                "@keyframes gentle-pulse{0%,100%{transform:scale(1);opacity:.8;}50%{transform:scale(1.1);opacity:1;}}" +
+                "@keyframes dot{0%{opacity:0;}50%{opacity:1;}100%{opacity:0;}}" +
+                "</style></head><body><div class=\"loader-container\">" +
+                CreateLogoSvg() +
+                "<p class=\"loading-text\">Loading<span>.</span><span>.</span><span>.</span></p>" +
+                "</div></body></html>";
+        }
+
+        private static string CreateThemeCss(int theme)
+        {
+            if (theme == ThemeLight)
+                return CreateRootCss("light", LightBackground, LightText, LightLoaderGlow);
+
+            if (theme == ThemeSystem)
+            {
+                return CreateRootCss("dark", DarkBackground, DarkText, DarkLoaderGlow) +
+                    "@media (prefers-color-scheme: light){" +
+                    CreateRootCss("light", LightBackground, LightText, LightLoaderGlow) +
+                    "}";
+            }
+
+            if (theme == ThemeDark)
+                return CreateRootCss("dark", DarkBackground, DarkText, DarkLoaderGlow);
+
+            return CreateRootCss("dark", DarkBackground, DarkText, DarkLoaderGlow);
+        }
+
+        private static string CreateRootCss(string colorScheme, string background, string text, string loaderGlow)
+        {
+            return ":root{" +
+                "color-scheme:" + colorScheme + ";" +
+                "--gj-bg-root:" + background + ";" +
+                "--gj-text-primary:" + text + ";" +
+                "--gj-loader-glow:" + loaderGlow + ";" +
+                "--gj-accent:" + Accent + ";" +
+                "--gj-accent-grad:linear-gradient(267deg," + AccentGradientStop + " -100.57%,var(--gj-accent) 90.96%);" +
+                "}";
+        }
+
+        private static string CreateLogoSvg()
+        {
+            return "<svg class=\"loader-svg\" fill=\"none\" height=\"200\" viewBox=\"0 0 48 48\" width=\"200\" xmlns=\"http://www.w3.org/2000/svg\">" +
+                "<path d=\"M23.8612 41.2516L46.2225 7.0022H1.5L23.8612 41.2516Z\" fill=\"url(#gj-splash-gradient)\" />" +
+                "<path d=\"M6.8125 30.8715C7.72381 29.8994 9.98389 27.6758 11.7336 26.5579C13.4833 25.4401 15.5814 22.2444 16.4117 20.7863C18.9431 17.06 24.6135 9.27945 27.0437 7.96713C27.4811 7.62689 28.117 7.09632 28.3803 6.87358C29.2916 4.8484 32.3901 1.40566 37.4934 3.83586C37.9309 3.69003 39.0123 3.65358 39.4983 3.65358C39.1135 3.91686 38.3075 4.6864 38.1617 5.65848C37.7729 8.33164 36.2986 9.89103 35.61 10.3365C35.124 13.435 34.4557 16.169 32.9976 17.141L34.3342 19.5104C36.3391 21.6369 40.4947 26.2299 41.0777 27.5908C39.1338 26.9589 37.8782 26.3554 37.4934 26.1327L41.0777 31.0538C38.9718 30.8918 34.237 29.5228 32.1471 25.3429C32.9733 27.5786 33.7874 30.3652 34.0912 31.479C32.9571 30.5475 30.5188 27.8459 29.8384 24.4923C30.0328 27.7487 30.0004 30.0614 29.9599 30.8107C29.4131 30.3045 28.1494 28.7329 27.4689 26.4972V30.264C26.6529 29.1294 25.0112 26.375 24.8629 24.2966C24.9998 26.6524 24.9164 27.7567 24.8565 28.016L21.7581 25.0999C20.9277 25.5454 18.6961 26.5579 16.4117 27.044C14.8564 28.3563 12.9689 31.6411 12.2196 33.1194V31.236L10.154 33.3017L10.883 31.1145L9.54644 32.2689C9.24265 32.4511 8.5379 32.8156 8.1491 32.8156C8.29489 32.4754 8.57439 32.1068 8.6959 31.9651L6.93401 32.6334C7.13651 32.0461 7.77242 30.75 8.6959 30.264C7.43219 30.75 6.91378 30.8715 6.8125 30.8715Z\" fill=\"white\" />" +
+                "<defs><linearGradient gradientUnits=\"userSpaceOnUse\" id=\"gj-splash-gradient\" x1=\"23.8612\" x2=\"23.8612\" y1=\"41.2516\" y2=\"-4.41428\">" +
+                "<stop stop-color=\"" + AccentGradientStop + "\" />" +
+                "<stop stop-color=\"" + Accent + "\" offset=\"1\" />" +
+                "</linearGradient></defs></svg>";
+        }
+    }
+}
diff --git a/Grayjay.Desktop.Web/index.html b/Grayjay.Desktop.Web/index.html
index fded2a8f..fe6b7c40 100644
--- a/Grayjay.Desktop.Web/index.html
+++ b/Grayjay.Desktop.Web/index.html
@@ -1,9 +1,29 @@
 <!DOCTYPE html>
-<html lang="en" style="background-color: #1b1b1b">
+<html lang="en" style="background-color: var(--gj-bg-root, #141414)">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#141414" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#f5f5f3" media="(prefers-color-scheme: light)" />
+    <script>
+      (() => {
+        const root = document.documentElement;
+        const source = new URLSearchParams(window.location.search).get('gjStartupTheme') || 'system';
+        const systemTheme = window.matchMedia?.('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+        const theme = source === 'light' ? 'light' : source === 'dark' ? 'dark' : systemTheme;
+
+        root.dataset.theme = theme;
+        root.dataset.themeSource = source === 'light' || source === 'dark' ? source : 'system';
+        root.style.colorScheme = theme;
+      })();
+    </script>
+    <style id="grayjay-theme-prepaint">
+      :root { --gj-bg-root: #141414; --gj-bg-sidebar: #1b1b1b; background-color: #141414; color-scheme: dark; }
+      :root[data-theme="light"] { --gj-bg-root: #f5f5f3; --gj-bg-sidebar: #ecebe7; background-color: #f5f5f3; color-scheme: light; }
+      :root[data-theme="dark"] { --gj-bg-root: #141414; --gj-bg-sidebar: #1b1b1b; background-color: #141414; color-scheme: dark; }
+      @media (prefers-color-scheme: light) { :root:not([data-theme]) { --gj-bg-root: #f5f5f3; --gj-bg-sidebar: #ecebe7; background-color: #f5f5f3; color-scheme: light; } }
+      html, body, #root { background-color: var(--gj-bg-root); }
+    </style>
     <link rel="shortcut icon" type="image/png" href="/src/assets/favicon.png" />
     <link rel="stylesheet" href="/src/assets/fonts/inter/inter.css" />
     <link rel="stylesheet" href="/src/assets/fonts/sen/sen.css" />
diff --git a/Grayjay.Desktop.Web/src/assets/icons/icon_nav_settings.svg b/Grayjay.Desktop.Web/src/assets/icons/icon_nav_settings.svg
index 0b009b7c..9b6dcf31 100644
--- a/Grayjay.Desktop.Web/src/assets/icons/icon_nav_settings.svg
+++ b/Grayjay.Desktop.Web/src/assets/icons/icon_nav_settings.svg
@@ -1,3 +1,3 @@
 <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.7562 4.3125C14.24 2.5625 11.76 2.5625 11.2437 4.3125L11.1187 4.7375C11.0416 4.99949 10.9068 5.2409 10.7242 5.44402C10.5417 5.64713 10.3159 5.80681 10.0636 5.91133C9.8113 6.01585 9.53878 6.06258 9.26606 6.04807C8.99333 6.03356 8.72731 5.9582 8.4875 5.8275L8.1 5.615C6.49625 4.7425 4.7425 6.49625 5.61625 8.09875L5.8275 8.4875C6.385 9.5125 5.85625 10.7887 4.7375 11.1187L4.3125 11.2437C2.5625 11.76 2.5625 14.24 4.3125 14.7562L4.7375 14.8813C4.99949 14.9584 5.2409 15.0932 5.44402 15.2758C5.64713 15.4583 5.80681 15.6841 5.91133 15.9364C6.01585 16.1887 6.06258 16.4612 6.04807 16.7339C6.03356 17.0067 5.9582 17.2727 5.8275 17.5125L5.615 17.9C4.7425 19.5037 6.49625 21.2575 8.09875 20.3837L8.4875 20.1725C8.72731 20.0418 8.99333 19.9664 9.26606 19.9519C9.53878 19.9374 9.8113 19.9841 10.0636 20.0887C10.3159 20.1932 10.5417 20.3529 10.7242 20.556C10.9068 20.7591 11.0416 21.0005 11.1187 21.2625L11.2437 21.6875C11.76 23.4375 14.24 23.4375 14.7562 21.6875L14.8813 21.2625C14.9584 21.0005 15.0932 20.7591 15.2758 20.556C15.4583 20.3529 15.6841 20.1932 15.9364 20.0887C16.1887 19.9841 16.4612 19.9374 16.7339 19.9519C17.0067 19.9664 17.2727 20.0418 17.5125 20.1725L17.9 20.385C19.5037 21.2575 21.2575 19.5037 20.3837 17.9012L20.1725 17.5125C20.0418 17.2727 19.9664 17.0067 19.9519 16.7339C19.9374 16.4612 19.9841 16.1887 20.0887 15.9364C20.1932 15.6841 20.3529 15.4583 20.556 15.2758C20.7591 15.0932 21.0005 14.9584 21.2625 14.8813L21.6875 14.7562C23.4375 14.24 23.4375 11.76 21.6875 11.2437L21.2625 11.1187C21.0005 11.0416 20.7591 10.9068 20.556 10.7242C20.3529 10.5417 20.1932 10.3159 20.0887 10.0636C19.9841 9.8113 19.9374 9.53878 19.9519 9.26606C19.9664 8.99333 20.0418 8.72731 20.1725 8.4875L20.385 8.1C21.2575 6.49625 19.5037 4.7425 17.9012 5.61625L17.5125 5.8275C17.2727 5.9582 17.0067 6.03356 16.7339 6.04807C16.4612 6.06258 16.1887 6.01585 15.9364 5.91133C15.6841 5.80681 15.4583 5.64713 15.2758 5.44402C15.0932 5.2409 14.9584 4.99949 14.8813 4.7375L14.7562 4.3125ZM13 16.6625C12.0286 16.6625 11.0971 16.2766 10.4102 15.5898C9.72337 14.9029 9.3375 13.9714 9.3375 13C9.3375 12.0286 9.72337 11.0971 10.4102 10.4102C11.0971 9.72337 12.0286 9.3375 13 9.3375C13.971 9.3375 14.9023 9.72324 15.5889 10.4099C16.2755 11.0965 16.6613 12.0277 16.6613 12.9987C16.6613 13.9698 16.2755 14.901 15.5889 15.5876C14.9023 16.2743 13.971 16.66 13 16.66V16.6625Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7562 4.3125C14.24 2.5625 11.76 2.5625 11.2437 4.3125L11.1187 4.7375C11.0416 4.99949 10.9068 5.2409 10.7242 5.44402C10.5417 5.64713 10.3159 5.80681 10.0636 5.91133C9.8113 6.01585 9.53878 6.06258 9.26606 6.04807C8.99333 6.03356 8.72731 5.9582 8.4875 5.8275L8.1 5.615C6.49625 4.7425 4.7425 6.49625 5.61625 8.09875L5.8275 8.4875C6.385 9.5125 5.85625 10.7887 4.7375 11.1187L4.3125 11.2437C2.5625 11.76 2.5625 14.24 4.3125 14.7562L4.7375 14.8813C4.99949 14.9584 5.2409 15.0932 5.44402 15.2758C5.64713 15.4583 5.80681 15.6841 5.91133 15.9364C6.01585 16.1887 6.06258 16.4612 6.04807 16.7339C6.03356 17.0067 5.9582 17.2727 5.8275 17.5125L5.615 17.9C4.7425 19.5037 6.49625 21.2575 8.09875 20.3837L8.4875 20.1725C8.72731 20.0418 8.99333 19.9664 9.26606 19.9519C9.53878 19.9374 9.8113 19.9841 10.0636 20.0887C10.3159 20.1932 10.5417 20.3529 10.7242 20.556C10.9068 20.7591 11.0416 21.0005 11.1187 21.2625L11.2437 21.6875C11.76 23.4375 14.24 23.4375 14.7562 21.6875L14.8813 21.2625C14.9584 21.0005 15.0932 20.7591 15.2758 20.556C15.4583 20.3529 15.6841 20.1932 15.9364 20.0887C16.1887 19.9841 16.4612 19.9374 16.7339 19.9519C17.0067 19.9664 17.2727 20.0418 17.5125 20.1725L17.9 20.385C19.5037 21.2575 21.2575 19.5037 20.3837 17.9012L20.1725 17.5125C20.0418 17.2727 19.9664 17.0067 19.9519 16.7339C19.9374 16.4612 19.9841 16.1887 20.0887 15.9364C20.1932 15.6841 20.3529 15.4583 20.556 15.2758C20.7591 15.0932 21.0005 14.9584 21.2625 14.8813L21.6875 14.7562C23.4375 14.24 23.4375 11.76 21.6875 11.2437L21.2625 11.1187C21.0005 11.0416 20.7591 10.9068 20.556 10.7242C20.3529 10.5417 20.1932 10.3159 20.0887 10.0636C19.9841 9.8113 19.9374 9.53878 19.9519 9.26606C19.9664 8.99333 20.0418 8.72731 20.1725 8.4875L20.385 8.1C21.2575 6.49625 19.5037 4.7425 17.9012 5.61625L17.5125 5.8275C17.2727 5.9582 17.0067 6.03356 16.7339 6.04807C16.4612 6.06258 16.1887 6.01585 15.9364 5.91133C15.6841 5.80681 15.4583 5.64713 15.2758 5.44402C15.0932 5.2409 14.9584 4.99949 14.8813 4.7375L14.7562 4.3125ZM13 16.6625C12.0286 16.6625 11.0971 16.2766 10.4102 15.5898C9.72337 14.9029 9.3375 13.9714 9.3375 13C9.3375 12.0286 9.72337 11.0971 10.4102 10.4102C11.0971 9.72337 12.0286 9.3375 13 9.3375C13.971 9.3375 14.9023 9.72324 15.5889 10.4099C16.2755 11.0965 16.6613 12.0277 16.6613 12.9987C16.6613 13.9698 16.2755 14.901 15.5889 15.5876C14.9023 16.2743 13.971 16.66 13 16.66V16.6625Z" fill="#FFFFFF"/>
 </svg>
diff --git a/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css b/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css
index eab256b3..6115497d 100644
--- a/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/ButtonGroup/index.module.css
@@ -15,9 +15,9 @@
     padding: 0px 8px;
     gap: 4px;
     border-radius: 99px;
-    border: 1px solid rgba(255, 255, 255, 0.07);
-    background: rgba(99, 101, 240, 0.00);
-    color: #8C8C8C;
+    border: 1px solid var(--gj-border);
+    background: transparent;
+    color: var(--gj-text-tertiary);
     font-feature-settings: 'clig' off, 'liga' off;
     font-family: Inter;
     font-size: 16px;
@@ -28,9 +28,11 @@
 
 .containerButton:hover {
     cursor: pointer;
+    background: var(--gj-bg-hover);
+    color: var(--gj-text-primary);
 }
 
 .containerButton.active {
-    background: rgba(255, 255, 255, 0.06);
-    color: #FFF;
+    background: var(--gj-bg-selected);
+    color: var(--gj-text-primary);
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/CommentView/index.module.css b/Grayjay.Desktop.Web/src/components/CommentView/index.module.css
index 92b15462..f7012d42 100644
--- a/Grayjay.Desktop.Web/src/components/CommentView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/CommentView/index.module.css
@@ -6,7 +6,7 @@
 }
 
 .container:focus-visible {
-    background-color: #2e2e2e;
+    background-color: var(--gj-bg-hover);
     border-radius: 6px;
     outline: unset;
 }
@@ -25,7 +25,7 @@
 }
 
 .text {
-    color: #D9D9D9;
+    color: var(--gj-text-secondary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -41,7 +41,7 @@
 }
 
 .text > a {
-    color: #019BE7;
+    color: var(--gj-accent);
     text-decoration: none;
 }
 
@@ -66,7 +66,7 @@
 .containerAuthorThumbnail svg { 
     width: 100%;
     height: 100%;
-    background-color: #000;
+    background-color: var(--gj-bg-card);
     border-radius: 50%;
 }
 
@@ -77,7 +77,7 @@
 }
 
 .authorName {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -88,7 +88,7 @@
 }
 
 .metadata {
-    color: #888;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -106,9 +106,9 @@
     align-items: center; 
     gap: 4px; 
     border-radius: 99px; 
-    border: 1px solid #454545; 
+    border: 1px solid var(--gj-border-strong); 
     overflow: hidden; 
-    color: #FFF; 
+    color: var(--gj-text-primary); 
     text-align: center; 
     font-family: Inter; 
     font-size: 14px; 
@@ -116,4 +116,12 @@
     font-weight: 500; 
     line-height: 140%; 
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .buttonList img {
+    filter: brightness(0) saturate(100%);
+}
+
+:global(:root[data-theme="light"]) .repiesButton img {
+    filter: brightness(0) saturate(100%);
+}
diff --git a/Grayjay.Desktop.Web/src/components/DonationOverlay/index.module.css b/Grayjay.Desktop.Web/src/components/DonationOverlay/index.module.css
index 590ec922..66178b21 100644
--- a/Grayjay.Desktop.Web/src/components/DonationOverlay/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/DonationOverlay/index.module.css
@@ -1,7 +1,7 @@
 .backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(0,0,0,0.5);
+    background: var(--gj-bg-backdrop);
     display: flex;
     align-items: flex-start;
     justify-content: center;
@@ -15,8 +15,8 @@
     width: 100%;
     max-width: none;
     padding: 16px;
-    border-radius: 0;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+    border-radius: 6px;
+    box-shadow: var(--gj-shadow);
     background-color: var(--bg-color);
     color: var(--fg-color);
     display: flex;
@@ -24,7 +24,6 @@
     gap: 8px;
     animation: fadeIn 200ms ease-out forwards;
     z-index: 11;
-    border-radius: 6px;
 }
 
 .header {
@@ -65,10 +64,10 @@
 
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(-10px); }
-    to     { opacity: 1; transform: translateY(0); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes fadeOut {
     from { opacity: 1; }
-    to     { opacity: 0; }
-}
\ No newline at end of file
+    to { opacity: 0; }
+}
diff --git a/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css b/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css
index 9346f498..40fb83bf 100644
--- a/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/EmptyContentView/index.module.css
@@ -7,7 +7,7 @@
 }
 .noSubs .title {
     margin-top: 16px;
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     text-align: center;
     font-family: Inter;
@@ -18,7 +18,7 @@
 }
 .noSubs .description {
     margin-top: 8px;
-    color: #575757;
+    color: var(--gj-text-secondary);
     text-align: center;
     font-family: Inter;
     font-size: 18px;
@@ -28,4 +28,9 @@
 }
 .noSubs .buttons {
     margin-top: 24px;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .container :global(.icon) img {
+    filter: brightness(0) saturate(100%);
+    opacity: 0.42 !important;
+}
diff --git a/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css b/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css
index 7f731979..6ea1e9bd 100644
--- a/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/GlobalContextMenu/index.module.css
@@ -1,8 +1,8 @@
 .menu{
-    background-color: #141414;
+    background-color: var(--gj-bg-elevated);
     padding: 12px;
     border-radius: 10px;
     border-radius: 10px;
-    border: 1px solid #2E2E2E;
-    box-shadow: 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.06), 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.10), 0px 20px 13px 0px rgba(0, 0, 0, 0.13), 0px 38.519px 25.481px 0px rgba(0, 0, 0, 0.15), 0px 64.815px 46.852px 0px rgba(0, 0, 0, 0.19), 0px 100px 80px 0px rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--gj-border);
+    box-shadow: var(--gj-shadow);
 }
diff --git a/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css b/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css
index ad7e6433..9dbe82d6 100644
--- a/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/LiveChatRemoteWindow/index.module.css
@@ -1,5 +1,3 @@
-
-
 .container {
     width: 100%;
     height: 640px;
@@ -9,14 +7,17 @@
 .window {
     height: 100%;
     padding: 10px;
-    background-color: #111;
+    background-color: var(--gj-bg-panel);
     border-radius: 10px;
-    border: 2px solid #222;
+    border: 1px solid var(--gj-border);
     box-sizing: border-box;
+    box-shadow: var(--gj-shadow);
 }
+
 .window iframe {
     width: 100%;
     height: 100%;
-    border: 1px solid black;
+    border: 1px solid var(--gj-border);
     border-radius: 10px;
-}
\ No newline at end of file
+    background: var(--gj-bg-panel);
+}
diff --git a/Grayjay.Desktop.Web/src/components/LiveChatWindow/index.module.css b/Grayjay.Desktop.Web/src/components/LiveChatWindow/index.module.css
index 8547e5b8..781744b3 100644
--- a/Grayjay.Desktop.Web/src/components/LiveChatWindow/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/LiveChatWindow/index.module.css
@@ -2,7 +2,9 @@
     width: 100%;
     height: 640px;
     border-radius: 6px;
-    border: #2E2E2E 1px solid;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
     display: flex;
     flex-direction: column;
 }
@@ -10,11 +12,10 @@
 .containerHeader {
     width: 100%;
     height: 48px;
-
-    border-bottom: #2E2E2E 1px solid;
-    background: rgb(15, 15, 15);
+    border-bottom: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel-strong);
+    color: var(--gj-text-primary);
     box-sizing: border-box;
-
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -28,9 +29,8 @@
     width: 100%;
     flex-grow: 1;
     overflow: hidden;
-
-    border: #2E2E2E 1px solid;
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
     box-sizing: border-box;
 }
 
@@ -43,7 +43,7 @@
 }
 
 .liveChatItem:hover {
-    background: rgba(255, 255, 255, 0.1);
+    background: var(--gj-bg-hover);
 }
 
 .liveChatAuthorImage {
@@ -58,7 +58,7 @@
 .liveChatContent {
     display: inline;
     font-size: 13px;
-    color: white;
+    color: var(--gj-text-primary);
     line-height: 1.4;
     word-break: break-word;
     flex: 1;
@@ -67,14 +67,16 @@
 
 .liveChatAuthorName {
     font-weight: 500;
-    color: rgba(255, 255, 255, 0.7);
+    color: var(--gj-text-secondary);
     white-space: nowrap;
     margin-right: 8px;
 }
 
 .donationStripWrapper {
-  position: relative;
-  padding: 8px 16px;
+    position: relative;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--gj-border);
+    background: var(--gj-bg-soft);
 }
 
 .donationStrip {
@@ -85,31 +87,38 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
 }
+
 .donationStrip::-webkit-scrollbar {
     display: none;
 }
+
 .chevron {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 32px;
     height: 32px;
-    border: none;
-    background: rgba(0, 0, 0, 0.5);
-    color: white;
+    border: 1px solid var(--gj-border);
+    border-radius: 999px;
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
     font-size: 20px;
     cursor: pointer;
     z-index: 10;
     display: flex;
     align-items: center;
     justify-content: center;
+    box-shadow: var(--gj-shadow);
 }
+
 .chevron.left {
     left: 8px;
 }
+
 .chevron.right {
     right: 8px;
 }
+
 .hidden {
     display: none;
-}
\ No newline at end of file
+}
diff --git a/Grayjay.Desktop.Web/src/components/LiveChatWindow/index.tsx b/Grayjay.Desktop.Web/src/components/LiveChatWindow/index.tsx
index 52cf3785..78c1b969 100644
--- a/Grayjay.Desktop.Web/src/components/LiveChatWindow/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/LiveChatWindow/index.tsx
@@ -104,7 +104,7 @@ const LiveChatWindow: Component<LiveChatWindowProps> = (props) => {
         }}>
             <div class={styles.containerHeader}>
                 Chat
-                <span style="margin-left:auto; padding-right:14px; font-size:13px; color:rgba(255,255,255,0.5);">
+                <span style="margin-left:auto; padding-right:14px; font-size:13px; color:var(--gj-text-muted);">
                     {toHumanNumber((store.viewerCount == 0 ? (props.viewCount ?? 0) : store.viewerCount))} viewers
                 </span>
             </div>
@@ -153,7 +153,7 @@ const LiveChatWindow: Component<LiveChatWindowProps> = (props) => {
                                                 <img src={event.thumbnail} class={styles.liveChatAuthorImage} />
                                             </Show>
                                             <div class={styles.liveChatContent}>
-                                                <span class={styles.liveChatAuthorName} style={{ color: event.colorName || '#ffffff' }}>
+                                                <span class={styles.liveChatAuthorName} style={{ color: event.colorName || 'var(--gj-text-secondary)' }}>
                                                     {renderBadges(event.name.trim(), event.badges || [], store.emojis)}
                                                 </span>
                                                 <span class={styles.liveChatMessage}>{renderEmojis(event.message.trim(), store.emojis)}</span>
diff --git a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css
index b9464b2b..368cbe20 100644
--- a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.module.css
@@ -1,6 +1,6 @@
 .containerPlaybackQueue {
     border-radius: 12px;
-    border: 1px solid rgba(255, 255, 255, 0.13);
+    border: 1px solid var(--gj-border-muted);
 
     padding-top: 32px;
     padding-left: 12px;
@@ -9,7 +9,7 @@
 
 .title {
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 24px;
@@ -20,7 +20,7 @@
 
 .metadata {
     overflow: hidden;
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 14px;
@@ -30,7 +30,7 @@
 }
 
 .itemNumber {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     text-align: center;
     font-family: Inter;
     font-size: 12px;
@@ -43,13 +43,13 @@
 }
 
 .itemNumber:hover {
-    color: #fff;
+    color: var(--gj-text-primary);
 }
 
 
 .itemTitle {
     overflow: hidden;
-    color: #D9D9D9;
+    color: var(--gj-text-secondary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 14px;
@@ -61,7 +61,7 @@
 }
 
 .itemAuthor {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -90,4 +90,76 @@
 
 .itemDrag:hover .iconDrag {
     opacity: 1;
-}
\ No newline at end of file
+}
+
+.queueItem {
+    height: 80px;
+    margin-bottom: 8px;
+    margin-right: 12px;
+    display: flex;
+    flex-direction: row;
+    width: calc(100% - 12px);
+    align-items: center;
+    overflow: hidden;
+    gap: 8px;
+    border-radius: 8px;
+    color: var(--gj-text-primary);
+}
+
+.queueItemActive {
+    background-color: var(--gj-bg-card-active);
+    color: var(--gj-text-primary);
+}
+
+.queueItem:hover {
+    background-color: var(--gj-bg-card-hover);
+}
+
+.queueItemActive:hover {
+    background-color: var(--gj-bg-selected);
+}
+
+.queueThumbnail {
+    border-radius: 3px;
+    height: 56px;
+    width: 100px;
+    cursor: pointer;
+}
+
+.iconPlay,
+.queueRemoveIcon,
+.iconDrag {
+    filter: var(--gj-theme-icon-filter);
+}
+
+
+:global(:root[data-theme="light"]) .containerPlaybackQueue {
+    border-color: var(--gj-border);
+}
+
+:global(:root[data-theme="light"]) .title {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .metadata,
+:global(:root[data-theme="light"]) .itemNumber,
+:global(:root[data-theme="light"]) .itemAuthor {
+    color: var(--gj-text-tertiary);
+}
+
+:global(:root[data-theme="light"]) .itemTitle {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .itemNumber:hover {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .queueItemActive {
+    background-color: var(--gj-bg-card-active);
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .queueItemActive:hover {
+    background-color: var(--gj-bg-selected);
+}
diff --git a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx
index f742e47b..877ad9c0 100644
--- a/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/PlaybackQueue/index.tsx
@@ -75,19 +75,7 @@ const PlaybackQueue: Component<PlaybackQueueProps> = (props) => {
                             });
 
                             return (
-                                <div style={{
-                                    height: "80px",
-                                    "margin-bottom": "8px",
-                                    "margin-right": "12px",
-                                    "display": "flex",
-                                    "flex-direction": "row",
-                                    "width": "calc(100% - 12px)",
-                                    "align-items": "center",
-                                    "overflow": "hidden",
-                                    "gap": "8px",
-                                    "background-color": index() == props.index ? "#2E2E2E" : undefined,
-                                    "border-radius": "8px"
-                                }} onClick={() => {
+                                <div class={styles.queueItem} classList={{ [styles.queueItemActive]: index() === props.index }} onClick={() => {
                                     const v = video();
                                     if (!v) return;
                                     props.onVideoClick?.(v);
@@ -129,16 +117,15 @@ const PlaybackQueue: Component<PlaybackQueueProps> = (props) => {
                                                 <img class={styles.iconDrag} src={iconDrag} style="position: absolute;" />
                                             </>
                                         }>
-                                            <img src={iconPlay} style="position: absolute;" />
+                                            <img class={styles.iconPlay} src={iconPlay} style="position: absolute;" />
                                         </Show>
                                     </div>
-                                    <img src={bestThumbnail()?.url} 
-                                        style="border-radius: 3px; height: 56px; width: 100px; cursor: pointer;" />
+                                    <img src={bestThumbnail()?.url} class={styles.queueThumbnail} />
                                     <div style="display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; cursor: pointer;">
                                         <div class={styles.itemTitle}>{video()?.name}</div>
                                         <div class={styles.itemAuthor} style="margin-top: 6px">{video()?.author?.name}</div>
                                     </div>
-                                    <img src={iconClear} style="padding: 13px; height: 24px; width: 24px; cursor: pointer;" onClick={(ev) => {
+                                    <img class={styles.queueRemoveIcon} src={iconClear} style="padding: 13px; height: 24px; width: 24px; cursor: pointer;" onClick={(ev) => {
                                         const i = index();
                                         if (i !== undefined) {
                                             handleRemove(ev, i);
diff --git a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css
index 0e15009e..c62c812e 100644
--- a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.module.css
@@ -6,7 +6,7 @@
 }
 
 .header {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 29px;
     font-style: normal;
@@ -24,4 +24,13 @@
     gap: 12px;
     margin-top: 24px;
     margin-bottom: 12px;
-}
\ No newline at end of file
+}
+
+.metadata {
+    color: var(--gj-text-tertiary);
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
diff --git a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx
index d0f83142..38b45a80 100644
--- a/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/PlaylistDetailView/index.tsx
@@ -140,7 +140,7 @@ const PlaylistDetailView: Component<PlaylistDetailViewProps> = (props) => {
               showClearButton={true}
               inputContainerStyle={{
                 "height": "48px", 
-                "background": "#141414"
+                "background": "var(--gj-bg-input)"
               }}
               onTextChanged={(v) => {
                 setFilterText(v);
@@ -150,7 +150,7 @@ const PlaylistDetailView: Component<PlaylistDetailViewProps> = (props) => {
             text="Play all"
             icon={iconPlay}
             style={{
-              background: "linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)",
+              background: "var(--gj-accent-grad)",
               "flex-shrink": 0
             }}
             onClick={() => props.onPlayAll()}
@@ -160,8 +160,10 @@ const PlaylistDetailView: Component<PlaylistDetailViewProps> = (props) => {
           <CustomButton
             text="Shuffle"
             icon={iconShuffle}
+            iconStyle={{ filter: "var(--gj-theme-icon-filter)" }}
             style={{
-              border: "1px solid #2E2E2E",
+              border: "1px solid var(--gj-border)",
+              background: "var(--gj-bg-button-secondary)",
               "flex-shrink": 0
             }}
             onClick={() => props.onShuffleAll()}
diff --git a/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css b/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css
index d746fbfb..27d074d5 100644
--- a/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/PlaylistItemView/index.module.css
@@ -6,18 +6,18 @@
     height: 100%; 
     padding-top: 12px; 
     padding-bottom: 12px; 
-    border-bottom: 1px solid #2E2E2E; 
+    border-bottom: 1px solid var(--gj-border); 
     box-sizing: border-box; 
-    background-color: #141414
+    background-color: var(--gj-bg-root)
 }
 
 .container:focus-visible {
-    background-color: #2E2E2E;
+    background-color: var(--gj-bg-hover);
     outline: unset;
 }
 
 .metadata {
-    color: rgba(255, 255, 255, 0.60);
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -29,7 +29,7 @@
     display: flex;
     flex-direction: row;
     font-size: 16px;
-    color: #808080;
+    color: var(--gj-text-tertiary);
     align-items: center;
 }
 
@@ -52,6 +52,7 @@
 }
 
 .authorName {
+    color: var(--gj-text-secondary);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -67,11 +68,14 @@
     -webkit-line-clamp: 2;
     flex: 1 0 0;
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
     font-weight: 500;
     line-height: 20px; /* 125% */
-}
\ No newline at end of file
+}
+:global(:root[data-theme="light"]) .container > img:first-child {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/components/RaidOverlay/index.module.css b/Grayjay.Desktop.Web/src/components/RaidOverlay/index.module.css
index f8c69494..3b388eab 100644
--- a/Grayjay.Desktop.Web/src/components/RaidOverlay/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/RaidOverlay/index.module.css
@@ -1,7 +1,7 @@
 .backdrop {
     position: absolute;
     inset: 0;
-    background: rgba(0,0,0,0.5);
+    background: var(--gj-bg-backdrop);
     display: flex;
     align-items: flex-start;
     justify-content: center;
@@ -15,15 +15,16 @@
     width: 100%;
     max-width: none;
     padding: 16px;
-    border-radius: 0;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
-    background-color: #2A2A2A;
+    border-radius: 6px;
+    box-shadow: var(--gj-shadow);
+    background-color: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
+    border: 1px solid var(--gj-border);
     display: flex;
     flex-direction: column;
     gap: 8px;
     animation: fadeIn 200ms ease-out forwards;
     z-index: 11;
-    border-radius: 6px;
 }
 
 .raidHeader {
@@ -34,7 +35,7 @@
 }
 
 .raidMessage {
-    color: #737070;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     text-align: center;
 }
@@ -54,7 +55,7 @@
 
 .raidName {
     font-size: 15px;
-    color: #fff;
+    color: var(--gj-text-primary);
 }
 
 .raidButtons {
@@ -68,17 +69,23 @@
     flex: 1;
     padding: 10px 0;
     font-size: 13px;
-    border: none;
+    border: 1px solid var(--gj-border);
     border-radius: 4px;
     cursor: pointer;
 }
 
 .goButton {
-    background: #2f2f2f;
-    color: #fff;
+    background: var(--gj-bg-button-secondary);
+    color: var(--gj-text-primary);
 }
 
 .preventButton {
-    background: #481414;
-    color: #fff;
+    background: var(--gj-danger);
+    color: var(--gj-text-inverse);
+    border-color: var(--gj-danger);
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
 }
diff --git a/Grayjay.Desktop.Web/src/components/RatingView/index.module.css b/Grayjay.Desktop.Web/src/components/RatingView/index.module.css
index 294a67c1..1eb0b5c6 100644
--- a/Grayjay.Desktop.Web/src/components/RatingView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/RatingView/index.module.css
@@ -14,7 +14,7 @@
 
 .text {
     margin-left: 4px;
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -23,9 +23,23 @@
 }
 
 .text.active {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 
 .text.editable {
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+.icon {
+}
+
+.activeIcon {
+}
+
+:global(:root[data-theme="light"]) .icon {
+    filter: brightness(0) saturate(100%);
+}
+
+:global(:root[data-theme="light"]) .activeIcon {
+    filter: none;
+}
diff --git a/Grayjay.Desktop.Web/src/components/RatingView/index.tsx b/Grayjay.Desktop.Web/src/components/RatingView/index.tsx
index 66d24c50..1f9494ad 100644
--- a/Grayjay.Desktop.Web/src/components/RatingView/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/RatingView/index.tsx
@@ -21,7 +21,7 @@ const RatingView: Component<RatingViewProps> = (props) => {
     const renderLikes = (rating: IRatingLikes) => {
         return (
             <div class={styles.containerLikeDislike}>
-                <img src={props.hasLiked ? ic_like_active : ic_like_inactive} style="width: 32px; height: 32px;" />
+                <img src={props.hasLiked ? ic_like_active : ic_like_inactive} class={styles.icon} classList={{ [styles.activeIcon]: props.hasLiked }} style="width: 32px; height: 32px;" />
                 <div class={styles.text} classList={{ [styles.active]: props.hasLiked }}>{toHumanNumber(rating.likes ?? 0)}</div>
             </div>
         );
@@ -32,11 +32,11 @@ const RatingView: Component<RatingViewProps> = (props) => {
             <>
                 <div style="display: flex; flex-direction: row; align-items: center; height: 100%;">
                     <div class={styles.containerLikeDislike} classList={{ [styles.editable]: props.editable }}>
-                        <img src={props.hasLiked ? ic_like_active : ic_like_inactive} style="width: 32px; height: 32px;" />
+                        <img src={props.hasLiked ? ic_like_active : ic_like_inactive} class={styles.icon} classList={{ [styles.activeIcon]: props.hasLiked }} style="width: 32px; height: 32px;" />
                         <div class={styles.text} classList={{ [styles.active]: props.hasLiked }}>{toHumanNumber(rating.likes ?? 0)}</div>
                     </div>
                     <div class={styles.containerLikeDislike} classList={{ [styles.editable]: props.editable }} style={{ "margin-left": "12px" }}>
-                        <img src={props.hasDisliked ? ic_dislike_active : ic_dislike_inactive} style="width: 32px; height: 32px;" />
+                        <img src={props.hasDisliked ? ic_dislike_active : ic_dislike_inactive} class={styles.icon} classList={{ [styles.activeIcon]: props.hasDisliked }} style="width: 32px; height: 32px;" />
                         <div class={styles.text} classList={{ [styles.active]: props.hasDisliked }}>{toHumanNumber(rating.dislikes ?? 0)}</div>
                     </div>
                 </div>
diff --git a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css
index eebaae11..389e1a27 100644
--- a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.module.css
@@ -6,10 +6,19 @@
 }
 
 .header {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 29px;
     font-style: normal;
     font-weight: 700;
     line-height: normal;
-}
\ No newline at end of file
+}
+
+.metadata {
+    color: var(--gj-text-tertiary);
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+}
diff --git a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx
index 76356d4a..a9106c51 100644
--- a/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/RemotePlaylistDetailView/index.tsx
@@ -59,7 +59,7 @@ const RemotePlaylistDetailView: Component<RemotePlaylistDetailViewProps> = (prop
             text="Play all"
             icon={iconPlay}
             style={{
-              background: "linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)",
+              background: "var(--gj-accent-grad)",
               "flex-shrink": 0
             }}
             onClick={() => props?.onInteract?.()}
@@ -73,7 +73,8 @@ const RemotePlaylistDetailView: Component<RemotePlaylistDetailViewProps> = (prop
             text="Shuffle"
             icon={iconShuffle}
             style={{
-              border: "1px solid #2E2E2E",
+              border: "1px solid var(--gj-border)",
+              background: "var(--gj-bg-button-secondary)",
               "flex-shrink": 0
             }}
             onClick={() => props?.onInteract?.()}
diff --git a/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css b/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css
index 2d42e14e..7f59b004 100644
--- a/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/RepliesOverlay/index.module.css
@@ -19,7 +19,7 @@
 }
 
 .text {
-    color: #D9D9D9;
+    color: var(--gj-text-secondary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -56,7 +56,7 @@
 .containerAuthorThumbnail svg { 
     width: 100%;
     height: 100%;
-    background-color: #000;
+    background-color: var(--gj-bg-card);
     border-radius: 50%;
 }
 
@@ -67,7 +67,7 @@
 }
 
 .authorName {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -78,7 +78,7 @@
 }
 
 .metadata {
-    color: #888;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -96,9 +96,9 @@
     align-items: center; 
     gap: 4px; 
     border-radius: 99px; 
-    border: 1px solid #454545; 
+    border: 1px solid var(--gj-border-strong); 
     overflow: hidden; 
-    color: #FFF; 
+    color: var(--gj-text-primary); 
     text-align: center; 
     font-family: Inter; 
     font-size: 14px; 
@@ -106,4 +106,12 @@
     font-weight: 500; 
     line-height: 140%; 
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .buttonList img {
+    filter: brightness(0) saturate(100%);
+}
+
+:global(:root[data-theme="light"]) .repiesButton img {
+    filter: brightness(0) saturate(100%);
+}
diff --git a/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css
index 2067e078..5e3a820b 100644
--- a/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/ToggleButtonGroup/index.module.css
@@ -3,7 +3,7 @@
     align-items: flex-start;
     justify-content: center;
     border-radius: 8px;
-    border: 1px solid #454545;
+    border: 1px solid var(--gj-border-strong);
     overflow: hidden;
     height: 40px;
 }
@@ -23,10 +23,10 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 }
 
 .containerButton.active {
-    background: rgba(255, 255, 255, 0.06);
-    color: #FFF;
+    background: var(--gj-bg-hover);
+    color: var(--gj-text-primary);
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css
index d68dea10..ecd68c3f 100644
--- a/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/ToggleItemBigButtonGroupMulti/index.module.css
@@ -26,44 +26,45 @@
   align-items: center;
   flex-direction: column;
 
-  color: #FFF;
+  color: var(--gj-text-primary);
   gap: 4px;
   padding: 10px;
 
   border-radius: 6px;
   box-sizing: border-box;
-  background: #1B1B1B;
+  background: var(--gj-bg-card);
+  border: 1px solid var(--gj-border);
 
   overflow: hidden;
 }
 
 .containerButton:hover {
   cursor: pointer;
-  background: white;
-  color: #141414;
+  background: var(--btn-bg-focus);
+  color: var(--btn-text-focus);
   outline: unset;
 }
 
 .containerButton:focus-visible {
-  background: white;
-  color: #141414;
+  background: var(--btn-bg-focus);
+  color: var(--btn-text-focus);
   outline: unset;
 }
 
 .containerButton.active {
-  background: #2E2E2E;
-  color: #FFF;
+  background: var(--gj-bg-card-active);
+  color: var(--gj-text-primary);
 }
 
 .containerButton.active:hover {
-  background: white;
-  color: #141414;
+  background: var(--btn-bg-focus);
+  color: var(--btn-text-focus);
   outline: unset;
 }
 
 .containerButton.active:focus-visible {
-  background: white;
-  color: #141414;
+  background: var(--btn-bg-focus);
+  color: var(--btn-text-focus);
   outline: unset;
 }
 
diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css
index 993a4161..56f74a0d 100644
--- a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.module.css
@@ -3,7 +3,7 @@
     align-items: flex-start;
     justify-content: center;
     border-radius: 8px;
-    border: 1px solid #353535;
+    border: 1px solid var(--gj-border);
     overflow: hidden;
     height: 44px;
     width: fit-content;
@@ -23,21 +23,21 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     gap: 12px;
     padding-left: 24px;
     padding-right: 24px;
 }
 
 .containerButton.active {
-    background: rgba(255, 255, 255, 0.06);
-    color: #FFF;
+    background: var(--gj-bg-card-active);
+    color: var(--gj-text-primary);
 }
 
 .containerButton:hover {
   cursor: pointer;
-  background: white;
-  color: #141414;
+  background: var(--btn-bg-focus);
+  color: var(--btn-text-focus);
 }
 
 .containerButton:hover .icon {
@@ -49,11 +49,22 @@
 }
 
 .containerButton:focus-visible {
-  background: white;
-  color: #141414;
+  background: var(--btn-bg-focus);
+  color: var(--btn-text-focus);
   outline: unset;
 }
 
 .containerButton:focus-visible .icon {
     filter: var(--ib-icon-filter-focus, brightness(0) saturate(100%));
 }
+
+
+.separator {
+    height: 100%;
+    width: 1px;
+    background-color: var(--gj-border);
+}
+
+:global(:root[data-theme="light"]) .icon {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.tsx b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.tsx
index b1617108..46bef33e 100644
--- a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroup/index.tsx
@@ -40,7 +40,7 @@ const ToggleItemButtonGroup: Component<ToggleItemButtonGroupProps> = (props) =>
             <For each={props.items}>{(item, i) =>
                 <>
                     <Show when={i() > 0}>
-                        <div style="height: 100%; width: 1px; background-color: #454545;"></div>
+                        <div class={styles.separator}></div>
                     </Show>
                     <div class={styles.containerButton} classList={{ [styles.active]: item.value == selectedItem() }} onClick={() => toggleItem(item)} use:focusable={props.focusable ? {
                         onPress: () => toggleItem(item),
diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css
index ffa2040a..00421bf4 100644
--- a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.module.css
@@ -26,22 +26,22 @@
     padding-left: 24px;
     padding-right: 24px;
     align-items: center;
-    color: #FFF;
+    color: var(--gj-text-primary);
     gap: 4px;
 
     border-radius: 6px;
-    border: 1px solid #454545;
+    border: 1px solid var(--gj-border-strong);
     box-sizing: border-box;
 }
 
 .containerButton.active {
-    background: #2E2E2E;
-    border: 1px solid #2E2E2E;
+    background: var(--gj-bg-card-active);
+    border: 1px solid var(--gj-border-strong);
 }
 .containerButton:hover {
   cursor: pointer;
-  background: white;
-  color: #141414;
+  background: var(--btn-bg-focus);
+  color: var(--btn-text-focus);
   outline: unset;
 }
 
@@ -50,8 +50,8 @@
 }
 
 .containerButton:focus-visible {
-  background: white;
-  color: #141414;
+  background: var(--btn-bg-focus);
+  color: var(--btn-text-focus);
   outline: unset;
 }
 
@@ -65,4 +65,8 @@
   object-fit: contain;
   flex-shrink: 0;
   display: block; 
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .icon {
+  filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.tsx b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.tsx
index 338882a5..abffa4d6 100644
--- a/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/ToggleItemButtonGroupMulti/index.tsx
@@ -51,7 +51,7 @@ const ToggleItemButtonGroupMulti: Component<ToggleItemButtonGroupPropsMulti> = (
                         ... props.focusableGroupOpts
                     } : undefined}>
                         <Show when={item.icon}>
-                            <img src={item.icon} style={styles.icon} />
+                            <img src={item.icon} class={styles.icon} />
                         </Show>
                         <div>{item.text}</div>
                     </div>
diff --git a/Grayjay.Desktop.Web/src/components/basics/AnimatedImage/index.module.css b/Grayjay.Desktop.Web/src/components/basics/AnimatedImage/index.module.css
index ca6846fd..e1e5577b 100644
--- a/Grayjay.Desktop.Web/src/components/basics/AnimatedImage/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/AnimatedImage/index.module.css
@@ -12,7 +12,7 @@
 }
 
 .errorText {
-  color: white;
+  color: var(--gj-text-primary);
   width: 100%;
   height: 100%;
   display: flex;
diff --git a/Grayjay.Desktop.Web/src/components/basics/ViewTypeToggles/index.module.css b/Grayjay.Desktop.Web/src/components/basics/ViewTypeToggles/index.module.css
index 53327aa2..d2f5ce76 100644
--- a/Grayjay.Desktop.Web/src/components/basics/ViewTypeToggles/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/ViewTypeToggles/index.module.css
@@ -2,7 +2,7 @@
     height: 36px;
     margin: 4px;
     border-radius: 6px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
     overflow: hidden;
     flex-shrink: 0;
 }
@@ -11,14 +11,26 @@
     display: inline-block;
     align-items: center;
     justify-content: center;
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-panel);
 }
 .toggleViewType.enabled {
-    background-color: #262626 !important;
+    background-color: var(--gj-bg-card-active);
 }
 
 .toggleViewType img {
     padding: 10px;
     width: 16px;
     height: 16px;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .toggleViewType {
+    background-color: var(--gj-bg-panel-strong);
+}
+
+:global(:root[data-theme="light"]) .toggleViewType.enabled {
+    background-color: var(--gj-bg-card-active);
+}
+
+:global(:root[data-theme="light"]) .toggleViewType img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/Checkbox/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/Checkbox/index.module.css
index 3936335c..9c18604b 100644
--- a/Grayjay.Desktop.Web/src/components/basics/inputs/Checkbox/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/inputs/Checkbox/index.module.css
@@ -4,7 +4,7 @@
 }
 
 .checkbox {
-    border-color: #8C8C8C;
+    border-color: var(--gj-text-tertiary);
     border-radius: 4px;
     border-width: 1.5px;
     width: 20px;
@@ -17,8 +17,8 @@
 }
 
 .checkbox.checked {
-    border-color: #019BE7;
-    background-color: #019BE7;
+    border-color: var(--gj-accent);
+    background-color: var(--gj-accent);
 }
 
 .checkbox .check {
@@ -35,7 +35,7 @@
 }
 
 .label {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -49,5 +49,5 @@
 }
 
 .label.checked {
-    color: #fff;
+    color: var(--gj-text-primary);
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/CheckboxFlex/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/CheckboxFlex/index.module.css
index 3285c62f..9f929ec2 100644
--- a/Grayjay.Desktop.Web/src/components/basics/inputs/CheckboxFlex/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/inputs/CheckboxFlex/index.module.css
@@ -1,5 +1,5 @@
 .checkbox {
-    border-color: #8C8C8C;
+    border-color: var(--gj-text-tertiary);
     border-radius: 8px;
     border-width: 3.6px;
     width: 22px;
@@ -14,8 +14,8 @@
 }
 
 .checkbox.checked {
-    border-color: #019BE7;
-    background-color: #019BE7;
+    border-color: var(--gj-accent);
+    background-color: var(--gj-accent);
     border-radius: 8px;
     border-width: 3.6px;
     width: 22px;
diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/Dropdown/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/Dropdown/index.module.css
index 0946ed8b..6542e17c 100644
--- a/Grayjay.Desktop.Web/src/components/basics/inputs/Dropdown/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/inputs/Dropdown/index.module.css
@@ -3,9 +3,9 @@
   display: inline-block;
   flex-shrink: 0;
   border-radius: 6px;
-  border: 1px solid #2E2E2E;
+  border: 1px solid var(--gj-border);
   position: relative;
-  background: #141414;
+  background: var(--gj-bg-elevated);
 }
 
 .select {
@@ -13,7 +13,7 @@
   padding-right: 16px;
   padding-top: 4px;
   padding-bottom: 4px;
-  color: white;
+  color: var(--gj-text-primary);
   cursor: pointer;
   min-width: 128px;
 
@@ -43,11 +43,11 @@
   position: absolute;
   right: 0px;
   border-radius: 10px;
-  border: 1px solid #2E2E2E;
-  background: #141414;
+  border: 1px solid var(--gj-border);
+  background: var(--gj-bg-elevated);
   overflow-y: auto;
   scrollbar-width: thin;
-  scrollbar-color: #555 #333;
+  scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
   z-index: 999;
   max-height: 230px;
   width: 300px;
@@ -63,14 +63,14 @@
   width: 10px;
 }
 .optionsContainer::-webkit-scrollbar-thumb {
-  background-color: #555;
+  background-color: var(--gj-scroll-thumb);
   border-radius: 5px;
 }
 .optionsContainer::-webkit-scrollbar-thumb:hover {
-  background-color: #888;
+  background-color: var(--gj-scroll-thumb-hover);
 }
 .optionsContainer::-webkit-scrollbar-track {
-  background-color: #333;
+  background-color: var(--gj-scroll-track);
 }
 .optionsContainer::-webkit-scrollbar-corner {
   background-color: transparent;
@@ -83,7 +83,7 @@
   padding-right: 16px;
   padding-bottom: 16px;
   padding-top: 16px;
-  color: #FFF;
+  color: var(--gj-text-primary);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -97,21 +97,21 @@
 }
 
 .option:focus-visible {
-  background-color: #2E2E2E;
+  background-color: var(--gj-bg-selected);
   outline: unset;
 }
 
 .option.hover {
-  color: #FFF;
+  color: var(--gj-text-primary);
   
 }
 .option.selected {
-  background: #1B1B1B;
+  background: var(--gj-bg-panel);
   border-radius: 5px;
 }
 
 .option.selected:focus-visible {
-  background-color: #2E2E2E;
+  background-color: var(--gj-bg-selected);
   outline: unset;
 }
 
@@ -133,4 +133,12 @@
   font-style: normal;
   font-weight: 500;
   line-height: 22px; /* 183.333% */
-}
\ No newline at end of file
+}
+:global(:root[data-theme="light"]) .selectArrow img,
+:global(:root[data-theme="light"]) .option .selectIcon {
+  filter: var(--gj-theme-icon-filter);
+}
+
+:global(:root[data-theme="light"]) .labelText {
+    color: var(--gj-text-tertiary);
+}
diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/InputText/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/InputText/index.module.css
index 6bc25d73..da1e2bae 100644
--- a/Grayjay.Desktop.Web/src/components/basics/inputs/InputText/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/inputs/InputText/index.module.css
@@ -9,8 +9,8 @@
 
 .containerInputText {
     border-radius: 6px;
-    border: 1px solid #2E2E2E;
-    background: #1B1B1B;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-input);
     padding-top: 16px;
     padding-bottom: 16px;
     padding-left: 12px;
@@ -40,25 +40,25 @@
 }
 
 .containerInputText.error {
-    border: 1px solid #F97066;
-    caret-color: #F97066;
+    border: 1px solid var(--gj-danger-accent);
+    caret-color: var(--gj-danger-accent);
 }
 
 .containerInputText.error:hover {
-    border: 1px solid #F97066;
+    border: 1px solid var(--gj-danger-accent);
 }
 
 .containerInputText:hover {
-    border: 1px solid #595959;
+    border: 1px solid var(--gj-border-strong);
 }
 
 .containerInputText.disabled {
-    border: 1px solid #2E2E2E;
-    background: #141414;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-elevated);
 }
 
 .containerInputText.disabled::placeholder {
-    color: #262626;
+    color: var(--gj-text-tertiary);
 }
 
 .icon {
@@ -83,7 +83,7 @@
     flex-grow: 1;
     border: none;
     background: transparent;
-    color: white;
+    color: var(--gj-text-primary);
     font-weight: 400;
     font-size: 16px;
     line-height: 22px;
@@ -97,12 +97,12 @@
 }
 
 .searchInput::placeholder {
-    color: #494949;
+    color: var(--gj-text-tertiary);
 }
 
 .labelText {
     overflow: hidden;
-    color: #595959;
+    color: var(--gj-text-tertiary);
     text-overflow: ellipsis;
     white-space: nowrap;
     font-family: Inter;
@@ -124,10 +124,15 @@
 }
 
 .containerInputTextError {
-    color: #F97066;
+    color: var(--gj-danger-accent);
     font-family: Inter;
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
     line-height: 22px; /* 183.333% */
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .icon,
+:global(:root[data-theme="light"]) .iconClear {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/InputTextArea/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/InputTextArea/index.module.css
index 644763ac..4c6a0b16 100644
--- a/Grayjay.Desktop.Web/src/components/basics/inputs/InputTextArea/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/inputs/InputTextArea/index.module.css
@@ -1,8 +1,8 @@
 
 .containerInputText {
     border-radius: 6px;
-    border: 1px solid #2E2E2E;
-    background: #1B1B1B;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
 
     display: flex;
     flex-direction: row;
@@ -23,12 +23,12 @@
 }
 
 .containerInputText.error {
-    border: 1px solid #F97066;
-    caret-color: #F97066;
+    border: 1px solid var(--gj-danger-accent);
+    caret-color: var(--gj-danger-accent);
 }
 
 .containerInputText.error:hover {
-    border: 1px solid #F97066;
+    border: 1px solid var(--gj-danger-accent);
 }
 
 .containerInputText:hover {
@@ -36,8 +36,8 @@
 }
 
 .containerInputText.disabled {
-    border: 1px solid #2E2E2E;
-    background: #141414;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
 }
 
 .containerInputText.disabled::placeholder {
@@ -65,7 +65,7 @@
     flex-grow: 1;
     border: none;
     background: transparent;
-    color: white;
+    color: var(--gj-text-primary);
     font-weight: 400;
     font-size: 16px;
     line-height: 22px;
@@ -85,16 +85,16 @@
 }
 
 .searchInput::-webkit-scrollbar-thumb {
-    background-color: #555;
+    background-color: var(--gj-scroll-thumb);
     border-radius: 5px;
 }
 
 .searchInput::-webkit-scrollbar-thumb:hover {
-    background-color: #888;
+    background-color: var(--gj-scroll-thumb-hover);
 }
 
 .searchInput::-webkit-scrollbar-track {
-    background-color: #333;
+    background-color: var(--gj-scroll-track);
 }
 
 .searchInputs::-webkit-scrollbar-corner {
@@ -106,10 +106,25 @@
 }
 
 .containerInputTextError {
-    color: #F97066;
+    color: var(--gj-danger-accent);
     font-family: Inter;
     font-size: 12px;
     font-style: normal;
     font-weight: 500;
     line-height: 22px; /* 183.333% */
-}
\ No newline at end of file
+}
+:global(:root[data-theme="light"]) .containerInputText:hover {
+    border: 1px solid var(--gj-border-strong);
+}
+
+:global(:root[data-theme="light"]) .containerInputText.disabled::placeholder {
+    color: var(--gj-text-tertiary);
+}
+
+:global(:root[data-theme="light"]) .searchInput::placeholder {
+    color: var(--gj-text-tertiary);
+}
+
+:global(:root[data-theme="light"]) .iconClear:hover {
+    fill: var(--gj-text-primary);
+}
diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/SettingsDropdown/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/SettingsDropdown/index.module.css
index cc4f358d..7e938db1 100644
--- a/Grayjay.Desktop.Web/src/components/basics/inputs/SettingsDropdown/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/inputs/SettingsDropdown/index.module.css
@@ -3,7 +3,7 @@
   display: inline-block;
   flex-shrink: 0;
   border-radius: 6px;
-  border: 1px solid #2E2E2E;
+  border: 1px solid var(--gj-border);
 }
 
 .select {
@@ -12,7 +12,7 @@
   padding-right: 14px;
   padding-top: 4px;
   padding-bottom: 4px;
-  color: white;
+  color: var(--gj-text-primary);
   cursor: pointer;
 
   display: flex;
@@ -42,26 +42,26 @@
   position: absolute;
   
   border-radius: 10px;
-  border: 1px solid #2E2E2E;
-  background: #141414;
+  border: 1px solid var(--gj-border);
+  background: var(--gj-bg-elevated);
   max-height: 200px;
   overflow-y: auto;
   scrollbar-width: 8px;
-  scrollbar-color: #555 #333;
+  scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 .optionsContainer::-webkit-scrollbar {
   width: 10px;
 }
 .optionsContainer::-webkit-scrollbar-thumb {
-  background-color: #555;
+  background-color: var(--gj-scroll-thumb);
   border-radius: 5px;
 }
 .optionsContainer::-webkit-scrollbar-thumb:hover {
-  background-color: #888;
+  background-color: var(--gj-scroll-thumb-hover);
 }
 .optionsContainer::-webkit-scrollbar-track {
-  background-color: #333;
+  background-color: var(--gj-scroll-track);
 }
 .optionsContainer::-webkit-scrollbar-corner {
   background-color: transparent;
@@ -74,7 +74,7 @@
   padding-right: 10px;
   padding-bottom: 10px;
   padding-top: 10px;
-  color: #FFF;
+  color: var(--gj-text-primary);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -86,7 +86,7 @@
   display: inline-block;
 }
 .option.selected {
-  background: #1B1B1B;
+  background: var(--gj-bg-panel);
   border-radius: 5px;
 }
 
@@ -100,11 +100,14 @@
 
 .labelText {
   overflow: hidden;
-  color: #595959;
+  color: var(--gj-text-tertiary);
   text-overflow: ellipsis;
   font-family: Inter;
   font-size: 12px;
   font-style: normal;
   font-weight: 500;
   line-height: 22px; /* 183.333% */
-}
\ No newline at end of file
+}
+:global(:root[data-theme="light"]) .selectArrow img {
+  filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/Toggle/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/Toggle/index.module.css
index 40e5137e..f094a2d6 100644
--- a/Grayjay.Desktop.Web/src/components/basics/inputs/Toggle/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/inputs/Toggle/index.module.css
@@ -2,7 +2,7 @@
     border-radius: 30px;
     width: 52px;
     height: 32px;
-    background-color: #ffffff22;
+    background-color: var(--gj-bg-selected);
     display: inline-block;
     transition: background-color 0.5s;
     cursor: pointer;
@@ -12,7 +12,7 @@
     height: 22px;
     margin-top: 5px;
     margin-left: 5px;
-    background-color: #FFF;
+    background-color: var(--gj-bg-elevated);
     border-radius: 25px;
     transition: margin-left 0.5s;
 }
@@ -22,5 +22,5 @@
 }
 
 .toggle.enabled {
-    background-color: #019BE7;
+    background-color: var(--gj-accent);
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/basics/inputs/TogglePill/index.module.css b/Grayjay.Desktop.Web/src/components/basics/inputs/TogglePill/index.module.css
index bcace2c7..3793dd06 100644
--- a/Grayjay.Desktop.Web/src/components/basics/inputs/TogglePill/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/inputs/TogglePill/index.module.css
@@ -1,11 +1,11 @@
 .togglePill {
     width: 100px;
     border-radius: 6px;
-    border: 1px solid #444343;
+    border: 1px solid var(--gj-border-strong);
     padding-top: 8px;
     padding-bottom: 8px;
     text-align: center;
-    color: #BFBFBF;
+    color: var(--gj-text-secondary);
     background: transparant;
     display: inline-block;
 
@@ -20,5 +20,5 @@
 }
 .togglePill.enabled {
     border: 1px solid #02C6E7;
-    color: white;
+    color: var(--gj-text-primary);
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/CircleLoader/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/CircleLoader/index.module.css
index cb6796bc..b4eb6cd7 100644
--- a/Grayjay.Desktop.Web/src/components/basics/loaders/CircleLoader/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/loaders/CircleLoader/index.module.css
@@ -1,7 +1,7 @@
 .loader {
   width: 48px;
   height: 48px;
-  border: 3px solid #FFF;
+  border: 3px solid var(--gj-text-primary);
   border-bottom-color: transparent;
   border-radius: 50%;
   display: inline-block;
diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/Loader/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/Loader/index.module.css
index 8d2de226..889515d1 100644
--- a/Grayjay.Desktop.Web/src/components/basics/loaders/Loader/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/loaders/Loader/index.module.css
@@ -14,9 +14,9 @@
   border-radius: 50%;
   width: 100%;
   padding-bottom: 100%;
-  box-shadow: inset 0 0 0 0 #fff;
+  box-shadow: inset 0 0 0 0 var(--gj-text-primary);
   animation: pulseInOut 1.8s ease-in-out infinite;
-  filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
+  filter: drop-shadow(0 0 1rem var(--gj-loader-glow));
 }
 
 .loader:after {
@@ -25,29 +25,29 @@
   border-radius: 50%;
   width: calc(100% - 2 * var(--T));
   padding-bottom: calc(100% - 2 * var(--T));
-  box-shadow: 0 0 0 0 #fff;
+  box-shadow: 0 0 0 0 var(--gj-text-primary);
   animation: pulseOutIn 1.8s ease-in-out infinite;
-  filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
+  filter: drop-shadow(0 0 1rem var(--gj-loader-glow));
 }
 
 @keyframes pulseInOut {
   0%, 100% {
-    box-shadow: inset 0 0 0 0 #fff;
+    box-shadow: inset 0 0 0 0 var(--gj-text-primary);
     opacity: 0;
   }
   50% {
-    box-shadow: inset 0 0 0 var(--T) #fff;
+    box-shadow: inset 0 0 0 var(--T) var(--gj-text-primary);
     opacity: 1;
   }
 }
 
 @keyframes pulseOutIn {
   0%, 100% {
-    box-shadow: 0 0 0 0 #fff;
+    box-shadow: 0 0 0 0 var(--gj-text-primary);
     opacity: 0;
   }
   50% {
-    box-shadow: 0 0 0 var(--T) #fff;
+    box-shadow: 0 0 0 var(--T) var(--gj-text-primary);
     opacity: 1;
   }
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderContainer/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderContainer/index.module.css
index e68f9088..49607e1d 100644
--- a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderContainer/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderContainer/index.module.css
@@ -4,7 +4,7 @@
     position: relative;
 
     scrollbar-width: 8px;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 
@@ -30,5 +30,5 @@
   top: calc(50% + 95px);
   left: 50%;
   transform: translateX(-50%);
-  color: #AAA;
+  color: var(--gj-text-tertiary);
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderGrid/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderGrid/index.module.css
index 120be0db..264de3dc 100644
--- a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderGrid/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderGrid/index.module.css
@@ -3,5 +3,5 @@
     height: 100%;
     position: relative;
     scrollbar-width: 8px;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderSmall/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderSmall/index.module.css
index 8109960d..3cf0c6d5 100644
--- a/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderSmall/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/loaders/LoaderSmall/index.module.css
@@ -4,7 +4,7 @@
   position: relative;
 
   scrollbar-width: 8px;
-  scrollbar-color: #555 #333;
+  scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 /* HTML: <div class="loader"></div> */
@@ -13,7 +13,7 @@
   aspect-ratio: 1;
   border-radius: 50%;
   border: 4px solid;
-  border-color: #FFF #0000;
+  border-color: var(--gj-text-primary) #0000;
   animation: l1 1s infinite;
 }
 @keyframes l1 {to{transform: rotate(.5turn)}}
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/basics/loaders/SkeletonDiv/index.module.css b/Grayjay.Desktop.Web/src/components/basics/loaders/SkeletonDiv/index.module.css
index d30e1175..a8050125 100644
--- a/Grayjay.Desktop.Web/src/components/basics/loaders/SkeletonDiv/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/basics/loaders/SkeletonDiv/index.module.css
@@ -4,7 +4,7 @@
   height: 100%; /* Adjust to your container’s height */
   position: relative;
   overflow: hidden;
-  background: #1b1b1b; /* Solid base color */
+  background: var(--gj-bg-card); /* Solid base color */
 }
 
 .skeletonBox::before {
@@ -32,4 +32,14 @@
   100% { /* Moves across in 1.76 seconds */
       left: 100%;
   }
-}
\ No newline at end of file
+}
+:global(:root[data-theme="light"]) .skeletonBox::before {
+  background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(20, 20, 20, 0.04) 30%,
+      rgba(20, 20, 20, 0.12) 50%,
+      rgba(20, 20, 20, 0.04) 70%,
+      transparent 100%
+  );
+}
diff --git a/Grayjay.Desktop.Web/src/components/buttons/BorderButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/BorderButton/index.module.css
index a3738d3e..5edbc9fd 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/BorderButton/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/buttons/BorderButton/index.module.css
@@ -1,6 +1,6 @@
 .container {
     border-radius: 6px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
 
     display: flex;
     height: 56px;
@@ -11,7 +11,7 @@
     justify-content: center;
     box-sizing: border-box;
 
-    color: #D9D9D9;
+    color: var(--gj-text-secondary);
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
     font-family: Inter;
@@ -41,4 +41,7 @@
 .container.small .icon {
     height: 16px;
     width: 16px;
-}
\ No newline at end of file
+}
+:global(:root[data-theme="light"]) .icon {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/components/buttons/Button/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/Button/index.module.css
index 88539b66..c3ebd3fa 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/Button/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/buttons/Button/index.module.css
@@ -57,4 +57,13 @@
 
 .text {
   display: inline-block;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .container .icon {
+  filter: brightness(0) saturate(100%);
+}
+
+:global(:root[data-theme="light"]) .container:hover .icon,
+:global(:root[data-theme="light"]) .container:focus-visible .icon {
+  filter: brightness(0) saturate(100%);
+}
diff --git a/Grayjay.Desktop.Web/src/components/buttons/Button/index.tsx b/Grayjay.Desktop.Web/src/components/buttons/Button/index.tsx
index 14877cfd..010013de 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/Button/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/buttons/Button/index.tsx
@@ -26,10 +26,21 @@ const Button: Component<ButtonProps> = (props) => {
     };
 
     const style = createMemo(() => {
-        const bg = props.color ?? '#212122';
-        const bgFocus = props.focusColor ?? '#fff';
-        const text = props.textColor ?? '#fff';
-        const textFocus = props.focusTextColor ?? (props.focusColor ? text : '#141414');
+        const normalizeNeutral = (color: string | undefined, fallback: string) => {
+            if (!color) {
+                return fallback;
+            }
+            const normalized = color.trim().toLowerCase();
+            return (normalized === 'var(--gj-bg-control)' || normalized === '#2e2e2e' || normalized === '#222' || normalized === '#222222')
+                ? fallback
+                : color;
+        };
+
+        const bg = normalizeNeutral(props.color, 'var(--gj-bg-panel-strong)');
+        const isNeutral = bg === 'var(--gj-bg-panel-strong)';
+        const bgFocus = props.focusColor ?? (isNeutral ? 'var(--gj-bg-card-hover)' : 'var(--gj-text-primary)');
+        const text = props.textColor ?? (isNeutral ? 'var(--gj-text-primary)' : 'var(--gj-text-primary)');
+        const textFocus = props.focusTextColor ?? (isNeutral ? 'var(--gj-text-primary)' : (props.focusColor ? text : 'var(--gj-bg-popover)'));
         const iconFilterFocus = props.focusColor ? 'none' : 'brightness(0) saturate(100%)';
 
         return {
diff --git a/Grayjay.Desktop.Web/src/components/buttons/CustomButton/index.tsx b/Grayjay.Desktop.Web/src/components/buttons/CustomButton/index.tsx
index 6c58975a..ecd5a1d0 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/CustomButton/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/buttons/CustomButton/index.tsx
@@ -28,24 +28,25 @@ const CustomButton: Component<CustomButtonProps> = (props) => {
   const computedStyle = createMemo(() => {
     const raw = (props.style ?? {}) as Record<string, any>;
 
-    const bg =
+    const explicitBg =
       props.background ??
       raw.background ??
       raw.backgroundColor ??
-      raw['background-color'] ??
-      '#212122';
+      raw['background-color'];
+
+    const bg = explicitBg ?? 'var(--gj-bg-button-secondary)';
 
     const border = props.border ?? raw.border ?? 'none';
 
     const text =
       props.textColor ??
       raw.color ??
-      '#fff';
+      'var(--gj-text-primary)';
 
-    const bgFocus = props.focusColor ?? '#fff';
-    const textFocus = props.focusTextColor ?? (props.focusColor ? text : '#141414');
+    const bgFocus = props.focusColor ?? (explicitBg ? bg : 'var(--gj-bg-card-hover)');
+    const textFocus = props.focusTextColor ?? text;
     const iconFilterFocus =
-      props.iconFilterFocus ?? (props.focusColor ? 'none' : 'brightness(0) saturate(100%)');
+      props.iconFilterFocus ?? (explicitBg ? 'none' : 'var(--gj-theme-icon-filter)');
 
     const rest = { ...raw };
     delete rest.background;
diff --git a/Grayjay.Desktop.Web/src/components/buttons/DescriptorButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/DescriptorButton/index.module.css
index 3729182f..86df80ff 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/DescriptorButton/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/buttons/DescriptorButton/index.module.css
@@ -10,8 +10,8 @@
     padding-top: 15px;
     padding-bottom: 15px;
     display: inline-block;
-    background: linear-gradient(90deg, transparent, #3b3b3b4f);
-    border: 1.5px solid #2E2E2E;
+    background: linear-gradient(90deg, transparent, var(--gj-descriptor-gradient));
+    border: 1.5px solid var(--gj-border);
     position: relative;
     height: 90px;
     display: grid;
@@ -53,7 +53,7 @@
     width: 100%;
 }
 .text .title{ 
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 18px;
     font-style: normal;
@@ -63,7 +63,7 @@
     text-overflow: ellipsis;
 }
 .text .description{
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
diff --git a/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.module.css
index 4290859b..ff6e72d7 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.module.css
@@ -56,3 +56,27 @@
   display: block;
   object-fit: contain;
 }
+
+
+:global(:root[data-theme="light"]) .container.solid {
+  background: rgba(30, 30, 30, 0.10);
+}
+
+:global(:root[data-theme="light"]) .container.ghost {
+  background: rgba(30, 30, 30, 0.06);
+}
+
+:global(:root[data-theme="light"]) .container.solid:hover,
+:global(:root[data-theme="light"]) .container.ghost:hover,
+:global(:root[data-theme="light"]) .container.none:hover,
+:global(:root[data-theme="light"]) .container.solid:focus-visible,
+:global(:root[data-theme="light"]) .container.ghost:focus-visible,
+:global(:root[data-theme="light"]) .container.none:focus-visible {
+  background: rgba(30, 30, 30, 0.16);
+}
+
+:global(:root[data-theme="light"]) .container.solid .icon,
+:global(:root[data-theme="light"]) .container.ghost .icon,
+:global(:root[data-theme="light"]) .container.none .icon {
+  filter: brightness(0) saturate(100%);
+}
diff --git a/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.tsx b/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.tsx
index 3b7adf67..14d39b06 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/buttons/IconButton/index.tsx
@@ -29,7 +29,7 @@ const IconButton: Component<IconButtonProps> = (props) => {
     const shape = () => props.shape ?? 'circle';
 
     const computedStyle = createMemo(() => {
-        const bgFocus = props.focusColor ?? '#fff';
+        const bgFocus = props.focusColor ?? 'var(--gj-text-primary)';
         const iconFilterFocus =
             props.iconFilterFocus ??
             (props.focusColor ? 'none' : 'brightness(0) saturate(100%)');
diff --git a/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.module.css
index 2d1d1628..7f3b663f 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.module.css
@@ -1,5 +1,5 @@
 .container {
-    background-color: #ffffff0a;
+    background-color: var(--gj-bg-hover);
     border-radius: 6px;
     padding-left: 40px;
     padding-right: 40px;
@@ -16,7 +16,7 @@
     justify-content: center;
     box-sizing: border-box;
 
-    color: #EFF9FF;
+    color: var(--gj-text-primary);
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
     font-family: Inter;
diff --git a/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.tsx b/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.tsx
index b7c20fa7..738190d9 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/buttons/LoadingButton/index.tsx
@@ -22,7 +22,7 @@ const LoadingButton: Component<LoadingButtonProps> = (props) => {
     };
 
     return (
-        <div class={styles.container} onClick={handleClick} style={{... props.style, "background-color": props.color ?? "#212122", width: props.style?.width ?? "fit-content"}} classList={{[styles.small]: props.small}}>
+        <div class={styles.container} onClick={handleClick} style={{... props.style, "background-color": props.color ?? "var(--gj-bg-control)", width: props.style?.width ?? "fit-content"}} classList={{[styles.small]: props.small}}>
             <CircleLoader style={{height: "30px", width: "30px" }} />
         </div>
     );
diff --git a/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.module.css
index 111a63e7..8dd6d63b 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.module.css
@@ -53,3 +53,13 @@
     line-height: normal;
     margin-left: 2px;
 }
+
+
+:global(:root[data-theme="light"]) .container .icon {
+    filter: brightness(0) saturate(100%);
+}
+
+:global(:root[data-theme="light"]) .container:hover .icon,
+:global(:root[data-theme="light"]) .container:focus-visible .icon {
+    filter: brightness(0) saturate(100%);
+}
diff --git a/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.tsx b/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.tsx
index 6b849a0b..42e63576 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/buttons/PillButton/index.tsx
@@ -18,10 +18,21 @@ interface PillButtonProps {
 
 const PillButton: Component<PillButtonProps> = (props) => {
     const style = createMemo(() => {
-        const bg = props.color ?? '#212122';
-        const bgFocus = props.focusColor ?? '#fff';
-        const text = props.textColor ?? '#fff';
-        const textFocus = props.focusTextColor ?? (props.focusColor ? text : '#141414');
+        const normalizeNeutral = (color: string | undefined, fallback: string) => {
+            if (!color) {
+                return fallback;
+            }
+            const normalized = color.trim().toLowerCase();
+            return (normalized === 'var(--gj-bg-control)' || normalized === '#2e2e2e' || normalized === '#222' || normalized === '#222222')
+                ? fallback
+                : color;
+        };
+
+        const bg = normalizeNeutral(props.color, 'var(--gj-bg-panel-strong)');
+        const isNeutral = bg === 'var(--gj-bg-panel-strong)';
+        const bgFocus = props.focusColor ?? (isNeutral ? 'var(--gj-bg-card-hover)' : 'var(--gj-text-primary)');
+        const text = props.textColor ?? (isNeutral ? 'var(--gj-text-primary)' : 'var(--gj-text-primary)');
+        const textFocus = props.focusTextColor ?? (isNeutral ? 'var(--gj-text-primary)' : (props.focusColor ? text : 'var(--gj-bg-popover)'));
         const iconFilterFocus = props.focusColor ? 'none' : 'brightness(0) saturate(100%)';
 
         return {
diff --git a/Grayjay.Desktop.Web/src/components/buttons/PillButtonSmall/index.module.css b/Grayjay.Desktop.Web/src/components/buttons/PillButtonSmall/index.module.css
index dc92ab23..ca2777b0 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/PillButtonSmall/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/buttons/PillButtonSmall/index.module.css
@@ -6,7 +6,7 @@
     gap: 6px;
 
     border-radius: 22px;
-    background-color: #212122;
+    background-color: var(--gj-bg-panel-strong);
     padding-left: 20px;
     padding-right: 20px;
 }
@@ -21,7 +21,7 @@
 }
 
 .text {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     font-size: 16px;
     font-weight: 500;
diff --git a/Grayjay.Desktop.Web/src/components/buttons/SubscribeButton/index.tsx b/Grayjay.Desktop.Web/src/components/buttons/SubscribeButton/index.tsx
index 218a0ed7..9e874806 100644
--- a/Grayjay.Desktop.Web/src/components/buttons/SubscribeButton/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/buttons/SubscribeButton/index.tsx
@@ -44,7 +44,7 @@ const SubscribeButton: Component<SubscribeButtonProps> = (props) => {
     return (
         <>
             <Show when={!isSubscribing$() && (isSubscribed$() === true || (isSubscribed$() === undefined && props.isSubscribedInitialState === true))}>
-                <ButtonFlex style={{ width: "170px", ... props.style }} small={props.small} text="Unsubscribe" color="#2E2E2E" onClick={ () => {
+                <ButtonFlex style={{ width: "170px", ... props.style }} small={props.small} text="Unsubscribe" color="var(--gj-border)" onClick={ () => {
                     const url = props.author;
                     if (url)
                         unsubscribe(url);
@@ -57,7 +57,7 @@ const SubscribeButton: Component<SubscribeButtonProps> = (props) => {
                 } : undefined} />
             </Show>
             <Show when={!isSubscribing$() && (isSubscribed$() === false || (isSubscribed$() === undefined && props.isSubscribedInitialState === false))}>
-                <ButtonFlex style={{ width: "170px", ... props.style }} small={props.small} text="Subscribe" color="#019BE7" onClick={ () => {
+                <ButtonFlex style={{ width: "170px", ... props.style }} small={props.small} text="Subscribe" color="var(--gj-accent)" onClick={ () => {
                     const url = props.author;
                     if (url)
                         subscribe(url);
@@ -70,7 +70,7 @@ const SubscribeButton: Component<SubscribeButtonProps> = (props) => {
                 } : undefined} />
             </Show>
             <Show when={isSubscribing$()}>
-                <LoadingButton style={{ width: "170px", ... props.style }} small={props.small} text="" color="#019BE7" onClick={ () => {
+                <LoadingButton style={{ width: "170px", ... props.style }} small={props.small} text="" color="var(--gj-accent)" onClick={ () => {
                     
                 }} />
             </Show>
diff --git a/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.module.css b/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.module.css
index 31af6761..ceb64ce7 100644
--- a/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.module.css
@@ -2,7 +2,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    background-color: #0F0F0FDB;
+    background-color: var(--gj-bg-backdrop);
     width: 100vw;
     height: 100vh;
 
@@ -21,11 +21,11 @@
     flex-direction: column;
     align-items: flex-start;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-elevated);
 
     /* Drop Shadow */
-    box-shadow: 0px 2px 21px 0px rgba(0, 0, 0, 0.55), 0px 32px 64px 0px rgba(0, 0, 0, 0.56);
+    box-shadow: var(--gj-shadow);
 }
 
 .containerCastingHeader {
@@ -36,7 +36,7 @@
 }
 
 .containerCastingHeaderTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 20px;
     font-style: normal;
@@ -48,7 +48,7 @@
     width: 32px;
     height: 32px;
     border-radius: 50%;
-    background: #2E2E2E;
+    background: var(--gj-bg-card-active);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -68,7 +68,7 @@
 }
 
 .containerNoDevicesFoundTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 20px;
     font-style: normal;
@@ -89,7 +89,7 @@
     align-items: center;
     flex-direction: row;
 
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -134,7 +134,7 @@
 }
 
 .containerDevice:hover {
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-hover);
 }
 
 .containerDevice img {
@@ -144,7 +144,7 @@
 }
 
 .deviceName {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -158,7 +158,7 @@
 }
 
 .deviceType {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -183,7 +183,7 @@
 }
 
 .helpText {
-    color: #019BE7;
+    color: var(--gj-accent);
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
     font-family: Inter;
@@ -209,10 +209,58 @@
     flex-direction: column; 
     flex-grow: 1;
 
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 12px;
     font-style: normal;
     font-weight: 300;
     line-height: 16px; /* 133.333% */
-}
\ No newline at end of file
+}
+.divider {
+    height: 1px;
+    width: 100%;
+    background-color: var(--gj-border);
+    margin-top: 16px;
+}
+
+.deviceIcon {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.connectingBody {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 32px;
+}
+
+.connectingTitle {
+    color: var(--gj-text-primary);
+    font-family: Inter;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 600;
+}
+
+.connectingHelp {
+    color: var(--gj-text-tertiary);
+    text-align: center;
+    leading-trim: both;
+    text-edge: cap;
+    font-family: Inter;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin-top: 32px;
+}
+
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .containerDevice img,
+:global(:root[data-theme="light"]) .deviceIcon {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.tsx b/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.tsx
index 62608260..ebd38d2a 100644
--- a/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/casting/OverlayCasting/index.tsx
@@ -98,7 +98,7 @@ const CastingDeviceView: Component<CastingDeviceViewProps> = (props) => {
                 onOptionsLabel: 'Pin',
                 onOptions: () => props.pinned ? casting?.actions?.removePinnedDevice(props.device) : casting?.actions?.addPinnedDevice(props.device)
             }}>
-                <img src={icon$()} /> 
+                <img class={styles.deviceIcon} src={icon$()} /> 
                 <div style="display: flex; flex-direction: column; flex-grow: 1">
                     <div class={styles.deviceName}>{props.device.name}</div>
                     <div class={styles.deviceType}>{name}</div>
@@ -175,7 +175,7 @@ const DeviceList: Component = () => {
                     }}</For>
                 </div>
 
-                <div style="height: 1px; width: 100%; background-color: #2E2E2E; margin-top: 16px;"></div>
+                <div class={styles.divider}></div>
 
                 <div style="display: flex; flex-direction: row; width: 100%; margin-top: 20px;">
                     <div class={styles.containerUnableToSeeDevice}>
@@ -309,7 +309,7 @@ const AddDeviceManually: Component = () => {
                 <div style="flex-grow: 1"></div>
                 <ButtonFlex small={true} onClick={onClick}
                     text='Add device'
-                    color='#019BE7'
+                    color='var(--gj-accent)'
                     style={{
                         "height": "48px",
                         "width": "180px",
@@ -336,7 +336,7 @@ const ActiveDeviceView: Component = () => {
                 Casting to <Show when={casting?.activeDevice.state() != CastConnectionState.Connected}><CircleLoader style={{"width": "16px", "height": "16px", "margin-left": "8px"}} /></Show>
             </div>
             <div style="display: flex; flex-direction: row; width: 100%; align-items: center; margin-top: 12px;">
-                <img src={icon$()} /> 
+                <img class={styles.deviceIcon} src={icon$()} /> 
                 <div style="display: flex; flex-direction: column; flex-grow: 1; margin-left: 10px;">
                     <div class={styles.deviceName}>{casting?.activeDevice?.device()?.name}</div>
                     <div class={styles.deviceType}>{getDeviceTypeName(casting?.activeDevice?.device())}</div>
@@ -415,10 +415,10 @@ const OverlayCasting: Component = () => {
                                 <div style="flex-grow: 1"></div>
                             </div>
                             
-                            <div style="display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: center; margin-top: 32px">
-                                <div style="color: #FFF; font-family: Inter; font-size: 24px; font-style: normal; font-weight: 600;">Connecting to casting device</div>
+                            <div class={styles.connectingBody}>
+                                <div class={styles.connectingTitle}>Connecting to casting device</div>
                                 <CircleLoader style={{"margin-top": "16px"}} />
-                                <div style="color: #8C8C8C; text-align: center; leading-trim: both; text-edge: cap; font-family: Inter; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; text-align: center; margin-top: 32px">Make sure you are on the same network VPNs and guest networks can cause issues</div>
+                                <div class={styles.connectingHelp}>Make sure you are on the same network VPNs and guest networks can cause issues</div>
                             </div>
 
                             <div style="display: flex; width: 100%; flex-direction: column; justify-content: center; align-items: end; margin-top: 32px">
@@ -426,7 +426,7 @@ const OverlayCasting: Component = () => {
                                         casting?.actions.disconnect();
                                     }}
                                     text='Disconnect'
-                                    style={{ border: "1px solid rgba(1, 155, 231, 0)", "margin-left": "16px", "flex-shrink": "0" }}
+                                    style={{ border: "1px solid transparent", "margin-left": "16px", "flex-shrink": "0" }}
                                     focusableOpts={{
                                         onPress: async () => casting?.actions.disconnect(),
                                         onBack: globalBack
diff --git a/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.module.css b/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.module.css
index a76a3f30..c93283d6 100644
--- a/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/ContentGrid/index.module.css
@@ -11,16 +11,16 @@
 }
 
 .container::-webkit-scrollbar-thumb {
-    background-color: #555;
+    background-color: var(--gj-scroll-thumb);
     border-radius: 5px;
 }
 
 .container::-webkit-scrollbar-thumb:hover {
-    background-color: #888;
+    background-color: var(--gj-scroll-thumb-hover);
 }
 
 .container::-webkit-scrollbar-track {
-    background-color: #333;
+    background-color: var(--gj-scroll-track);
 }
 
 .container::-webkit-scrollbar-corner {
diff --git a/Grayjay.Desktop.Web/src/components/containers/DataTable/index.module.css b/Grayjay.Desktop.Web/src/components/containers/DataTable/index.module.css
index f3fd8205..3e2f8591 100644
--- a/Grayjay.Desktop.Web/src/components/containers/DataTable/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/DataTable/index.module.css
@@ -3,7 +3,7 @@
     height: 100%;
     position: relative;
     scrollbar-width: 8px;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
     scrollbar-width: thin;
 }
 
@@ -12,16 +12,16 @@
 }
 
 .containerScroll::-webkit-scrollbar-thumb {
-    background-color: #555;
+    background-color: var(--gj-scroll-thumb);
     border-radius: 5px;
 }
 
 .containerScroll::-webkit-scrollbar-thumb:hover {
-    background-color: #888;
+    background-color: var(--gj-scroll-thumb-hover);
 }
 
 .containerScroll::-webkit-scrollbar-track {
-    background-color: #333;
+    background-color: var(--gj-scroll-track);
 }
 
 .containerScroll::-webkit-scrollbar-corner {
@@ -36,7 +36,7 @@ table .header tr {
     border-bottom: 0px !important;
 }
 table .header th {
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
     padding-top: 16px;
     padding-bottom: 16px;
 }
@@ -54,12 +54,12 @@ table .headers th:last-child{
 
 table tr {
     max-height: 60px;
-    border-bottom: 1px solid #3b3939;
-    background: #141414;
+    border-bottom: 1px solid var(--gj-border);
+    background: var(--gj-bg-root);
 }
 table th {
     overflow: hidden;
-    color: #D9D9D9;
+    color: var(--gj-text-secondary);
     text-overflow: ellipsis;
     font-family: sans-serif;
     font-size: 14px;
@@ -89,4 +89,9 @@ table td .tableImage img {
 
 .isClickable {
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) table tr {
+    border-bottom: 1px solid var(--gj-border);
+    background: var(--gj-bg-root);
+}
diff --git a/Grayjay.Desktop.Web/src/components/containers/HorizontalScrollContainer/index.module.css b/Grayjay.Desktop.Web/src/components/containers/HorizontalScrollContainer/index.module.css
index b1ef992e..ece78119 100644
--- a/Grayjay.Desktop.Web/src/components/containers/HorizontalScrollContainer/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/HorizontalScrollContainer/index.module.css
@@ -3,7 +3,7 @@
     overflow-y: hidden;
     position: relative;
     scrollbar-width: 8px;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
     scrollbar-width: thin;
     display: flex;
     flex-direction: row;
@@ -14,16 +14,16 @@
 }
 
 .containerScroll::-webkit-scrollbar-thumb {
-    background-color: #555;
+    background-color: var(--gj-scroll-thumb);
     border-radius: 5px;
 }
 
 .containerScroll::-webkit-scrollbar-thumb:hover {
-    background-color: #888;
+    background-color: var(--gj-scroll-thumb-hover);
 }
 
 .containerScroll::-webkit-scrollbar-track {
-    background-color: #333;
+    background-color: var(--gj-scroll-track);
 }
 
 .containerScroll::-webkit-scrollbar-corner {
@@ -35,7 +35,7 @@
     overflow-y: hidden;
     position: relative;
     scrollbar-width: 8px;
-    scrollbar-color: #292929 transparent;
+    scrollbar-color: var(--gj-scroll-thumb) transparent;
     scrollbar-width: thin;
     display: flex;
     flex-direction: row;
diff --git a/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.module.css b/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.module.css
index 65d666b2..8f046959 100644
--- a/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.module.css
@@ -11,7 +11,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: 8px;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
     scrollbar-width: thin;
 }
 
@@ -20,16 +20,16 @@
 }
 
 .containerScroll::-webkit-scrollbar-thumb {
-    background-color: #555;
+    background-color: var(--gj-scroll-thumb);
     border-radius: 5px;
 }
 
 .containerScroll::-webkit-scrollbar-thumb:hover {
-    background-color: #888;
+    background-color: var(--gj-scroll-thumb-hover);
 }
 
 .containerScroll::-webkit-scrollbar-track {
-    background-color: #333;
+    background-color: var(--gj-scroll-track);
 }
 
 .containerScroll::-webkit-scrollbar-corner {
diff --git a/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.tsx b/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.tsx
index 8e5865c3..f2692885 100644
--- a/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/containers/ScrollContainer/index.tsx
@@ -66,7 +66,7 @@ const ScrollContainer: Component<ScrollContainerProps> = (p) => {
                         <div class={styles.scrollButton} onClick={handleButtonClick}>
                             <IconButton
                                 icon={props.scrollToTopButton ? ic_arrowUp : ic_arrowDown}
-                                style={{ border: "1px solid #454545" }}
+                                style={{ border: "1px solid var(--gj-border-strong)" }}
                             />
                         </div>
                     </Show>
diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldDropDown/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldDropDown/index.module.css
index bf4aeb27..8a37d882 100644
--- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldDropDown/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldDropDown/index.module.css
@@ -9,7 +9,7 @@
     flex-wrap: nowrap;
 }
 .container:focus-visible {
-    background: #454545;
+    background: var(--gj-bg-selected-strong);
     border-radius: 6px;
     outline: unset;
 }
@@ -17,7 +17,7 @@
     width: 60%;
 }
 .descriptor .title {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -29,7 +29,7 @@
     
 }
 .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -50,8 +50,8 @@
 
 .select {
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-elevated);
     padding: 14px;
-    color: white;
+    color: var(--gj-text-primary);
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldGroup/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldGroup/index.module.css
index b7f77841..e8d58bae 100644
--- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldGroup/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldGroup/index.module.css
@@ -1,14 +1,14 @@
 
 .container {
     width: 100%;
-    border-top: 1px solid #363636;
-    border-bottom: 1px solid #363636;
+    border-top: 1px solid var(--gj-border);
+    border-bottom: 1px solid var(--gj-border);
     padding-top: 24px;
     padding-bottom: 8px;
 }
 
 .header {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 20px;
     font-style: normal;
@@ -16,7 +16,7 @@
     line-height: 24px; /* 109.091% */
 }
 .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldKey/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldKey/index.module.css
index de205643..5f4fab09 100644
--- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldKey/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldKey/index.module.css
@@ -16,7 +16,7 @@
     margin-left: 20px;
 }
 .descriptor .title {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -31,7 +31,7 @@
     margin-bottom: 8px;
 }
 .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldReadOnly/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldReadOnly/index.module.css
index 83e64c4b..1e066c96 100644
--- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldReadOnly/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldReadOnly/index.module.css
@@ -13,7 +13,7 @@
     
 }
 .descriptor .title {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -23,7 +23,7 @@
     line-height: 24px; /* 133.333% */
 }
 .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldToggle/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldToggle/index.module.css
index 5da1232f..f65cb65a 100644
--- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldToggle/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/fields/FieldToggle/index.module.css
@@ -11,7 +11,7 @@
 }
 
 .container:focus-visible {
-    background: #454545;
+    background: var(--gj-bg-selected-strong);
     border-radius: 6px;
     outline: unset;
 }
@@ -19,7 +19,7 @@
     width: 60%;
 }
 .descriptor .title {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -29,7 +29,7 @@
     line-height: 24px; /* 133.333% */
 }
 .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
diff --git a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/index.module.css b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/index.module.css
index 55f083fd..90c72ef8 100644
--- a/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/containers/SettingsContainer/index.module.css
@@ -7,16 +7,16 @@
 }
 
 .container::-webkit-scrollbar-thumb {
-    background-color: #555;
+    background-color: var(--gj-scroll-thumb);
     border-radius: 5px;
 }
 
 .container::-webkit-scrollbar-thumb:hover {
-    background-color: #888;
+    background-color: var(--gj-scroll-thumb-hover);
 }
 
 .container::-webkit-scrollbar-track {
-    background-color: #333;
+    background-color: var(--gj-scroll-track);
 }
 
 .container::-webkit-scrollbar-corner {
diff --git a/Grayjay.Desktop.Web/src/components/content/CreatorView/index.module.css b/Grayjay.Desktop.Web/src/components/content/CreatorView/index.module.css
index 931e657e..492a9e55 100644
--- a/Grayjay.Desktop.Web/src/components/content/CreatorView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/content/CreatorView/index.module.css
@@ -4,7 +4,7 @@
     justify-content: center;
     align-items: center;
     border-radius: 8px;
-    background: #1B1B1B;
+    background: var(--gj-bg-card);
     margin-right: 16px;
     margin-bottom: 16px;
     height: calc(100% - 16px);
@@ -21,7 +21,7 @@
 
 .name {
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     text-align: center;
     text-wrap: nowrap;
     text-overflow: ellipsis;
@@ -36,7 +36,7 @@
 }
 
 .metadata {
-    color: #6a6a6a;
+    color: var(--gj-text-tertiary);
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
     font-family: Inter;
@@ -46,4 +46,10 @@
     font-weight: 400;
     line-height: 140%;
     margin-top: 4px;
-}
\ No newline at end of file
+}
+
+.containerCreator:focus-visible,
+.containerCreator:hover {
+    background: var(--gj-bg-card-hover);
+    outline: unset;
+}
diff --git a/Grayjay.Desktop.Web/src/components/content/LockedContentThumbnailView/index.module.css b/Grayjay.Desktop.Web/src/components/content/LockedContentThumbnailView/index.module.css
index fff2232f..0b0398d4 100644
--- a/Grayjay.Desktop.Web/src/components/content/LockedContentThumbnailView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/content/LockedContentThumbnailView/index.module.css
@@ -16,8 +16,11 @@
     width: 100%;
     height: auto;
     aspect-ratio: 16/9;
-    background-color: rgba(0,0,0,.5);
+    background: var(--gj-video-overlay-bg);
     border-radius: 8px;
+    border: 1px solid var(--gj-video-overlay-border);
+    color: var(--gj-video-overlay-text);
+    box-sizing: border-box;
 }
 .lockedTextContainer {
     margin-top: 30px;
@@ -35,7 +38,7 @@
 .lockedUrl {
     margin-top: 10px;
     font-size: 12px;
-    color: #0000DD;
+    color: var(--gj-accent);
 }
 
 
@@ -61,13 +64,13 @@
 
 .duration {
     border-radius: 4px;
-    background: #000000EE;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
+    color: var(--gj-thumbnail-badge-text);
     padding: 6px 8px;
-    color: #FFF;
+    color: var(--gj-thumbnail-badge-text);
 
     /*leading-trim: both; -NOT SUPPORTED YET BY BROWSERS*/
     
@@ -81,29 +84,13 @@
 }
 .isLive {
     border-radius: 4px;
-    background: red;
+    background: var(--gj-live-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
-    padding: 6px 8px;
-
+    color: var(--gj-live-badge-text);
     padding: 5px 8px;
 
-
-    color: #FFF;
-
-
-    
-
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 200;
-    line-height: normal;
-
-
-    color: #FFF;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -112,13 +99,13 @@
 }
 .isPlanned {
     border-radius: 3px;
-    background: #222;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
+    color: var(--gj-thumbnail-badge-text);
     padding: 6px 8px;
-    color: #FFF;
+    color: var(--gj-thumbnail-badge-text);
 
 
     
@@ -186,4 +173,14 @@
     line-height: 1.2em;
     height: 1.2em;
     flex-grow: 1;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .duration {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
+
+:global(:root[data-theme="light"]) .isPlanned {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
diff --git a/Grayjay.Desktop.Web/src/components/content/NestedMediaThumbnailView/index.module.css b/Grayjay.Desktop.Web/src/components/content/NestedMediaThumbnailView/index.module.css
index 698156f1..56cc0153 100644
--- a/Grayjay.Desktop.Web/src/components/content/NestedMediaThumbnailView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/content/NestedMediaThumbnailView/index.module.css
@@ -39,13 +39,13 @@
 
 .duration {
     border-radius: 4px;
-    background: #000000EE;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
+    color: var(--gj-thumbnail-badge-text);
     padding: 6px 8px;
-    color: #FFF;
+    color: var(--gj-thumbnail-badge-text);
 
     /*leading-trim: both; -NOT SUPPORTED YET BY BROWSERS*/
     
@@ -59,29 +59,13 @@
 }
 .isLive {
     border-radius: 4px;
-    background: red;
+    background: var(--gj-live-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
-    padding: 6px 8px;
-
+    color: var(--gj-live-badge-text);
     padding: 5px 8px;
 
-
-    color: #FFF;
-
-
-    
-
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 200;
-    line-height: normal;
-
-
-    color: #FFF;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -90,13 +74,13 @@
 }
 .isPlanned {
     border-radius: 3px;
-    background: #222;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
+    color: var(--gj-thumbnail-badge-text);
     padding: 6px 8px;
-    color: #FFF;
+    color: var(--gj-thumbnail-badge-text);
 
 
     
@@ -164,4 +148,14 @@
     line-height: 1.2em;
     height: 1.2em;
     flex-grow: 1;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .duration {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
+
+:global(:root[data-theme="light"]) .isPlanned {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
diff --git a/Grayjay.Desktop.Web/src/components/content/PlaceholderThumbnailView/index.module.css b/Grayjay.Desktop.Web/src/components/content/PlaceholderThumbnailView/index.module.css
index 36cbadb2..c5904202 100644
--- a/Grayjay.Desktop.Web/src/components/content/PlaceholderThumbnailView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/content/PlaceholderThumbnailView/index.module.css
@@ -50,7 +50,7 @@
     flex-direction: row;
     margin-top: 24px;
     font-size: 16px;
-    color: #808080;
+    color: var(--gj-text-tertiary);
     align-items: center;
     overflow: hidden;
 }
diff --git a/Grayjay.Desktop.Web/src/components/content/PlaylistView/index.module.css b/Grayjay.Desktop.Web/src/components/content/PlaylistView/index.module.css
index 1c1639bc..d9973979 100644
--- a/Grayjay.Desktop.Web/src/components/content/PlaylistView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/content/PlaylistView/index.module.css
@@ -1,4 +1,5 @@
 .container {
+    background: var(--gj-bg-card);
     width: 100%;
     height: 100%;
 
@@ -24,6 +25,7 @@
 }
 
 .title {
+    color: var(--gj-text-primary);
     font-size: 18px;
     font-weight: 500;
     height: 1.2em;
@@ -37,7 +39,7 @@
     aspect-ratio: 16/9;
     background-size: cover;
     border-radius: 8.88px;
-    background: #262626;
+    background: var(--gj-bg-card);
     
     position: absolute;
     left: 50%;
@@ -51,7 +53,7 @@
     aspect-ratio: 16/9;
     background-size: cover;
     border-radius: 8.88px;
-    background: #2F2F2F;
+    background: var(--gj-bg-card-active);
     
     position: absolute;
     left: 50%;
@@ -64,7 +66,7 @@
     width: 100%;
     aspect-ratio: 16/9;
     border-radius: 8.88px;
-    background: hsl(0, 0%, 22%);
+    background: var(--gj-bg-card);
     
     position: absolute;
     left: 50%;
@@ -75,7 +77,7 @@
     justify-content: center;
     align-items: center;
 
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -90,7 +92,7 @@
 
 .metadata {
     overflow: hidden;
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     text-overflow: ellipsis;
@@ -106,4 +108,22 @@
     bottom: 12px;
     left: 12px;
     width: 28px;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .container {
+    background: var(--gj-bg-panel);
+    border: 1px solid var(--gj-border);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+:global(:root[data-theme="light"]) .thumb2 {
+    background: var(--gj-bg-soft);
+}
+
+:global(:root[data-theme="light"]) .thumb1 {
+    background: var(--gj-bg-card);
+}
+
+:global(:root[data-theme="light"]) .thumb {
+    background: var(--gj-bg-panel);
+}
diff --git a/Grayjay.Desktop.Web/src/components/content/PostThumbnailView/index.module.css b/Grayjay.Desktop.Web/src/components/content/PostThumbnailView/index.module.css
index b066c72a..15b1a3d6 100644
--- a/Grayjay.Desktop.Web/src/components/content/PostThumbnailView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/content/PostThumbnailView/index.module.css
@@ -51,13 +51,13 @@
 
 .duration {
     border-radius: 4px;
-    background: #000000EE;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
+    color: var(--gj-thumbnail-badge-text);
     padding: 6px 8px;
-    color: #FFF;
+    color: var(--gj-thumbnail-badge-text);
 
     /*leading-trim: both; -NOT SUPPORTED YET BY BROWSERS*/
     
@@ -71,29 +71,13 @@
 }
 .isLive {
     border-radius: 4px;
-    background: red;
+    background: var(--gj-live-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
-    padding: 6px 8px;
-
+    color: var(--gj-live-badge-text);
     padding: 5px 8px;
 
-
-    color: #FFF;
-
-
-    
-
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 200;
-    line-height: normal;
-
-
-    color: #FFF;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -102,13 +86,13 @@
 }
 .isPlanned {
     border-radius: 3px;
-    background: #222;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
+    color: var(--gj-thumbnail-badge-text);
     padding: 6px 8px;
-    color: #FFF;
+    color: var(--gj-thumbnail-badge-text);
 
 
     
@@ -201,4 +185,22 @@
 }
 .thumbnail {
     z-index: 999;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .duration {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
+
+:global(:root[data-theme="light"]) .isPlanned {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
+
+:global(:root[data-theme="light"]) .description {
+    color: var(--gj-text-secondary);
+}
+
+:global(:root[data-theme="light"]) .descriptionOverlay {
+    background: linear-gradient(0deg, var(--gj-bg-root), var(--gj-bg-root), rgba(245, 245, 243, 0.0));
+}
diff --git a/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.module.css b/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.module.css
index 27cc1e4a..d8196f61 100644
--- a/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/content/VideoThumbnailView/index.module.css
@@ -43,13 +43,13 @@
 
 .duration {
     border-radius: 4px;
-    background: #000000EE;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
+    color: var(--gj-thumbnail-badge-text);
     padding: 6px 8px;
-    color: #FFF;
+    color: var(--gj-thumbnail-badge-text);
 
     /*leading-trim: both; -NOT SUPPORTED YET BY BROWSERS*/
     
@@ -63,29 +63,13 @@
 }
 .isLive {
     border-radius: 4px;
-    background: red;
+    background: var(--gj-live-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
-    padding: 6px 8px;
-
+    color: var(--gj-live-badge-text);
     padding: 5px 8px;
 
-
-    color: #FFF;
-
-
-    
-
-    font-family: Inter;
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 200;
-    line-height: normal;
-
-
-    color: #FFF;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -94,13 +78,13 @@
 }
 .isPlanned {
     border-radius: 3px;
-    background: #222;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
     right: 12px;
     bottom: 12px;
-    color: #D9D9D9;
+    color: var(--gj-thumbnail-badge-text);
     padding: 6px 8px;
-    color: #FFF;
+    color: var(--gj-thumbnail-badge-text);
 
 
     
@@ -180,4 +164,18 @@
 .progressBarProgress {
     height: 3px;
     background-color: #3333FFAA;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .duration {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
+
+:global(:root[data-theme="light"]) .isPlanned {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
+
+:global(:root[data-theme="light"]) .sourceIcon {
+    filter: none;
+}
diff --git a/Grayjay.Desktop.Web/src/components/contentDetails/PostDetailsView/index.module.css b/Grayjay.Desktop.Web/src/components/contentDetails/PostDetailsView/index.module.css
index c81aa0a5..23b5808a 100644
--- a/Grayjay.Desktop.Web/src/components/contentDetails/PostDetailsView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/contentDetails/PostDetailsView/index.module.css
@@ -99,7 +99,7 @@
 }
 
 .authorName {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -111,7 +111,7 @@
 }
 
 .authorMetadata {
-    color: #808080;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
diff --git a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.module.css b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.module.css
index 98a1826e..35a0fc03 100644
--- a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.module.css
@@ -2,7 +2,7 @@
     position: absolute;
     width: 100vw;
     height: 100vh;
-    background-color: #171719;
+    background-color: var(--gj-bg-root);
 
     display: flex;
     flex-direction: column;
@@ -17,6 +17,11 @@
     position: absolute;
     top: 20px;
     left: 20px;
+    width: 24px;
+    height: 24px;
+    padding: 8px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.42);
     transition: transform 0.1s;
     cursor: pointer;
 }
@@ -43,6 +48,11 @@
     position: absolute;
     top: 20px;
     right: 20px;
+    width: 24px;
+    height: 24px;
+    padding: 8px;
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.42);
     cursor: pointer;
 }
 
@@ -81,7 +91,7 @@
 }
 
 .authorName {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -93,7 +103,7 @@
 }
 
 .authorMetadata {
-    color: #808080;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -115,7 +125,7 @@
 }
 
 .title {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -133,7 +143,7 @@
 }
 
 .metadata {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: "Inter";
@@ -180,7 +190,7 @@
     gap: 8px;
     box-sizing: border-box;
 
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -196,7 +206,7 @@
 }
 
 .description > a {
-    color: #019BE7;
+    color: var(--gj-accent);
     text-decoration: none;
 }
 
@@ -211,7 +221,8 @@
     padding-top: 24px;
 
     border-radius: 12px;
-    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-card);
 }
 
 .showMoreShowLessFade {
@@ -227,7 +238,7 @@
     width: 100%;
     height: 100px;
     border-radius: 10px;
-    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #212122);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--gj-bg-card));
 
     pointer-events: none;
 }
@@ -242,7 +253,7 @@
     left: 0px;
     position: absolute;
     width: 100%;
-    color: #019BE7;
+    color: var(--gj-accent);
     cursor: pointer;
 }
 
@@ -260,7 +271,7 @@
 }
 
 .commentHeaderTitle {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
 
     font-family: Inter;
     font-size: 28px;
@@ -300,8 +311,8 @@
     gap: 12px; 
     align-self: stretch; 
     border-radius: 8px;
-    border: 1px solid #2E2E2E; 
-    background: #212121; 
+    border: 1px solid var(--gj-border); 
+    background: var(--gj-bg-card); 
     margin-left: 40px; 
     margin-right: 40px; 
     margin-top: 16px;
@@ -320,7 +331,7 @@
 
 .recommendationItemTitle {
     overflow: hidden;
-    color: #D9D9D9;
+    color: var(--gj-text-primary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 14px;
@@ -332,7 +343,7 @@
 }
 
 .recommendationItemAuthor {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -352,12 +363,31 @@
 .liveChatError {
     width: 70%;
     text-align: center;
-    background-color: #111;
+    background-color: var(--gj-bg-card);
     margin-left: auto;
     margin-right: auto;
     margin-top: 20px;
     margin-bottom: 20px;
     padding: 10px;
     border-radius: 10px;
-    color: #DD7777;
-}
\ No newline at end of file
+    color: #c65f5f;
+}
+
+
+/* player overlay controls must stay readable over video */
+.pinned,
+.loop {
+    border-radius: 999px;
+    background: rgba(0, 0, 0, 0.28);
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95));
+}
+
+.pinned:hover,
+.loop:hover {
+    background: rgba(0, 0, 0, 0.46);
+}
+
+:global(:root[data-theme="light"]) .loop,
+:global(:root[data-theme="light"]) .pinned {
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95));
+}
diff --git a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx
index 168fc07e..80433d70 100644
--- a/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/contentDetails/VideoDetailView/index.tsx
@@ -1894,7 +1894,7 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {
                                                 /*overscan={10}*/ />
                                         </Show>
                                         <Show when={commentsPager$()?.error}>
-                                            <div style="margin: 40px; text-align: center; color: #AA5555;">
+                                            <div style="margin: 40px; text-align: center; color: var(--gj-danger);">
                                                 {(typeof commentsPager$()?.error == 'string') ? commentsPager$()?.error : commentsPager$()?.error.title}
                                             </div>
                                         </Show>
@@ -2002,13 +2002,13 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {
                     "width": "100vw",
                     "height": "100vh",
                     "display": "flex",
-                    "background-color": "rgba(15, 15, 15, 0.86)",
+                    "background-color": "var(--gj-bg-backdrop)",
                     "justify-content": "center",
                     "align-items": "center",
                     "z-index": mode() === VideoMode.Theatre ? 2 : undefined
                 }} onClick={() => hideReplies()}>
                     <Show when={repliesPager$()} fallback={<Loader></Loader>}>
-                        <div style="border-radius: 12px; border: 1px solid #2E2E2E; background: #141414; box-shadow: 0px 63px 80px 0px rgba(0, 0, 0, 0.31), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07); display: flex; flex-direction: column; width: 80vw; max-width: 700px; max-height: 80vh; overflow: hidden;" onClick={(e) => {
+                        <div style="border-radius: 12px; border: 1px solid var(--gj-border); background: var(--gj-bg-panel); color: var(--gj-text-primary); box-shadow: var(--gj-shadow); display: flex; flex-direction: column; width: 80vw; max-width: 700px; max-height: 80vh; overflow: hidden;" onClick={(e) => {
                             e.stopPropagation();
                             e.preventDefault();
                         }}  use:focusScope={{
@@ -2026,8 +2026,8 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {
                                     hideReplies();
                                     e.stopPropagation();
                                     e.preventDefault();
-                                }} style="width: 32px; height: 32px; border-radius: 50%; background: #2E2E2E; display: flex; align-items: center; justify-content: center; cursor: pointer;">
-                                    <img src={icon_close} style="width: 19px; height: 19px;" />
+                                }} style="width: 32px; height: 32px; border-radius: 50%; background: var(--gj-bg-panel-strong); display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--gj-border);">
+                                    <img src={icon_close} style={{"width": "19px", "height": "19px", "filter": "var(--gj-theme-icon-filter)"}} />
                                 </div>
                             </div>
                             <ScrollContainer ref={repliesOverlayScrollContainerRef} scrollToTopButton={true}>
@@ -2037,7 +2037,7 @@ const VideoDetailView: Component<VideoDetailsProps> = (props) => {
                                             comment={item}
                                             onClick={(ev) => handleContainerClick(ev)}
                                             style={{
-                                                "background-color": "#2E2E2E",
+                                                "background-color": "var(--gj-bg-card-active)",
                                                 "border-radius": "8px",
                                                 "overflow": "hidden",
                                                 "padding-left": "12px",
diff --git a/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.module.css b/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.module.css
index 1b2367e0..4a5b4508 100644
--- a/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.module.css
@@ -8,7 +8,7 @@
 }
 .downloadingCard .title {
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -25,7 +25,7 @@
     text-wrap: nowrap;
 }
 .downloadingCard .author {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -41,7 +41,7 @@
     text-overflow: ellipsis;
 }
 .downloadingCard .meta {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -55,46 +55,40 @@
     height: auto;
     aspect-ratio: 16/9;
     position: relative;
-    background-color: white;
+    background-color: var(--gj-bg-card);
     background-size: cover;
     border-radius: 8px;
     overflow: hidden;
 }
 .downloadingCard .badgeStatus {
-    border-radius: 3px;
-    background: #000000EE;
+    border-radius: 4px;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
-    right: 10px;
-    bottom: 10px;
-    color: #D9D9D9;
+    right: 12px;
+    bottom: 12px;
+    color: var(--gj-thumbnail-badge-text);
     display: flex;
-    
-    text-edge: cap;
+    align-items: center;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
-    font-weight: 500;
+    font-weight: 200;
     line-height: normal;
-    padding: 6px 9px;
+    padding: 6px 8px;
 }
 .downloadingCard .badgeSize {
-    color: #FFF;
-    background: #000000EE;
-    border-radius: 3px;
-
-    leading-trim: both;
-    
-    text-edge: cap;
+    color: var(--gj-thumbnail-badge-text);
+    background: var(--gj-thumbnail-badge-bg);
+    border-radius: 4px;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
-    font-weight: 500;
+    font-weight: 200;
     line-height: normal;
-    padding: 6px 9px;
-
+    padding: 6px 8px;
     position: absolute;
-    bottom: 10px;
-    left: 10px;
+    bottom: 12px;
+    left: 12px;
 }
 
 .downloadingCard .progress {
@@ -105,4 +99,9 @@
     bottom: 0px;
     left: 0px;
     
-}
\ No newline at end of file
+}
+:global(:root[data-theme="light"]) .downloadingCard .badgeStatus,
+:global(:root[data-theme="light"]) .downloadingCard .badgeSize {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
diff --git a/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.tsx b/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.tsx
index 9241d8cb..dfa50735 100644
--- a/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/downloads/DownloadedView/index.tsx
@@ -83,33 +83,6 @@ const DownloadedView: Component<DownloadedViewProps> = (props) => {
         </Show>
     </div>
   )
-  /*
-  return (
-    <div style="background-color: #111; padding: 30px; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; position: relative;">
-      <div>
-        <img src={proxyImage(getBestThumbnail(downloading$().video.thumbnails)?.url)} style="position: absolute; left: 20px; top: 40px; width: 70px; height: 40px;"/>
-        <div style="margin-left: 80px; margin-bottom: 20px;">
-          <div>
-            {downloading$().video.name}
-          </div>
-          <div>
-            Download Speed: {downloading$().downloadSpeed}
-          </div>
-          <div>
-            State: {downloading$().state}
-          </div>
-          <Show when={downloading$().error}>
-            <div style="color: red;">
-              Error: {downloading$().error};
-            </div>
-          </Show>
-        </div>
-        <div style={{"height": "2px", width: parseInt(downloading$().progress * 100 + "") + "%", "background-color": "red"}}>
-
-        </div>
-      </div>
-    </div>
-  );*/
 };
 
-export default DownloadedView;
\ No newline at end of file
+export default DownloadedView;
diff --git a/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.module.css b/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.module.css
index 6b017660..f028e5a4 100644
--- a/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.module.css
@@ -5,7 +5,7 @@
     justify-content: center;
     align-items: center;
     border-radius: 8px;
-    background: #1B1B1B;
+    background: var(--gj-bg-card);
     margin-right: 12px;
     margin-bottom: 12px;
     padding: 12px;
@@ -19,7 +19,7 @@
 
 .name {
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     text-align: center;
     text-wrap: nowrap;
     text-overflow: ellipsis;
@@ -33,7 +33,7 @@
 }
 
 .metadata {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
     font-family: Inter;
@@ -52,7 +52,7 @@
 }
 .downloadingCard .title {
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -69,7 +69,7 @@
     text-wrap: nowrap;
 }
 .downloadingCard .author {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -85,7 +85,7 @@
     text-overflow: ellipsis;
 }
 .downloadingCard .meta {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -105,48 +105,42 @@
 }
 .downloadingCard .statusIcon {
     display: inline-block;
+    width: 16px;
     height: 16px;
-    margin-top:0px;
-    margin-right: 5px;
+    margin-top: 0px;
+    margin-right: 0px;
     vertical-align: top;
 }
 .downloadingCard .badgeStatus {
     display: flex;
-    border-radius: 3px;
-    background: #000;
+    align-items: center;
+    gap: 6px;
+    border-radius: 4px;
+    background: var(--gj-thumbnail-badge-bg);
     position: absolute;
-    right: 10px;
-    bottom: 10px;
-    color: #D9D9D9;
-    border-radius:99px;
-
-    
-    text-edge: cap;
+    right: 12px;
+    bottom: 12px;
+    color: var(--gj-thumbnail-badge-text);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
-    font-weight: 500;
+    font-weight: 200;
     line-height: normal;
-    padding: 8px;
+    padding: 6px 8px;
 }
 .downloadingCard .badgeSize {
-    color: #FFF;
-    background-color: black;
-    border-radius: 3px;
-
-    leading-trim: both;
-    
-    text-edge: cap;
+    color: var(--gj-thumbnail-badge-text);
+    background: var(--gj-thumbnail-badge-bg);
+    border-radius: 4px;
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
-    font-weight: 500;
+    font-weight: 200;
     line-height: normal;
-    padding: 8px;
-
+    padding: 6px 8px;
     position: absolute;
-    bottom: 10px;
-    left: 10px;
+    bottom: 12px;
+    left: 12px;
 }
 
 .downloadingCard .progress {
@@ -164,22 +158,22 @@
     left: 10px; 
     right: 10px; 
     top: 60px; 
-    background-color: #000000AA; 
+    background: var(--gj-thumbnail-badge-bg); 
     border-radius: 8px; 
     padding: 8px; 
     padding-top: 10px;
     padding-bottom: 10px;
     font-size: 12px; 
     text-align: center;
+    color: var(--gj-thumbnail-badge-text);
 }
 
 .downloadingCard .buttonCancel {
     position: absolute;
     right: 10px;
     top: 10px;
-    /* padding: 10px; */
     width: 15px;
-    background-color: #111111;
+    background-color: var(--gj-bg-popover);
     height: 15px;
     padding: 5px;
     border-radius: 3px;
@@ -187,4 +181,22 @@
 .downloadingCard .buttonCancel img {
     height: 100%;
     width: 100%;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .downloadingCard .buttonCancel {
+    background: var(--gj-thumbnail-badge-bg);
+}
+
+:global(:root[data-theme="light"]) .downloadingCard .buttonCancel img {
+    filter: var(--gj-theme-icon-filter);
+}
+
+:global(:root[data-theme="light"]) .downloadingCard .badgeStatus,
+:global(:root[data-theme="light"]) .downloadingCard .badgeSize {
+    background: var(--gj-thumbnail-badge-bg);
+    color: var(--gj-thumbnail-badge-text);
+}
+
+:global(:root[data-theme="light"]) .downloadingCard .statusIcon {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.tsx b/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.tsx
index c6b22630..53fb367b 100644
--- a/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/downloads/DownloadingView/index.tsx
@@ -169,33 +169,6 @@ const DownloadingView: Component<CreatorViewProps> = (props) => {
         </div>
     </div>
   )
-  /*
-  return (
-    <div style="background-color: #111; padding: 30px; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; position: relative;">
-      <div>
-        <img src={proxyImage(getBestThumbnail(downloading$().video.thumbnails)?.url)} style="position: absolute; left: 20px; top: 40px; width: 70px; height: 40px;"/>
-        <div style="margin-left: 80px; margin-bottom: 20px;">
-          <div>
-            {downloading$().video.name}
-          </div>
-          <div>
-            Download Speed: {downloading$().downloadSpeed}
-          </div>
-          <div>
-            State: {downloading$().state}
-          </div>
-          <Show when={downloading$().error}>
-            <div style="color: red;">
-              Error: {downloading$().error};
-            </div>
-          </Show>
-        </div>
-        <div style={{"height": "2px", width: parseInt(downloading$().progress * 100 + "") + "%", "background-color": "red"}}>
-
-        </div>
-      </div>
-    </div>
-  );*/
 };
 
-export default DownloadingView;
\ No newline at end of file
+export default DownloadingView;
diff --git a/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.module.css b/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.module.css
index fcd3785b..47f16c14 100644
--- a/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.module.css
@@ -7,7 +7,7 @@
     height:auto;
     z-index:9;
     max-height: 100%;
-    background-color: #141414;
+    background-color: var(--gj-bg-elevated);
     width: 320px;
     --menu-pad: 12px;
     padding-left: var(--menu-pad);
@@ -18,12 +18,12 @@
     margin-top: 6px;
 
     border-radius: 10px;
-    border: 1px solid #2E2E2E;
-    box-shadow: 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.06), 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.10), 0px 20px 13px 0px rgba(0, 0, 0, 0.13), 0px 38.519px 25.481px 0px rgba(0, 0, 0, 0.15), 0px 64.815px 46.852px 0px rgba(0, 0, 0, 0.19), 0px 100px 80px 0px rgba(0, 0, 0, 0.25);
+    border: 1px solid var(--gj-border);
+    box-shadow: var(--gj-shadow);
 }
 
 .title {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     leading-trim: both;
 
@@ -50,7 +50,7 @@
 
 .separator {
     height: 1px;
-    background: #2E2E2E;
+    background: var(--gj-border);
     margin-top: 3px;
     margin-bottom: 3px;
 }
@@ -64,7 +64,7 @@
     padding-right: calc(15px + var(--menu-pad));
 }
 .menuItem .key {
-    color: #D7D7D7;
+    color: var(--gj-text-secondary);
     font-size: 15px;
     font-style: normal;
     font-weight: 400;
@@ -74,7 +74,7 @@
     font-family: "Inter";
 }
 .menuItem .value {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 15px;
     width: calc(100% - 180px);
     text-align: right;
@@ -108,11 +108,11 @@
     padding-right: 6px;
     padding-top: 4px;
     padding-bottom: 4px;
-    background-color: rgba(0,0,0,.5);
-    border: 1px solid #222222;
+    background-color: var(--gj-bg-panel-strong);
+    border: 1px solid var(--gj-border);
 }
 .menuItem .filterHorizontalOption.isActive {
-    background-color: rgba(255,255,255,.1);
+    background-color: var(--gj-bg-selected);
 }
 .menuItem .filterHorizontalOption:first-child {
     border-top-left-radius: 5px;
@@ -133,10 +133,10 @@
 
 }
 .menuItem.isGroup:hover {
-    background-color: rgba(255,255,255,0.1);
+    background-color: var(--gj-bg-selected);
 }
 .menuItem.option:hover {
-    background-color: rgba(255,255,255,0.1);
+    background-color: var(--gj-bg-selected);
 }
 .menuItem .expander {
     position: absolute;
@@ -151,7 +151,7 @@
 }
 .menuItem .expander img {
     height: 100%;
-    color: #969696;
+    color: var(--gj-text-tertiary);
 }
 .menuItem.isGroup .expander {
     display: block;
@@ -204,7 +204,7 @@
     line-height: 15px;
     font-size: 14px;
     margin-top: 5px;
-    color: #555555;
+    color: var(--gj-text-tertiary);
 }
 
 .menuToggle {
@@ -238,7 +238,7 @@
 }
 
 .menuToggle .nameContainer .name {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -282,7 +282,7 @@
 }
 
 .menuHeader .nameContainer .name {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -313,6 +313,70 @@
 .menuButton:focus-visible,
 .menuToggle:focus-visible,
 .filterHorizontalOption:focus-visible {
-    background-color: #2e2e2e;
-    outline: none;
-}
\ No newline at end of file
+    background-color: var(--gj-bg-selected);
+}
+
+.pluginIcon {
+    filter: none;
+}
+
+:global(:root[data-theme="light"]) .menuToggle .pluginIcon {
+    filter: none;
+    opacity: 1;
+}
+
+:global(:root[data-theme="light"]) .menuItem .expander img,
+:global(:root[data-theme="light"]) .menu > div:first-child img {
+    filter: var(--gj-theme-icon-filter);
+}
+
+:global(:root[data-theme="light"]) .menuToggle .nameContainer .name,
+:global(:root[data-theme="light"]) .menuHeader .nameContainer .name,
+:global(:root[data-theme="light"]) .menuButton .name,
+:global(:root[data-theme="light"]) .menuButton .nameWithDescription,
+:global(:root[data-theme="light"]) .menuItem .name,
+:global(:root[data-theme="light"]) .menuItem .key,
+:global(:root[data-theme="light"]) .menuItem .value,
+:global(:root[data-theme="light"]) .filterHorizontalOption {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .menuToggle .nameContainer .description,
+:global(:root[data-theme="light"]) .menuHeader .nameContainer .description,
+:global(:root[data-theme="light"]) .menuButton .description {
+    color: var(--gj-text-tertiary);
+}
+
+:global(:root[data-theme="light"]) .menuButton .icon,
+:global(:root[data-theme="light"]) .menuToggle .icon:not(.pluginIcon),
+:global(:root[data-theme="light"]) .menuHeader .icon,
+:global(:root[data-theme="light"]) .menuItem .expander img,
+:global(:root[data-theme="light"]) .menu > div:first-child img {
+    filter: var(--gj-theme-icon-filter);
+    opacity: 1;
+}
+
+:global(:root[data-theme="light"]) .menuButton .icon {
+    width: 25px;
+    height: 25px;
+    flex-shrink: 0;
+}
+
+:global(:root[data-theme="light"]) .menuButton:hover,
+:global(:root[data-theme="light"]) .menuButton:focus-visible,
+:global(:root[data-theme="light"]) .menuToggle:hover,
+:global(:root[data-theme="light"]) .menuToggle:focus-visible,
+:global(:root[data-theme="light"]) .menuItem.option:hover,
+:global(:root[data-theme="light"]) .menuItem.option:focus-visible,
+:global(:root[data-theme="light"]) .menuItem.isGroup:hover,
+:global(:root[data-theme="light"]) .menuItem.isGroup:focus-visible {
+    background-color: var(--gj-bg-selected);
+}
+
+:global(:root[data-theme="light"]) .menuButton:hover,
+:global(:root[data-theme="light"]) .menuToggle:hover,
+:global(:root[data-theme="light"]) .menuItem.isGroup:hover,
+:global(:root[data-theme="light"]) .menuItem.option:hover,
+:global(:root[data-theme="light"]) .filterHorizontalOption:focus-visible {
+    background-color: var(--gj-bg-selected);
+}
diff --git a/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.tsx b/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.tsx
index b915ba0a..583a478a 100644
--- a/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/menus/Overlays/SettingsMenu/index.tsx
@@ -267,6 +267,22 @@ const SettingsMenu: Component<SettingsMenuProps> = (props: SettingsMenuProps) =>
         if(props.onHide)
           props.onHide();
     }
+    function isExternalMenuIcon(icon: string | undefined): boolean {
+      if (!icon) {
+        return false;
+      }
+
+      const normalized = icon.toLowerCase();
+      const isLocalAsset =
+        normalized.includes('/assets/') ||
+        normalized.includes('assets/icons') ||
+        normalized.includes('src/assets/') ||
+        normalized.startsWith('./assets/') ||
+        normalized.startsWith('../assets/');
+
+      return !isLocalAsset;
+    }
+
     function clickButton(option: IMenuButton) {
         console.log("Button clicked", option);
         option?.onClick();
@@ -292,7 +308,7 @@ const SettingsMenu: Component<SettingsMenuProps> = (props: SettingsMenuProps) =>
           onBack: onBack,
         }}>
           <Show when={item.icon}>
-            <img src={item.icon} class={styles.icon} />
+            <img src={item.icon} class={styles.icon} classList={{ [styles.pluginIcon]: isExternalMenuIcon(item.icon) }} />
           </Show>
           <div class={styles.nameContainer} style={
             {
@@ -333,7 +349,7 @@ const SettingsMenu: Component<SettingsMenuProps> = (props: SettingsMenuProps) =>
           onBack: onBack,
         }}>
           <Show when={item.icon}>
-            <img src={item.icon} class={styles.icon} />
+            <img src={item.icon} class={styles.icon} classList={{ [styles.pluginIcon]: isExternalMenuIcon(item.icon) }} />
           </Show>
           <div class={styles.nameContainer} style={
             {
@@ -535,7 +551,7 @@ const SettingsMenu: Component<SettingsMenuProps> = (props: SettingsMenuProps) =>
                 >
                   <div class={styles.name} style={{
                     "font-weight": ((item as IMenuItemOption).isSelected) ? "bold" : "regular", 
-                    color: ((item as IMenuItemOption).isSelected) ? "#FFFFFF" : "#AAAAAA"
+                    color: ((item as IMenuItemOption).isSelected) ? "var(--gj-text-primary)" : "var(--gj-text-secondary)"
                   }}>
                     {(item as IMenuItemOption).name}
                   </div>
diff --git a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.module.css b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.module.css
index f28a69e9..4b65d8d1 100644
--- a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.module.css
@@ -1,8 +1,8 @@
 .sidebar {
     width: 260px;
     height: calc(100vh - 20px);
-    border-right: #2E2E2E 1px solid;
-    background: #1B1B1B;
+    border-right: var(--gj-border) 1px solid;
+    background: var(--gj-bg-sidebar);
     padding: 10px;
     display: flex;
     flex-direction: column;
@@ -44,7 +44,7 @@
     flex-direction: column;
     align-items: center;
     gap: 4px;
-    border-top: 1px solid #2E2E2E;
+    border-top: 1px solid var(--gj-border);
     padding-bottom: 0px;
     padding-top: 10px;
     flex-shrink: 0;
@@ -60,26 +60,26 @@
 
 .collapse:hover {
     cursor: pointer;
-    background: rgba(255, 255, 255, 0.055);
+    background: var(--gj-bg-hover);
 }
 
 .collapse.selected:focus {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--gj-bg-selected-strong);
     outline: unset;
 }
 
 .collapse:focus {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--gj-bg-hover);
   outline: unset;
 }
 
 .width.selected:focus {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--gj-bg-selected-strong);
     outline: unset;
 }
 
 .width:focus {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--gj-bg-hover);
   outline: unset;
 }
 
@@ -106,7 +106,7 @@
     flex-direction: row;
     text-transform: uppercase;
     letter-spacing: 2.94px;
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     cursor: pointer;
 }
@@ -133,7 +133,7 @@
     width: 100%;
     margin-left: 4px;
     margin-bottom: 8px;
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Sen;
     font-size: 20px;
     font-style: normal;
@@ -165,8 +165,8 @@
   width: 280px;
   height: 100%;
 
-  background: #1B1B1B;
-  border-right: #2E2E2E 1px solid;
+  background: var(--gj-bg-sidebar);
+  border-right: var(--gj-border) 1px solid;
 
   pointer-events: none;
 }
@@ -178,4 +178,13 @@
   width: 260px;
   height: calc(100% - 20px);
   z-index: 1;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .collapse {
+    filter: brightness(0) saturate(100%) invert(22%);
+}
+
+:global(:root[data-theme="light"]) .collapse:hover,
+:global(:root[data-theme="light"]) .collapse:focus {
+    background: var(--gj-bg-selected);
+}
diff --git a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx
index ed236c2a..0f5efd47 100644
--- a/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/menus/SideBar/index.tsx
@@ -128,6 +128,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
     autoPressOnFocus?: boolean;
     style?: JSX.CSSProperties;
     styleText?: JSX.CSSProperties;
+    themeFilter?: boolean;
   };
   
   const homeBtn: ButtonItem = { icon: home, name: 'Home', path: '/web/home', getSelected: createMemo(() => location.pathname === '/web/home' || location.pathname === '/web/index.html'), autoPressOnFocus: false };
@@ -181,11 +182,12 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
   
   const buyBtn: ButtonItem = { 
     icon: iconBuy,
+    themeFilter: false,
     name: 'Buy Grayjay', 
     path: '/web/buy', 
     getSelected: createMemo(() => location.pathname === '/web/buy')
   };
-  const settingsBtn: ButtonItem = { icon: iconSettings, name: 'Settings', action: () => UIOverlay.overlaySettings(), getSelected: createMemo(() => location.pathname === '/web/settings') };
+  const settingsBtn: ButtonItem = { icon: iconSettings, themeFilter: false, name: 'Settings', action: () => UIOverlay.overlaySettings(), getSelected: createMemo(() => location.pathname === '/web/settings') };
 
   const bottomButtons$ = createMemo(() => {
     const list: ButtonItem[] = [];
@@ -368,6 +370,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
                   onBlur={globalBlur}
                   style={btn.style}
                   styleText={btn.styleText}
+                  themeFilter={btn.themeFilter}
                 />
               );
             }}
@@ -457,6 +460,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
                   onBlur={globalBlur}
                   style={btn.style}
                   styleText={btn.styleText}
+                  themeFilter={btn.themeFilter}
                 />
               );
             }}
@@ -464,7 +468,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
         </div>
         <Portal>
           <Show when={moreTopButtonCount$() > 0 && moreOverlayVisible$()}>
-            <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: #0000009e; z-index: 3" onClick={(ev) => {
+            <div style="height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; background-color: var(--gj-bg-backdrop); z-index: 3" onClick={(ev) => {
               props?.onMoreClosed?.();
               setMoreOverlayVisible(false);
               ev.preventDefault();
@@ -475,7 +479,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
             }} use:focusScope={{
               initialMode: 'trap'
             }}>
-              <div style="background-color: #141414; width: 260px; height: calc(100% - 20px); border-right: #2a2a2a 1px solid; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;">
+              <div style="background-color: var(--gj-bg-sidebar); width: 260px; height: calc(100% - 20px); border-right: var(--gj-border) 1px solid; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;">
                 <For each={topButtons$().slice(visibleTopButtonCount$(), visibleTopButtonCount$() + moreTopButtonCount$())}>
                   {(btn, i) => {
                     const press = () => {
@@ -510,6 +514,7 @@ const SideBar: Component<SideBarProps> = (props: SideBarProps) => {
                         onBlur={globalBlur}
                         style={btn.style}
                         styleText={btn.styleText}
+                        themeFilter={btn.themeFilter}
                       />
                     );
                   }}
diff --git a/Grayjay.Desktop.Web/src/components/menus/SideBarButton/index.module.css b/Grayjay.Desktop.Web/src/components/menus/SideBarButton/index.module.css
index 1aaee0e9..62e78d74 100644
--- a/Grayjay.Desktop.Web/src/components/menus/SideBarButton/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/menus/SideBarButton/index.module.css
@@ -13,12 +13,12 @@
 
 .sideBarButton:hover {
     cursor: pointer;
-    background: rgba(255, 255, 255, 0.055);
+    background: var(--gj-bg-hover);
 }
 
 .sideBarButton.selected {
     /*border-left: #019BE7 2px solid;*/
-    background: rgba(255, 255, 255, 0.105);
+    background: var(--gj-bg-selected);
 }
 
 .sideBarButton.collapsed {
@@ -26,12 +26,12 @@
 }
 
 .sideBarButton.selected:focus {
-    background: rgba(255, 255, 255, 0.15);
+    background: var(--gj-bg-selected-strong);
     outline: unset;
 }
 
 .sideBarButton:focus {
-  background: rgba(255, 255, 255, 0.055);
+  background: var(--gj-bg-hover);
   outline: unset;
 }
 
@@ -58,7 +58,7 @@
     line-height: 32px;
     margin-left: 10px;
     opacity: 1;
-    color: #BFBFBF;
+    color: var(--gj-text-secondary);
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -66,9 +66,19 @@
     overflow-x: hidden;
 }
 .sideBarButton.selected .text {
-    color: white;
+    color: var(--gj-text-primary);
 }
 
 .sideBarButton.collapsed .text {
     opacity: 0;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .sideBarButton .themeIcon {
+    filter: brightness(0) saturate(100%) invert(34%);
+    opacity: 1;
+}
+
+:global(:root[data-theme="light"]) .sideBarButton.selected .themeIcon {
+    filter: brightness(0) saturate(100%) invert(18%);
+    opacity: 1;
+}
diff --git a/Grayjay.Desktop.Web/src/components/menus/SideBarButton/index.tsx b/Grayjay.Desktop.Web/src/components/menus/SideBarButton/index.tsx
index 90f7e439..53754ee9 100644
--- a/Grayjay.Desktop.Web/src/components/menus/SideBarButton/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/menus/SideBarButton/index.tsx
@@ -16,6 +16,7 @@ interface SideBarButtonProps {
     onBlur?: () => void;
     style?: JSX.CSSProperties;
     styleText?: JSX.CSSProperties;
+    themeFilter?: boolean;
 }
 
 const SideBarButton: Component<SideBarButtonProps> = (props) => {
@@ -36,7 +37,7 @@ const SideBarButton: Component<SideBarButtonProps> = (props) => {
       props.onFocus?.();
     }} onBlur={props.onBlur} style={props.style}>
       <Show when={props.icon}>
-        <img src={props.icon} class={styles.icon} alt="logo" />
+        <img src={props.icon} class={styles.icon} classList={{ [styles.themeIcon]: props.themeFilter !== false }} alt="logo" />
       </Show>
       <Show when={!props.collapsed}>
         <div class={styles.text} style={props.styleText}>{props.name}</div>
diff --git a/Grayjay.Desktop.Web/src/components/menus/SideBarCreator/index.module.css b/Grayjay.Desktop.Web/src/components/menus/SideBarCreator/index.module.css
index b611a4ec..5d95870d 100644
--- a/Grayjay.Desktop.Web/src/components/menus/SideBarCreator/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/menus/SideBarCreator/index.module.css
@@ -12,11 +12,11 @@
 
 .sideBarButton:hover {
     cursor: pointer;
-    background: rgba(255, 255, 255, 0.055);
+    background: var(--gj-bg-hover);
 }
 
 .sideBarButton.selected {
-    background: rgba(255, 255, 255, 0.105);
+    background: var(--gj-bg-selected);
 }
 
 .sideBarButton.collapsed {
@@ -47,7 +47,7 @@
     line-height: 32px;
     transition: opacity 0.3s ease;
     opacity: 1;
-    color: #BFBFBF;
+    color: var(--gj-text-secondary);
     
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -55,7 +55,7 @@
     overflow-x: hidden;
 }
 .sideBarButton.selected .text {
-    color: white;
+    color: var(--gj-text-primary);
 }
 
 .sideBarButton.collapsed .text {
diff --git a/Grayjay.Desktop.Web/src/components/player/PlayerControlsView/index.module.css b/Grayjay.Desktop.Web/src/components/player/PlayerControlsView/index.module.css
index 3b1d9c0b..fbecb68b 100644
--- a/Grayjay.Desktop.Web/src/components/player/PlayerControlsView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/player/PlayerControlsView/index.module.css
@@ -12,11 +12,12 @@
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
-    background-color: rgba(0,0,0,.7);
+    background-color: var(--gj-video-overlay-bg);
     padding: 14px 25px;
     border-radius: 30px;
     font-size: 18px;
     cursor: pointer;
+    color: var(--gj-video-overlay-text);
 }
 
 .progressBarInteractiveArea {
@@ -66,7 +67,7 @@
     padding-bottom: 0px;
     padding-top: 0px;
     margin-top: -2px;
-    background-color: #999999;
+    background-color: rgba(255, 255, 255, 0.60);
 }
 /*
 .progressBarChapter.hover {
@@ -78,7 +79,7 @@
     padding-bottom: 0px;
     padding-top: 0px;
     margin-top: 0px;
-    background-color: #999999;
+    background-color: rgba(255, 255, 255, 0.60);
 }*/
 .progressBarChapter .hoverBar {
     border-left: 0px solid rgba(20,20,20,.8);
@@ -89,7 +90,7 @@
     padding-bottom: 0px;
     padding-top: 0px;
     margin-top: -0.5px;
-    background-color: #999999;
+    background-color: rgba(255, 255, 255, 0.60);
 }
 .progressBarChapter .hoverBar.partial {
     border-left: 0px solid rgba(20,20,20,.8);
@@ -100,7 +101,7 @@
     padding-bottom: 0px;
     padding-top: 0px;
     margin-top: 0px;
-    background-color: #999999;
+    background-color: rgba(255, 255, 255, 0.60);
 }
 .progressBarChapter .hoverBarPartial {
     position: absolute;
@@ -113,13 +114,13 @@
     padding-bottom: 0px;
     padding-top: 0px;
     margin-top: -0.5px;
-    background-color: #999999;
+    background-color: rgba(255, 255, 255, 0.60);
 }
 .progressBarChapter .hoverBar.pastProgress {
-    background-color: #019BE7;
+    background-color: var(--gj-accent);
 }
 .progressBarChapter.hover.pastProgress {
-    background-color: #019BE7;
+    background-color: var(--gj-accent);
 }
 .progressBarChapter .label {
     font-size: 11px;
@@ -144,6 +145,7 @@
     text-overflow: ellipsis;
     font-family: monospace;
     background-color: rgba(0,0,0,.8);
+    color: var(--gj-video-overlay-text);
     border-radius: 5px;
     padding: 10px;
     top: -50px;
@@ -162,6 +164,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     background-color: rgba(0,0,0,.8);
+    color: var(--gj-video-overlay-text);
     border-radius: 5px;
     padding: 10px;
     top: -50px;
@@ -177,7 +180,7 @@
     top: 10px;
     height: 4px;
     width: 72px;
-    background-color: #999999;
+    background-color: rgba(255, 255, 255, 0.60);
     border-radius: 3px;
     pointer-events: none;
 }
@@ -196,7 +199,7 @@
     top: 4px;
     width: 16px;
     height: 16px;
-    background-color: #ffffff;
+    background-color: var(--gj-video-overlay-text);
     box-shadow: 0px 32px 64px 0px rgba(0, 0, 0, 0.56), 0px 2px 21px 0px rgba(0, 0, 0, 0.55); 
     border-radius: 50%;
     pointer-events: none;
@@ -208,7 +211,7 @@
     left: 12px;
     top: 10px;
     height: 4px;
-    background-color: #ffffff;
+    background-color: var(--gj-video-overlay-text);
     border-radius: 3px;
     pointer-events: none;
 }
@@ -239,7 +242,7 @@
     bottom: 70px;
     left: 24px;
     height: 4px;
-    background-color: #019BE7;
+    background-color: var(--gj-accent);
     border-radius: 3px;
     pointer-events: none;
 }
@@ -251,7 +254,7 @@
     height: 20px;
     margin-left: -8px;
     margin-bottom: -8px;
-    background-color: #019BE7;
+    background-color: var(--gj-accent);
     border-radius: 50%;
     pointer-events: none;
     z-index: 10;
@@ -262,20 +265,25 @@
     flex-direction: row;
     flex-grow: 1;
     align-items: center;
+    color: var(--gj-video-overlay-text);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95);
 }
 
 
 .position {
     margin-right: 10px;
     vertical-align: bottom;
+    color: var(--gj-video-overlay-text);
 }
 
 .duration {
-    opacity: 0.6;
+    opacity: 0.8;
+    color: var(--gj-video-overlay-text);
 }
 .currentChapter {
     margin-left: 8px;
-    opacity: 0.5;
+    opacity: 0.75;
+    color: var(--gj-video-overlay-text);
     width: auto;
 
     white-space: nowrap;
@@ -285,13 +293,15 @@
 
 .liveBadge {
     background-color: red;
+    color: var(--gj-video-overlay-text);
     margin-top: -2px;
     padding: 5px 5px;
     border-radius: 4px;
     margin-left: 10px;
 }
 .plannedBadge {
-    background-color: #222;
+    background-color: var(--gj-video-overlay-bg);
+    color: var(--gj-video-overlay-text);
     padding: 5px 5px;
     border-radius: 4px;
     margin-left: 10px;
@@ -383,4 +393,28 @@
     width: 100%;
     height: calc(100% - 200px);
     #background-color: rgba(255,0,0,.5);
-}
\ No newline at end of file
+}
+
+/* theme visibility pass */
+.play,
+.pause,
+.volume,
+.fullscreen,
+.theatre,
+.popout,
+.cast,
+.settings {
+    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.95));
+}
+
+.buttonContainer img,
+.leftButtonContainer img {
+    border-radius: 999px;
+    padding: 4px;
+    background: rgba(0, 0, 0, 0.24);
+}
+
+.buttonContainer img:hover,
+.leftButtonContainer img:hover {
+    background: rgba(0, 0, 0, 0.42);
+}
diff --git a/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.module.css b/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.module.css
index e5c0685a..50e1c3ec 100644
--- a/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/player/VideoPlayerView/index.module.css
@@ -3,7 +3,7 @@
     height: 100%;
     position: relative;
     /*padding: 24px;*/
-    background-color: black;
+    background-color: var(--gj-video-surface);
 }
 
 .container:focus {
@@ -35,13 +35,13 @@
     left: 50%;
     transform: translateX(-50%);
     display: flex;
-    background-color: rgba(0,0,0,.7);
-    border: 1px solid rgba(255,255,255,.15);
+    background-color: var(--gj-video-overlay-bg);
+    border: 1px solid var(--gj-video-overlay-border);
     padding: 6px 12px;
     border-radius: 30px;
     font-size: 16px;
     cursor: pointer;
-    color: white;
+    color: var(--gj-video-overlay-text);
 }
 
 .loader {
@@ -79,7 +79,7 @@
     display: flex; 
     justify-content: center; 
     align-items: center; 
-    background-color: black;
+    background-color: var(--gj-video-surface);
 }
 
 
@@ -110,7 +110,8 @@
 }
 
 .captionsContainer div {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--gj-video-overlay-bg);
+    color: var(--gj-video-overlay-text);
     padding: 4px;
     box-sizing: border-box;
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/components/tooltip/index.tsx b/Grayjay.Desktop.Web/src/components/tooltip/index.tsx
index 37489992..63a800b9 100644
--- a/Grayjay.Desktop.Web/src/components/tooltip/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/tooltip/index.tsx
@@ -57,8 +57,8 @@ const Tooltip = (props: TooltipProps) => {
               position: 'absolute',
               top: `${tooltipPosition().top}px`,
               left: `${tooltipPosition().left}px`,
-              "background-color": '#333',
-              color: '#fff',
+              "background-color": 'var(--gj-bg-card-active)',
+              color: 'var(--gj-text-primary)',
               padding: '8px 12px',
               "border-radius": '4px',
               "font-size": '0.9rem',
@@ -78,7 +78,7 @@ const Tooltip = (props: TooltipProps) => {
                 height: '0',
                 "border-left": '6px solid transparent',
                 "border-right": '6px solid transparent',
-                "border-bottom": '6px solid #333',
+                "border-bottom": '6px solid var(--gj-bg-card-active)',
               }}
             ></div>
           </div>
diff --git a/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.module.css b/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.module.css
index 92aa8a8b..e56ced10 100644
--- a/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.module.css
+++ b/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.module.css
@@ -10,15 +10,15 @@
     justify-content: center;
     align-items: flex-start;
     border-radius: 10px;
-    border: 1px solid #2E2E2E;
-    background: #212121;
-    box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.16), 0px 64.815px 46.852px 0px rgba(0, 0, 0, 0.12), 0px 38.519px 25.481px 0px rgba(0, 0, 0, 0.10), 0px 20px 13px 0px rgba(0, 0, 0, 0.08), 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.06), 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.04);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
+    box-shadow: var(--gj-shadow);
     box-sizing: border-box;
 
     position: absolute;
     z-index: 1;
 
-    color: #D9D9D9;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -48,5 +48,55 @@
 }
 
 .suggestionItem:hover {
-    background-color: #2C2C2C;
-}
\ No newline at end of file
+    background-color: var(--gj-bg-hover);
+}
+
+.sectionTitle {
+    color: var(--gj-text-secondary);
+}
+
+.filterRow {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    margin-top: 16px;
+    flex-wrap: wrap;
+}
+
+.divider {
+    width: 100%;
+    background-color: var(--gj-border);
+    height: 1px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+.emptyState {
+    color: var(--gj-text-secondary);
+}
+
+.loadingRow {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.actionIcon {
+    width: 16px;
+    height: 16px;
+    filter: var(--gj-theme-icon-filter);
+}
+
+.actionIconClose {
+    width: 16px;
+    height: 16px;
+    margin-left: 16px;
+    filter: var(--gj-theme-icon-filter);
+}
+
+.suggestionLabel {
+    margin-left: 12px;
+    color: var(--gj-text-primary);
+}
diff --git a/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.tsx b/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.tsx
index f6a53409..38d89890 100644
--- a/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.tsx
+++ b/Grayjay.Desktop.Web/src/components/topbars/SearchBar/index.tsx
@@ -45,7 +45,7 @@ const SearchBar: Component<SearchBarProps> = (props) => {
 
   const buttonStyle: JSX.CSSProperties = {
     "border-radius": "6px",
-    "border": "1px solid #454545",
+    "border": "1px solid var(--gj-border-strong)",
     "height": "37px",
     "padding-left": "16px",
     "padding-right": "16px",
@@ -57,7 +57,8 @@ const SearchBar: Component<SearchBarProps> = (props) => {
   const buttonIconStyle: JSX.CSSProperties = {
     "width": "16px",
     "height": "16px",
-    "margin-right": "4px"
+    "margin-right": "4px",
+    "filter": "var(--gj-theme-icon-filter)"
   };
 
   const [query$, setQuery] = createSignal<string>(props.initialText ?? "");
@@ -181,23 +182,23 @@ const SearchBar: Component<SearchBarProps> = (props) => {
             e.stopPropagation();
             e.preventDefault();
           }} style={props.overlayStyle}>
-            <div>Choose content type to search</div>
-            <div style="display: flex; flex-direction: row; gap: 4px; margin-top: 16px;">
-              <CustomButton icon={iconVideos} text='Media' style={{ ... buttonStyle, "background-color": searchType$() === ContentType.MEDIA ? "#2E2E2E" : undefined }} iconStyle={buttonIconStyle} onMouseDown={(e) => changeSearchType(e, ContentType.MEDIA)} />
-              <CustomButton icon={iconCreators} text='Creators' style={{ ... buttonStyle, "background-color": searchType$() === ContentType.CHANNEL ? "#2E2E2E" : undefined }} iconStyle={buttonIconStyle} onMouseDown={(e) => changeSearchType(e, ContentType.CHANNEL)} />
-              <CustomButton icon={iconPlaylist} text='Playlists' style={{ ... buttonStyle, "background-color": searchType$() === ContentType.PLAYLIST ? "#2E2E2E" : undefined }} iconStyle={buttonIconStyle} onMouseDown={(e) => changeSearchType(e, ContentType.PLAYLIST)} />
+            <div class={styles.sectionTitle}>Choose content type to search</div>
+            <div class={styles.filterRow}>
+              <CustomButton icon={iconVideos} text='Media' style={{ ... buttonStyle, "background-color": searchType$() === ContentType.MEDIA ? "var(--gj-bg-card-active)" : "var(--gj-bg-panel)", "color": "var(--gj-text-primary)" }} iconStyle={buttonIconStyle} onMouseDown={(e) => changeSearchType(e, ContentType.MEDIA)} />
+              <CustomButton icon={iconCreators} text='Creators' style={{ ... buttonStyle, "background-color": searchType$() === ContentType.CHANNEL ? "var(--gj-bg-card-active)" : "var(--gj-bg-panel)", "color": "var(--gj-text-primary)" }} iconStyle={buttonIconStyle} onMouseDown={(e) => changeSearchType(e, ContentType.CHANNEL)} />
+              <CustomButton icon={iconPlaylist} text='Playlists' style={{ ... buttonStyle, "background-color": searchType$() === ContentType.PLAYLIST ? "var(--gj-bg-card-active)" : "var(--gj-bg-panel)", "color": "var(--gj-text-primary)" }} iconStyle={buttonIconStyle} onMouseDown={(e) => changeSearchType(e, ContentType.PLAYLIST)} />
             </div>
-            <div style="width: 100%; background-color: #2E2E2E; height: 1px; margin-top: 20px; margin-bottom: 20px;"></div>
+            <div class={styles.divider}></div>
             <Show when={historical$()}>
               <div style="display: flex; flex-direction: row; margin-bottom: 12px; width: 100%;">
-                <div>Your previous searches</div>
+                <div class={styles.sectionTitle}>Your previous searches</div>
                 <div style="flex-grow: 1"></div>
 
               </div>
             </Show>
-            <Switch fallback={<div>No results found</div>}>
+            <Switch fallback={<div class={styles.emptyState}>No results found</div>}>
               <Match when={isLoadingSuggestions$()}>
-                <div style="display: flex; flex-direction: row; width: 100%; align-items: center; justify-content: center;">
+                <div class={styles.loadingRow}>
                   <LoaderSmall />
                 </div>
               </Match>
@@ -212,16 +213,16 @@ const SearchBar: Component<SearchBarProps> = (props) => {
                         });
                         await searchFor(item, searchType$());
                       }}>
-                        <img src={iconSearch} style="width: 16px; height: 16px;" />
-                        <div style="margin-left: 12px;">{item}</div>
+                        <img src={iconSearch} class={styles.actionIcon} />
+                        <div class={styles.suggestionLabel}>{item}</div>
                         <div style="flex-grow: 1"></div>
-                        <img src={iconAddToQuery} style="width: 16px; height: 16px;" onMouseDown={(e) => {
+                        <img src={iconAddToQuery} class={styles.actionIcon} onMouseDown={(e) => {
                           setQuery(item);
                           e.preventDefault();
                           e.stopPropagation();
                         }} />
                         <Show when={historical$()}>
-                          <img src={iconClose} style="width: 16px; height: 16px; margin-left: 16px;" onMouseDown={async (e) => {
+                          <img src={iconClose} class={styles.actionIconClose} onMouseDown={async (e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             await SearchBackend.removePreviousSearch(item);
diff --git a/Grayjay.Desktop.Web/src/index.css b/Grayjay.Desktop.Web/src/index.css
index 09486d60..c92e6fc7 100644
--- a/Grayjay.Desktop.Web/src/index.css
+++ b/Grayjay.Desktop.Web/src/index.css
@@ -7,8 +7,8 @@ body {
   margin: 0;
   height: 100vh;
   width: 100vw;
-  background-color: #141414;
-  color: white;
+  background-color: var(--gj-bg-root);
+  color: var(--gj-text-primary);
   user-select: none;
   overflow: hidden;
 }
@@ -20,7 +20,7 @@ code {
 
 :where(body[data-input-source="keyboard"]) :where(*:focus),
 :where(body[data-input-source="gamepad"]) :where(*:focus) {
-  outline: 2px solid #bbb;
+  outline: 2px solid var(--gj-focus);
   outline-offset: -1px;
 }
 
@@ -34,7 +34,7 @@ code {
   left: 0px;
   width: 100%;
   height: 100%;
-  background-color: rgba(0,0,0,.6);
+  background-color: var(--gj-bg-backdrop);
   user-select: none;
 }
 .droparea .text {
@@ -57,11 +57,11 @@ code {
   flex-grow: 1;
   max-height: 100vh;
   overflow: hidden;
-  background-color: #141414;
+  background-color: var(--gj-bg-root);
 }
 
 .icon {
-  color: white;
+  color: var(--gj-text-primary);
 }
 
 img {
diff --git a/Grayjay.Desktop.Web/src/index.tsx b/Grayjay.Desktop.Web/src/index.tsx
index 7a3ff452..b888df5d 100644
--- a/Grayjay.Desktop.Web/src/index.tsx
+++ b/Grayjay.Desktop.Web/src/index.tsx
@@ -2,6 +2,7 @@
 import { render } from 'solid-js/web';
 
 import './index.css';
+import './theme.css';
 import { Router, Route, RouteSectionProps, useNavigate, Navigator } from '@solidjs/router';
 import SideBar from './components/menus/SideBar';
 import { Component, Show, children, createSignal, lazy, onCleanup, onMount } from 'solid-js';
@@ -28,6 +29,7 @@ import BuyPage from './pages/BuyPage';
 import LoaderGameExamplePage from './pages/LoaderGameExamplePage';
 import { FocusProvider } from './FocusProvider';
 import { focusScope } from './focusScope';import ControllerOverlay from './components/ControllerOverlay';
+import NativeTheme from './theme';
  void focusScope;
 
 const HomePage = lazy(() => import('./pages/Home'));
@@ -144,6 +146,7 @@ const App: Component<RouteSectionProps> = (props) => {
   };
 
   return <>  
+    <NativeTheme />
     <VideoProvider>
       <FocusProvider>
         {renderContent()}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayCustomDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayCustomDialog/index.module.css
index 59272da3..bdb20724 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayCustomDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayCustomDialog/index.module.css
@@ -1,12 +1,11 @@
 
-
 .root {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
-    background: rgba(15, 15, 15, 0.86);
+    background: var(--gj-bg-backdrop);
     display: grid;
     align-items: center;
     justify-content: center;
@@ -16,9 +15,10 @@
     position: relative;
     padding: 32px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -30,17 +30,27 @@
     position: absolute;
     display: grid;
     justify-content: center;
-    align-items: center;;
+    align-items: center;
     top: 32px;
     right: 32px;
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-panel-strong);
     cursor: pointer;
-    z-index: 9999
+    z-index: 9999;
 }
 .closeButton img {
     width: 24px;
     height: 24px;
-}
\ No newline at end of file
+}
+
+
+:global(:root[data-theme="light"]) .closeButton {
+    background: var(--gj-bg-panel-strong);
+    border: 1px solid var(--gj-border-strong);
+}
+
+:global(:root[data-theme="light"]) .closeButton img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.module.css
index 3b1dbf5d..b541d264 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.module.css
@@ -13,12 +13,12 @@
     margin-left: 50%;
     transform: translateX(-50%);
     display: flex;
-    
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
     box-sizing: border-box;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    box-shadow: var(--gj-shadow);
 }
 
 .icon {
@@ -27,17 +27,27 @@
     margin-bottom: 16px;
 }
 
-.iconClose {
-    width: 24px;
-    height: 24px;
+.closeButton {
     position: absolute;
     right: 32px;
     top: 32px;
+    width: 40px;
+    height: 40px;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    border-radius: 999px;
+    background: var(--gj-bg-panel-strong);
     cursor: pointer;
 }
 
+.iconClose {
+    width: 24px;
+    height: 24px;
+}
+
 .title {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 24px;
     font-style: normal;
@@ -46,11 +56,9 @@
     text-align: center;
 }
 .description {
-    color: #8C8C8C;
-
+    color: var(--gj-text-tertiary);
     text-align: center;
     leading-trim: both;
-
     text-edge: cap;
     font-family: Inter;
     font-size: 16px;
@@ -62,7 +70,6 @@
     white-space: pre-wrap;
 }
 
-
 .buttons {
     margin-top: 20px;
     display: flex;
@@ -78,21 +85,19 @@
     width: 128px;
     height: 48px;
     flex: 1 0 0;
-    border-radius: 6px;
-    cursor: pointer;
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
+    cursor: pointer;
+    border: 1px solid var(--gj-border);
     font-size: 16px;
-
 }
 .button.none {
-    color: #ffffff;
+    color: var(--gj-text-primary);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -103,74 +108,62 @@
 .code {
     margin-top: 20px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-soft);
+    color: var(--gj-text-primary);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
     overflow-y: auto;
-    max-height: 300px;
+    max-height: 320px;
     text-align: left;
-    position: relative;
-
-    user-select: text;
 }
 
-.code::-webkit-scrollbar {
-    width: 10px;
+.addButton {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-top: 10px;
+    padding: 10px 12px;
+    border-radius: 8px;
+    background: var(--gj-bg-panel-strong);
+    cursor: pointer;
 }
 
-.code::-webkit-scrollbar-thumb {
-    background-color: #555;
-    border-radius: 5px;
+.addLabel {
+    margin-left: 10px;
+    color: var(--gj-text-primary);
 }
 
-.code::-webkit-scrollbar-thumb:hover {
-    background-color: #888;
-}
 
-.code::-webkit-scrollbar-track {
-    background-color: #333;
+/* overlay-dialog-light-mode-v29 */
+:global(:root[data-theme="light"]) .dialog {
+    border-color: var(--gj-border);
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
+    box-shadow: var(--gj-shadow);
 }
 
-.code::-webkit-scrollbar-corner {
-    background-color: transparent;
+:global(:root[data-theme="light"]) .title {
+    color: var(--gj-text-primary);
 }
 
-.addLabel {
-    margin-left: 10px;
-    
-    color: #FFF;
-    font-feature-settings: 'clig' off, 'liga' off;
-    font-family: Inter;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 140%; /* 22.4px */
+:global(:root[data-theme="light"]) .description {
+    color: var(--gj-text-tertiary);
 }
 
-.addButton {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-left: 8px;
-    padding-right: 8px;
-    cursor: pointer;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
+:global(:root[data-theme="light"]) .closeButton {
+    background: var(--gj-bg-panel-strong);
+    border: 1px solid var(--gj-border);
 }
 
-.button:focus,
-.iconClose:focus,
-.addButton:focus,
-.code > img:focus {
-    background-color: #333333;
-    border-color: #4A4A4A;
+:global(:root[data-theme="light"]) .iconClose {
+    filter: var(--gj-theme-icon-filter);
 }
 
-.button.primary:focus { background: #07A9F0; }
-.button.accent:focus { background: #FF7A70; }
-.button.none:focus { background: #1F1F1F; }
-.iconClose:focus { border-radius: 6px; }
-.code > img:focus { border-radius: 4px; }
\ No newline at end of file
+:global(:root[data-theme="light"]) .code,
+:global(:root[data-theme="light"]) .addButton {
+    background-color: var(--gj-bg-soft);
+    color: var(--gj-text-primary);
+    border-color: var(--gj-border);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.tsx
index b2068445..b9b45f0c 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayDialog/index.tsx
@@ -209,12 +209,12 @@ const OverlayDialog: Component<OverlayDialogProps> = (props: OverlayDialogProps)
   const themeFor = (style?: string) => {
     switch (style) {
       case "primary":
-        return { color: "#019BE7" };
+        return { color: 'var(--gj-accent)' };
       case "accent":
-        return { color: "#F97066" };
+        return { color: 'var(--gj-danger-accent)' };
       case "none":
       default:
-        return { color: "#2E2E2E" };
+        return { color: 'var(--gj-bg-panel-strong)' };
     }
   };
   
@@ -236,10 +236,8 @@ const OverlayDialog: Component<OverlayDialogProps> = (props: OverlayDialogProps)
           <img src={props.dialog?.icon} class={styles.icon} alt="" />
         </Show>
 
-        <img
-          src={icon_close}
-          class={styles.iconClose}
-          alt="Close"
+        <div
+          class={styles.closeButton}
           role="button"
           tabindex={0}
           onClick={clickClose}
@@ -247,7 +245,13 @@ const OverlayDialog: Component<OverlayDialogProps> = (props: OverlayDialogProps)
             onPress: clickClose,
             onBack: dialogBack,
           }}
-        />
+        >
+          <img
+            src={icon_close}
+            class={styles.iconClose}
+            alt="Close"
+          />
+        </div>
 
         <div id={titleId} class={styles.title} style="padding-right: 25px;">
           {props.dialog!.title}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDialogLoader/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayDialogLoader/index.module.css
index 9624bdad..a1d2d1f3 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayDialogLoader/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayDialogLoader/index.module.css
@@ -9,9 +9,9 @@
     text-align: center;
     
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .icon {
@@ -21,7 +21,7 @@
 }
 
 .title {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
     
@@ -34,7 +34,7 @@
     text-align: center;
 }
 .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     text-align: center;
     leading-trim: both;
@@ -65,13 +65,13 @@
     border-radius: 6px;
 }
 .button.none {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -83,9 +83,9 @@
     margin-top: 20px;
     margin-bottom: 30px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-code);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
 }
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.module.css
index 3c4d1128..b8326f38 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.module.css
@@ -7,9 +7,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
+    box-shadow: var(--gj-shadow);
     max-height: calc(100% - 24px);
     box-sizing: border-box;
     overflow: hidden;
@@ -28,7 +28,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-top: 6px;
 }
 
@@ -42,7 +42,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-panel-strong);
     cursor: pointer;
 }
 .closeButton img {
@@ -56,7 +56,7 @@
     max-height: 50vh;
     overflow-y: auto;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 .source {
@@ -67,7 +67,7 @@
     cursor: pointer;
 }
 .source .name {
-    color: #CDCDCD;
+    color: var(--gj-text-secondary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;
@@ -84,7 +84,7 @@
     overflow: hidden;
     font-size: 12px;
     text-overflow: ellipsis;
-    color: #8C8C8C
+    color: var(--gj-text-tertiary)
 }
 .source.hasSubs .meta {
     display: hidden;
@@ -107,13 +107,13 @@
 
 .source.enabled {
     border-radius: 4px;
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--gj-bg-card-active);
 }
 .source.enabled img {
     display: block;
 }
 .source.enabled .name {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-weight: 600;
 }
 
@@ -144,7 +144,7 @@
     white-space: nowrap;
     padding-left:0px;
     padding-right: 0px;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
     text-align: center;
 }
 .menuItem .filterHorizontalOption {
@@ -153,11 +153,11 @@
     padding-right: 6px;
     padding-top: 4px;
     padding-bottom: 4px;
-    background-color: rgba(0,0,0,.5);
-    border: 1px solid #222222;
+    background-color: var(--gj-bg-card);
+    border: 1px solid var(--gj-border);
 }
 .menuItem .filterHorizontalOption.isActive {
-    background-color: rgba(255,255,255,.1);
+    background-color: var(--gj-bg-card-active);
 }
 .menuItem .filterHorizontalOption:first-child {
     border-top-left-radius: 5px;
@@ -166,4 +166,9 @@
 .menuItem .filterHorizontalOption:last-child {
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .source.enabled img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.tsx
index 33e7ddf4..c7e607c1 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadDialog/index.tsx
@@ -312,12 +312,12 @@ const OverlayDownloadDialog: Component<OverlayDownloadDialogProps> = (props: Ove
             </Show>
           </div>
         </Show>
-        <div style="height: 1px; background-color: rgba(255, 255, 255, 0.09); margin-top: 10px; margin-bottom: 10px;"></div>
+        <div style="height: 1px; background-color: var(--gj-border-muted); margin-top: 10px; margin-bottom: 10px;"></div>
         <div style="text-align: right">
             <Button text='Download'
               onClick={()=>download()}
               style={{"margin-left": "auto", cursor: ((isDownloadable$() ? "pointer" : "default"))}} 
-              color={isDownloadable$() ? "linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)" : "gray"}
+              color={isDownloadable$() ? "var(--gj-accent-grad)" : "gray"}
               focusableOpts={{
                 onPress: download,
                 onBack: globalBack
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadMultipleDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadMultipleDialog/index.module.css
index 921928a7..df8798d3 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadMultipleDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadMultipleDialog/index.module.css
@@ -7,9 +7,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
     max-height: calc(100% - 24px);
     box-sizing: border-box;
     overflow: hidden;
@@ -28,7 +28,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-top: 6px;
 }
 
@@ -42,7 +42,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-card-active);
     cursor: pointer;
 }
 .closeButton img {
@@ -56,7 +56,7 @@
     max-height: 50vh;
     overflow-y: auto;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 .source {
@@ -67,7 +67,7 @@
     cursor: pointer;
 }
 .source .name {
-    color: #CDCDCD;
+    color: var(--gj-text-secondary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;
@@ -84,7 +84,7 @@
     overflow: hidden;
     font-size: 12px;
     text-overflow: ellipsis;
-    color: #8C8C8C
+    color: var(--gj-text-tertiary)
 }
 .source.hasSubs .meta {
     display: hidden;
@@ -107,13 +107,13 @@
 
 .source.enabled {
     border-radius: 4px;
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--gj-bg-hover);
 }
 .source.enabled img {
     display: block;
 }
 .source.enabled .name {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-weight: 600;
 }
 
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadMultipleDialog/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadMultipleDialog/index.tsx
index 6f9f755c..2afc224b 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayDownloadMultipleDialog/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayDownloadMultipleDialog/index.tsx
@@ -141,12 +141,12 @@ const OverlayDownloadMultipleDialog: Component<OverlayDownloadMultipleDialogProp
                 }</Index>
               </div>
           </div>
-        <div style="height: 1px; background-color: rgba(255, 255, 255, 0.09); margin-top: 10px; margin-bottom: 10px;"></div>
+        <div style="height: 1px; background-color: var(--gj-border-muted); margin-top: 10px; margin-bottom: 10px;"></div>
         <div style="text-align: right">
             <Button text='Download'
               onClick={()=>download()}
               style={{"margin-left": "auto", cursor: ((isDownloadable$() ? "pointer" : "default"))}} 
-              color={(isDownloadable$()) ? "linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)" : "gray"}
+              color={(isDownloadable$()) ? "var(--gj-accent-grad)" : "gray"}
               focusableOpts={{
                 onPress: download,
                 onBack: globalBack
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayFilePicker/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayFilePicker/index.module.css
index 219962ca..3bb0a935 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayFilePicker/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayFilePicker/index.module.css
@@ -3,7 +3,7 @@
   inset: 0;
   width: 100%;
   height: 100%;
-  background: rgba(15, 15, 15, 0.86);
+  background: var(--gj-bg-backdrop);
   display: grid;
   align-items: center;
   justify-content: center;
@@ -14,9 +14,9 @@
   width: min(980px, calc(100vw - 48px));
   height: min(80vh, 760px);
   border-radius: 12px;
-  border: 1px solid #2E2E2E;
-  background: #141414;
-  color: #EDEDED;
+  border: 1px solid var(--gj-border);
+  background: var(--gj-bg-popover);
+  color: var(--gj-text-primary);
   box-shadow:
     0 1.6px 3.1px rgba(0,0,0,0.10),
     0 7.25px 6.52px rgba(0,0,0,0.16),
@@ -31,7 +31,7 @@
 
 .dialogHeader {
   padding: 20px 24px 12px 24px;
-  border-bottom: 1px solid #2A2A2A;
+  border-bottom: 1px solid var(--gj-border);
 }
 .titleRow {
   display: flex;
@@ -39,7 +39,7 @@
   gap: 12px;
 }
 .dialogTitle {
-  color: #FFF;
+  color: var(--gj-text-primary);
   font-size: 20px;
   font-weight: 600;
   line-height: 24px;
@@ -53,12 +53,12 @@
   width: 36px;
   height: 36px;
   border-radius: 36px;
-  background: #202020;
-  border: 1px solid #2E2E2E;
+  background: var(--gj-bg-control);
+  border: 1px solid var(--gj-border);
   cursor: pointer;
   transition: background 120ms ease, border-color 120ms ease;
 }
-.closeButton:hover { background: #262626; border-color: #3A3A3A; }
+.closeButton:hover { background: var(--gj-bg-card-active); border-color: var(--gj-border-strong); }
 .closeButton img { width: 20px; height: 20px; }
 
 .toolbar {
@@ -76,24 +76,24 @@
   min-height: 34px;
   padding: 0 10px;
   border-radius: 8px;
-  background: #171717;
-  border: 1px solid #242424;
+  background: var(--gj-bg-soft);
+  border: 1px solid var(--gj-border);
 }
 .crumb {
-  color: #CFCFCF;
+  color: var(--gj-text-secondary);
   font-size: 13px;
   white-space: nowrap;
   border: 1px solid transparent;
 }
 .crumb:hover { 
-  background: #222222;
-  border: 1px solid #2E2E2E;
+  background: var(--gj-bg-card-active);
+  border: 1px solid var(--gj-border);
 }
 .crumb.active {
-  background: #222222;
-  border: 1px solid #2E2E2E;
+  background: var(--gj-bg-card-active);
+  border: 1px solid var(--gj-border);
 }
-.crumbDivider { color: #5B5B5B; }
+.crumbDivider { color: var(--gj-text-tertiary); }
 
 .search {
   display: flex;
@@ -102,12 +102,12 @@
   height: 34px;
   padding: 0 10px;
   border-radius: 8px;
-  background: #171717;
-  border: 1px solid #242424;
+  background: var(--gj-bg-soft);
+  border: 1px solid var(--gj-border);
 }
 .search input {
   all: unset;
-  color: #EDEDED;
+  color: var(--gj-text-primary);
   font-size: 13px;
   width: 220px;
 }
@@ -124,14 +124,14 @@
 }
 
 .sidebar {
-  border-right: 1px solid #2A2A2A;
-  background: #121212;
+  border-right: 1px solid var(--gj-border);
+  background: var(--gj-bg-panel);
   padding: 14px 10px;
   overflow: auto;
 }
 .sidebarTitle {
   font-size: 12px;
-  color: #9B9B9B;
+  color: var(--gj-text-tertiary);
   letter-spacing: 0.04em;
   margin: 4px 8px 8px;
   text-transform: uppercase;
@@ -143,15 +143,15 @@
   padding: 8px 10px;
   margin: 2px 0;
   border-radius: 8px;
-  color: #D8D8D8;
+  color: var(--gj-text-secondary);
   font-size: 13px;
   cursor: default;
   border: 1px solid transparent;
 }
-.navItem:hover { background: #1A1A1A; }
+.navItem:hover { background: var(--gj-bg-code); }
 .navItem.active {
-  background: #222222;
-  border: 1px solid #2E2E2E;
+  background: var(--gj-bg-card-active);
+  border: 1px solid var(--gj-border);
 }
 
 .navItemText {
@@ -166,7 +166,7 @@
 .main {
   display: grid;
   grid-template-rows: auto 1fr;
-  background: #141414;
+  background: var(--gj-bg-popover);
   height: 100%;
   overflow: hidden;
 }
@@ -176,8 +176,8 @@
   gap: 12px;
   align-items: center;
   padding: 10px 16px;
-  border-bottom: 1px solid #2A2A2A;
-  color: #9B9B9B;
+  border-bottom: 1px solid var(--gj-border);
+  color: var(--gj-text-tertiary);
   font-size: 12px;
   text-transform: none;
 }
@@ -205,13 +205,13 @@
   align-items: center;
   padding: 10px 16px;
   font-size: 13px;
-  color: #EDEDED;
+  color: var(--gj-text-primary);
   cursor: default;
 }
-.row:hover { background: #181818; }
+.row:hover { background: var(--gj-bg-hover); }
 .row.selected {
-  background: #202020;
-  outline: 1px solid #2E2E2E;
+  background: var(--gj-bg-control);
+  outline: 1px solid var(--gj-border);
 }
 .cellName {
   display: flex;
@@ -220,15 +220,15 @@
 }
 .folderIcon {
   width: 14px; height: 12px;
-  background: linear-gradient(#2B2B2B, #1F1F1F);
-  border: 1px solid #3A3A3A;
+  background: linear-gradient(var(--gj-bg-control), var(--gj-bg-panel));
+  border: 1px solid var(--gj-border-strong);
   border-radius: 2px;
   flex: 0 0 14px;
 }
-.cellSubtle { color: #BFBFBF; }
+.cellSubtle { color: var(--gj-text-secondary); }
 
 .footer {
-  border-top: 1px solid #2A2A2A;
+  border-top: 1px solid var(--gj-border);
   padding: 12px 16px;
   display: grid;
   grid-template-columns: 1fr auto auto;
@@ -243,22 +243,22 @@
 }
 .label {
   font-size: 12px;
-  color: #B3B3B3;
+  color: var(--gj-text-tertiary);
   justify-self: end;
 }
 .input, .select {
   height: 34px;
-  background: #171717;
-  border: 1px solid #242424;
+  background: var(--gj-bg-soft);
+  border: 1px solid var(--gj-border);
   border-radius: 8px;
-  color: #EDEDED;
+  color: var(--gj-text-primary);
   padding: 0 10px;
   font-size: 13px;
 }
 .select {
   appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, #9B9B9B 50%),
-                    linear-gradient(135deg, #9B9B9B 50%, transparent 50%);
+  background-image: linear-gradient(45deg, transparent 50%, var(--gj-text-tertiary) 50%),
+                    linear-gradient(135deg, var(--gj-text-tertiary) 50%, transparent 50%);
   background-position: calc(100% - 14px) 12px, calc(100% - 8px) 12px;
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
@@ -272,28 +272,28 @@
   height: 34px;
   padding: 0 14px;
   border-radius: 8px;
-  border: 1px solid #2E2E2E;
-  background: #262626;
-  color: #EDEDED;
+  border: 1px solid var(--gj-border);
+  background: var(--gj-bg-card-active);
+  color: var(--gj-text-primary);
   font-weight: 600;
   font-size: 13px;
   cursor: pointer;
   transition: background 120ms ease, border-color 120ms ease;
 }
-.btn:hover { background: #2E2E2E; border-color: #3A3A3A; }
+.btn:hover { background: var(--gj-bg-card-active); border-color: var(--gj-border-strong); }
 .btnPrimary {
-  background: #E6E6E6;
-  color: #0F0F0F;
-  border-color: #3A3A3A;
+  background: var(--gj-text-primary);
+  color: var(--gj-text-inverse);
+  border-color: var(--gj-border-strong);
 }
-.btnPrimary:hover { background: #F0F0F0; }
+.btnPrimary:hover { background: var(--gj-bg-card-hover); }
 .errorBanner {
   margin-top: 10px;
   padding: 8px 10px;
   border-radius: 8px;
-  background: #2a1212;
-  border: 1px solid #552222;
-  color: #ffbcbc;
+  background: var(--gj-danger-soft-bg);
+  border: 1px solid var(--gj-danger-accent);
+  color: var(--gj-danger-accent);
   font-size: 12px;
   height: 16px;
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayFilePicker/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayFilePicker/index.tsx
index 00ec8a67..f6aca447 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayFilePicker/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayFilePicker/index.tsx
@@ -523,7 +523,7 @@ const OverlayFilePicker: Component<OverlayFilePickerProps> = (props) => {
                 itemHeight={34}
                 builder={(index, item) => {
                   return (
-                    <Show when={item()?.type !== "divider"} fallback={<div style="width: 100%; height: 34px; display: flex; align-items: center; justify-content: center;"><div style="width: 100%; height: 1px; background-color: #2A2A2A"></div></div>}>
+                    <Show when={item()?.type !== "divider"} fallback={<div style="width: 100%; height: 34px; display: flex; align-items: center; justify-content: center;"><div style="width: 100%; height: 1px; background-color: var(--gj-border)"></div></div>}>
                       <div
                         class={styles.navItem}
                         classList={{ [styles.active]: currentDirectory() === item()?.path }}
@@ -662,7 +662,7 @@ const OverlayFilePicker: Component<OverlayFilePickerProps> = (props) => {
         <div
           style="
             position:absolute; inset:0; 
-            background: rgba(15,15,15,0.6);
+            background: var(--gj-bg-backdrop);
             display:grid; place-items:center; z-index: 3;
           "
           onClick={(e) => {
@@ -682,8 +682,8 @@ const OverlayFilePicker: Component<OverlayFilePickerProps> = (props) => {
               width: 420px; height: auto;
               grid-template-rows: auto 1fr auto;
               border-radius: 12px;
-              border: 1px solid #2E2E2E;
-              background: #141414;
+              border: 1px solid var(--gj-border);
+              background: var(--gj-bg-popover);
               box-shadow:
                 0 1.6px 3.1px rgba(0,0,0,0.10),
                 0 7.25px 6.52px rgba(0,0,0,0.16),
@@ -699,7 +699,7 @@ const OverlayFilePicker: Component<OverlayFilePickerProps> = (props) => {
               if (e.key === 'Enter') { e.stopPropagation(); resolveConfirm(true); }
             }}
           >
-            <div class={styles.dialogHeader} style="border-bottom: 1px solid #2A2A2A; padding: 16px 16px 12px;">
+            <div class={styles.dialogHeader} style="border-bottom: 1px solid var(--gj-border); padding: 16px 16px 12px;">
               <div class={styles.titleRow}>
                 <div id="confirm-title" class={styles.dialogTitle}>
                   {confirmState()!.title}
@@ -714,7 +714,7 @@ const OverlayFilePicker: Component<OverlayFilePickerProps> = (props) => {
               </div>
             </div>
 
-            <div style="padding: 16px; color:#EDEDED; line-height:1.5; white-space:pre-wrap;">
+            <div style="padding: 16px; color: var(--gj-text-primary); line-height:1.5; white-space:pre-wrap;">
               {confirmState()!.message}
             </div>
 
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImage/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayImage/index.module.css
index 38d6550e..441507f1 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImage/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImage/index.module.css
@@ -5,13 +5,13 @@
     overflow:hidden;
     border-radius: 12px;
     padding:0.5px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
     max-width: 90%;
     max-height: 90%;
     margin-left: auto;
     margin-right: auto;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -36,7 +36,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
 }
 
 .closeButton {
@@ -49,7 +49,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-card-active);
     cursor: pointer;
     box-shadow: 0px 0px 3px black;
 }
@@ -74,7 +74,7 @@
     margin: 5px;
 }
 .subscription.enabled {
-    background-color: #212121;
+    background-color: var(--gj-bg-control);
 }
 .subscription .check {
     width: 18px;
@@ -83,13 +83,13 @@
     top: 10px;
     right: 5px;
     border-radius: 72.727px;
-    border: 2px solid #454545;
+    border: 2px solid var(--gj-border-strong);
 }
 .subscription .check img {
     display: none;
 }
 .subscription.enabled .check {
-    background-color: #019BE7;
+    background-color: var(--gj-accent);
 }
 .subscription.enabled .check img {
     display: block;
@@ -104,7 +104,7 @@
     display: inline-block;
 }
 .subscription .name {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     text-align: center;
     
@@ -135,7 +135,7 @@
     background-position: center;;
 }
 .image.enabled {
-    border: 3px solid white;
+    border: 3px solid var(--gj-text-primary);
 }
 
 .horizontalList {
@@ -144,7 +144,7 @@
     width: 100%;
     text-wrap: nowrap;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 .horizontalList::-webkit-scrollbar {
     background-color: transparent;
@@ -156,7 +156,7 @@
   .horizontalList::-webkit-scrollbar-thumb {
     border-radius: 20px;
     border: 4px solid transparent;
-    background-color: rgba(0,0,0,0.2);
+    background-color: var(--gj-bg-hover);
     background-clip: content-box;
   }
   .horizontalList::-webkit-scrollbar-button {
@@ -170,6 +170,6 @@
 }
 .sectionDescription {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-bottom: 10px;
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImageSelector/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayImageSelector/index.module.css
index f6bfc793..2cfbc6f5 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImageSelector/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImageSelector/index.module.css
@@ -8,9 +8,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -25,7 +25,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
 }
 
 .closeButton {
@@ -38,7 +38,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-card-active);
     cursor: pointer;
 }
 .closeButton img {
@@ -62,7 +62,7 @@
     margin: 5px;
 }
 .subscription.enabled {
-    background-color: #212121;
+    background-color: var(--gj-bg-control);
 }
 .subscription .check {
     width: 18px;
@@ -71,13 +71,13 @@
     top: 10px;
     right: 5px;
     border-radius: 72.727px;
-    border: 2px solid #454545;
+    border: 2px solid var(--gj-border-strong);
 }
 .subscription .check img {
     display: none;
 }
 .subscription.enabled .check {
-    background-color: #019BE7;
+    background-color: var(--gj-accent);
 }
 .subscription.enabled .check img {
     display: block;
@@ -92,7 +92,7 @@
     display: inline-block;
 }
 .subscription .name {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     text-align: center;
     
@@ -123,16 +123,16 @@
     background-position: center;
 }
 .addImage {
-    background: linear-gradient(267deg, rgb(1, 214, 230) -100.57%, rgb(1, 130, 231) 90.96%); 
+    background: var(--gj-accent-grad); 
     margin-left: 0px;
 }
 .addImage:focus-visible {
-    background: white;
-    color: #141414;
+    background: var(--gj-text-primary);
+    color: var(--gj-text-inverse);
     outline: unset;
 }
 .image.enabled {
-    border: 3px solid white;
+    border: 3px solid var(--gj-text-primary);
 }
 
 .horizontalList {
@@ -141,7 +141,7 @@
     width: 100%;
     text-wrap: nowrap;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 .horizontalList::-webkit-scrollbar {
     background-color: transparent;
@@ -153,7 +153,7 @@
   .horizontalList::-webkit-scrollbar-thumb {
     border-radius: 20px;
     border: 4px solid transparent;
-    background-color: rgba(0,0,0,0.2);
+    background-color: var(--gj-bg-hover);
     background-clip: content-box;
   }
   .horizontalList::-webkit-scrollbar-button {
@@ -167,6 +167,65 @@
 }
 .sectionDescription {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-bottom: 10px;
-}
\ No newline at end of file
+}
+
+
+/* image-selector-light-mode-v29 */
+:global(:root[data-theme="light"]) .container {
+    border-color: var(--gj-border);
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
+    box-shadow: var(--gj-shadow);
+}
+
+:global(:root[data-theme="light"]) .dialogHeader .headerText,
+:global(:root[data-theme="light"]) .sectionTitle {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .dialogHeader .headerSubText,
+:global(:root[data-theme="light"]) .sectionDescription {
+    color: var(--gj-text-tertiary);
+}
+
+:global(:root[data-theme="light"]) .closeButton {
+    background: var(--gj-bg-panel-strong);
+}
+
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .subscription .check img {
+    filter: var(--gj-theme-icon-filter);
+}
+
+:global(:root[data-theme="light"]) .horizontalList {
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
+}
+
+:global(:root[data-theme="light"]) .subscription {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .subscription.enabled,
+:global(:root[data-theme="light"]) .subscription:focus {
+    background-color: var(--gj-bg-card-hover);
+}
+
+:global(:root[data-theme="light"]) .subscription .check {
+    border-color: var(--gj-border-strong);
+    background: var(--gj-bg-panel);
+}
+
+:global(:root[data-theme="light"]) .subscription.enabled .check {
+    border-color: var(--gj-accent);
+    background-color: var(--gj-accent);
+}
+
+:global(:root[data-theme="light"]) .subscription .name {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .image.enabled {
+    border-color: var(--gj-accent);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImageSelector/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayImageSelector/index.tsx
index 1529a1db..529adb89 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImageSelector/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImageSelector/index.tsx
@@ -168,12 +168,12 @@ const OverlayImageSelector: Component<OverlayImageSelectorDialogProps> = (props:
             </div>
           </ScrollContainer>
         </div>
-        <div style="height: 1px; background-color: rgba(255, 255, 255, 0.09); margin-top: 10px; margin-bottom: 10px;"></div>
+        <div style="height: 1px; background-color: var(--gj-border); margin-top: 10px; margin-bottom: 10px;"></div>
         <div style="text-align: right">
             <Button text={"Select Image"}
               onClick={()=>submit()}
               style={{"margin-left": "auto", cursor: ("pointer")}} 
-              color={"linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)"}
+              color={"var(--gj-accent-grad)"}
               focusableOpts={{
                 onPress: submit,
                 onBack: globalBack
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImportDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayImportDialog/index.module.css
index 781c9de3..9ba1ed51 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImportDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImportDialog/index.module.css
@@ -9,9 +9,9 @@
     text-align: center;
     
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .buttons {
@@ -28,13 +28,13 @@
     border-radius: 6px;
 }
 .button.none {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -46,9 +46,9 @@
     margin-top: 20px;
     margin-bottom: 30px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-code);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
 }
@@ -65,7 +65,7 @@
     top: 20px;
     height: 100px;
     width: 100px;
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-panel);
     border-radius: 20px;
     display: grid;
     align-items: center;
@@ -82,7 +82,7 @@
     width: 100%;
 }
 .header .descriptor .title{
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 28px;
@@ -93,7 +93,7 @@
     text-align: left;
 }
 .header .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 16px;
@@ -105,7 +105,7 @@
     margin-top: 10px;
 }
 .header .descriptor .meta {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -128,7 +128,7 @@
     flex: 1;
     flex-basis: 1000px;
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
     padding: 16px 18px;
     align-items: center;
     gap: 8px;
@@ -144,7 +144,7 @@
 }
 .linkContainer .linkTitle {
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -159,7 +159,7 @@
 }
 .linkContainer .linkUrl {
     overflow: hidden;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -179,7 +179,7 @@
 
 }
 .permissionContainer .headerTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -191,7 +191,7 @@
     line-height: 24px; /* 109.091% */
 }
 .permissionContainer .headerDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
 
@@ -222,7 +222,7 @@
     width: calc(100% - 50px)
 }
 .permission .permissionTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -234,7 +234,7 @@
     line-height: 24px; /* 150% */
 }
 .permission .permissionDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -253,7 +253,7 @@
 .tag {
     display: inline-block;
     margin-right: 4px;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -264,7 +264,7 @@
     font-weight: 300;
     line-height: 26px; /* 185.714% */
     border-radius: 4px;
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 4px;
@@ -284,7 +284,7 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    background: #019BE7;
+    background: var(--gj-accent);
     margin-left: auto;
     cursor: pointer;
 }
@@ -318,14 +318,14 @@
     margin-top: 15px;
 }
 .importItem .text .name {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
     line-height: 24px
 }
 .importItem .text .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -343,7 +343,7 @@
 
 
 .dialogTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
@@ -351,7 +351,7 @@
     text-align: left;
 }
 .dialogSubtitle {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -363,7 +363,7 @@
 }
 
 .importTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     text-align: center;
     leading-trim: both;
 
@@ -414,7 +414,7 @@
 .exception {
     color: red;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -424,10 +424,18 @@
 .warning {
     color: orange;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
     text-align: center;
     margin-bottom: 5px;
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImportDialog/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayImportDialog/index.tsx
index 152857c0..ccfc1f44 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImportDialog/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImportDialog/index.tsx
@@ -149,7 +149,7 @@ const OverlayImportDialog: Component<OverlayImportDialogProps> = (props: Overlay
                             onPress: () => props.dialog.action!('import', 'false'),
                             onBack: globalBack
                           }}></Button>
-                          <Button text='Yes' onClick={()=>props.dialog.action!('import', 'true')} color='#019BE7' style={{"margin-left": "10px"}} focusableOpts={{
+                          <Button text='Yes' onClick={()=>props.dialog.action!('import', 'true')} color='var(--gj-accent)' style={{"margin-left": "10px"}} focusableOpts={{
                             onPress: () => props.dialog.action!('import', 'true'),
                             onBack: globalBack
                           }}></Button>
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImportOldDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayImportOldDialog/index.module.css
index 1ffe805f..c6bb433a 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImportOldDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImportOldDialog/index.module.css
@@ -9,9 +9,9 @@
     text-align: center;
     
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .buttons {
@@ -28,13 +28,13 @@
     border-radius: 6px;
 }
 .button.none {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -46,9 +46,9 @@
     margin-top: 20px;
     margin-bottom: 30px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-code);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
 }
@@ -65,7 +65,7 @@
     top: 20px;
     height: 100px;
     width: 100px;
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-panel);
     border-radius: 20px;
     display: grid;
     align-items: center;
@@ -82,7 +82,7 @@
     width: 100%;
 }
 .header .descriptor .title{
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 28px;
@@ -93,7 +93,7 @@
     text-align: left;
 }
 .header .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 16px;
@@ -105,7 +105,7 @@
     margin-top: 10px;
 }
 .header .descriptor .meta {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -128,7 +128,7 @@
     flex: 1;
     flex-basis: 1000px;
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
     padding: 16px 18px;
     align-items: center;
     gap: 8px;
@@ -144,7 +144,7 @@
 }
 .linkContainer .linkTitle {
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -159,7 +159,7 @@
 }
 .linkContainer .linkUrl {
     overflow: hidden;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -179,7 +179,7 @@
 
 }
 .permissionContainer .headerTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -191,7 +191,7 @@
     line-height: 24px; /* 109.091% */
 }
 .permissionContainer .headerDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
 
@@ -222,7 +222,7 @@
     width: calc(100% - 50px)
 }
 .permission .permissionTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -234,7 +234,7 @@
     line-height: 24px; /* 150% */
 }
 .permission .permissionDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -273,7 +273,7 @@
     width: calc(100% - 50px)
 }
 .warning .warningTitle {
-    color: #F97066;
+    color: var(--gj-danger-accent);
 
     leading-trim: both;
 
@@ -285,7 +285,7 @@
     line-height: 24px; /* 120% */
 }
 .warning .warningDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -300,7 +300,7 @@
 .tag {
     display: inline-block;
     margin-right: 4px;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -311,7 +311,7 @@
     font-weight: 300;
     line-height: 26px; /* 185.714% */
     border-radius: 4px;
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 4px;
@@ -331,7 +331,15 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    background: #019BE7;
+    background: var(--gj-accent);
     margin-left: auto;
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImportPlaylistsDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayImportPlaylistsDialog/index.module.css
index 642a5e5a..8ece8f60 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImportPlaylistsDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImportPlaylistsDialog/index.module.css
@@ -9,9 +9,9 @@
     text-align: center;
     
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .buttons {
@@ -28,13 +28,13 @@
     border-radius: 6px;
 }
 .button.none {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -46,9 +46,9 @@
     margin-top: 20px;
     margin-bottom: 30px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-code);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
 }
@@ -65,7 +65,7 @@
     top: 20px;
     height: 100px;
     width: 100px;
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-panel);
     border-radius: 20px;
     display: grid;
     align-items: center;
@@ -82,7 +82,7 @@
     width: 100%;
 }
 .header .descriptor .title{
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 28px;
@@ -93,7 +93,7 @@
     text-align: left;
 }
 .header .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 16px;
@@ -105,7 +105,7 @@
     margin-top: 10px;
 }
 .header .descriptor .meta {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -128,7 +128,7 @@
     flex: 1;
     flex-basis: 1000px;
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
     padding: 16px 18px;
     align-items: center;
     gap: 8px;
@@ -144,7 +144,7 @@
 }
 .linkContainer .linkTitle {
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -159,7 +159,7 @@
 }
 .linkContainer .linkUrl {
     overflow: hidden;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -179,7 +179,7 @@
 
 }
 .permissionContainer .headerTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -191,7 +191,7 @@
     line-height: 24px; /* 109.091% */
 }
 .permissionContainer .headerDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
 
@@ -222,7 +222,7 @@
     width: calc(100% - 50px)
 }
 .permission .permissionTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -234,7 +234,7 @@
     line-height: 24px; /* 150% */
 }
 .permission .permissionDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -253,7 +253,7 @@
 .tag {
     display: inline-block;
     margin-right: 4px;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -264,7 +264,7 @@
     font-weight: 300;
     line-height: 26px; /* 185.714% */
     border-radius: 4px;
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 4px;
@@ -284,7 +284,7 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    background: #019BE7;
+    background: var(--gj-accent);
     margin-left: auto;
     cursor: pointer;
 }
@@ -318,14 +318,14 @@
     margin-top: 15px;
 }
 .importItem .text .name {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
     line-height: 24px
 }
 .importItem .text .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -343,7 +343,7 @@
 
 
 .dialogTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
@@ -351,7 +351,7 @@
     text-align: left;
 }
 .dialogSubtitle {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -363,7 +363,7 @@
 }
 
 .importTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     text-align: center;
     leading-trim: both;
 
@@ -414,7 +414,7 @@
 .exception {
     color: red;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -424,7 +424,7 @@
 .warning {
     color: orange;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -437,7 +437,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: 8px;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
     scrollbar-width: thin;
 }
 
@@ -446,16 +446,16 @@
 }
 
 .channels::-webkit-scrollbar-thumb {
-    background-color: #555;
+    background-color: var(--gj-text-tertiary);
     border-radius: 5px;
 }
 
 .channels::-webkit-scrollbar-thumb:hover {
-    background-color: #888;
+    background-color: var(--gj-text-tertiary);
 }
 
 .channels::-webkit-scrollbar-track {
-    background-color: #333;
+    background-color: var(--gj-bg-card-active);
 }
 
 .channels::-webkit-scrollbar-corner {
@@ -465,7 +465,7 @@
 .channel {
     position: relative;
     height: 45px;
-    background-color: #111;
+    background-color: var(--gj-bg-popover);
     border-radius: 8px;
     margin-bottom: 5px;
 }
@@ -495,4 +495,12 @@
     top: 0px;
     height: 100%;
     transform: scale(0.75);
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImportPlaylistsDialog/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayImportPlaylistsDialog/index.tsx
index 0e0572f8..c7b6c89a 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImportPlaylistsDialog/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImportPlaylistsDialog/index.tsx
@@ -127,7 +127,7 @@ const OverlayImportPlaylistsDialog: Component<OverlayImportPlaylistsDialogProps>
                             onPress: () => props.dialog.action!('close', ''),
                             onBack: globalBack
                           }}></Button>
-                          <Button text='Import' color={(props.dialog.data$().Selected.length > 0) ? '#019BE7' : '#181818'} onClick={()=>importPlaylists()} style={{"margin-left": "10px"}} focusableOpts={{
+                          <Button text='Import' color={(props.dialog.data$().Selected.length > 0) ? 'var(--gj-accent)' : 'var(--gj-bg-control)'} onClick={()=>importPlaylists()} style={{"margin-left": "10px"}} focusableOpts={{
                             onPress: () => importPlaylists(),
                             onBack: globalBack
                           }}></Button>
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImportSelectDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayImportSelectDialog/index.module.css
index 958f0a47..0b534d1d 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImportSelectDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImportSelectDialog/index.module.css
@@ -8,9 +8,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -26,7 +26,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-top: 5px;
 }
 
@@ -40,7 +40,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-card-active);
     cursor: pointer;
 }
 .closeButton img {
@@ -55,7 +55,7 @@
     overflow-y: auto;
     max-height: 800px;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 .source {
@@ -66,7 +66,7 @@
     cursor: pointer;
 }
 .source .name {
-    color: #CDCDCD;
+    color: var(--gj-text-secondary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;
@@ -83,7 +83,7 @@
     overflow: hidden;
     font-size: 12px;
     text-overflow: ellipsis;
-    color: #8C8C8C
+    color: var(--gj-text-tertiary)
 }
 .source.hasSubs .meta {
     display: hidden;
@@ -106,13 +106,13 @@
 
 .source.enabled {
     border-radius: 4px;
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--gj-bg-hover);
 }
 .source.enabled img {
     display: block;
 }
 .source.enabled .name {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-weight: 600;
 }
 
@@ -121,4 +121,12 @@
     margin-left: 30px;
     font-weight: bold;
     margin-top: 20px;
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImportSubscriptionsDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayImportSubscriptionsDialog/index.module.css
index e6b51fae..2fcb4e82 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImportSubscriptionsDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImportSubscriptionsDialog/index.module.css
@@ -9,9 +9,9 @@
     text-align: center;
     
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .buttons {
@@ -28,13 +28,13 @@
     border-radius: 6px;
 }
 .button.none {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -46,9 +46,9 @@
     margin-top: 20px;
     margin-bottom: 30px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-code);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
 }
@@ -65,7 +65,7 @@
     top: 20px;
     height: 100px;
     width: 100px;
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-panel);
     border-radius: 20px;
     display: grid;
     align-items: center;
@@ -82,7 +82,7 @@
     width: 100%;
 }
 .header .descriptor .title{
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 28px;
@@ -93,7 +93,7 @@
     text-align: left;
 }
 .header .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 16px;
@@ -105,7 +105,7 @@
     margin-top: 10px;
 }
 .header .descriptor .meta {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -128,7 +128,7 @@
     flex: 1;
     flex-basis: 1000px;
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
     padding: 16px 18px;
     align-items: center;
     gap: 8px;
@@ -144,7 +144,7 @@
 }
 .linkContainer .linkTitle {
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -159,7 +159,7 @@
 }
 .linkContainer .linkUrl {
     overflow: hidden;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -179,7 +179,7 @@
 
 }
 .permissionContainer .headerTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -191,7 +191,7 @@
     line-height: 24px; /* 109.091% */
 }
 .permissionContainer .headerDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
 
@@ -222,7 +222,7 @@
     width: calc(100% - 50px)
 }
 .permission .permissionTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -234,7 +234,7 @@
     line-height: 24px; /* 150% */
 }
 .permission .permissionDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -253,7 +253,7 @@
 .tag {
     display: inline-block;
     margin-right: 4px;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -264,7 +264,7 @@
     font-weight: 300;
     line-height: 26px; /* 185.714% */
     border-radius: 4px;
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 4px;
@@ -284,7 +284,7 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    background: #019BE7;
+    background: var(--gj-accent);
     margin-left: auto;
     cursor: pointer;
 }
@@ -318,14 +318,14 @@
     margin-top: 15px;
 }
 .importItem .text .name {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
     line-height: 24px
 }
 .importItem .text .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -343,7 +343,7 @@
 
 
 .dialogTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
@@ -351,7 +351,7 @@
     text-align: left;
 }
 .dialogSubtitle {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -363,7 +363,7 @@
 }
 
 .importTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     text-align: center;
     leading-trim: both;
 
@@ -414,7 +414,7 @@
 .exception {
     color: red;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -424,7 +424,7 @@
 .warning {
     color: orange;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -437,7 +437,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: 8px;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
     scrollbar-width: thin;
 }
 
@@ -446,16 +446,16 @@
 }
 
 .channels::-webkit-scrollbar-thumb {
-    background-color: #555;
+    background-color: var(--gj-text-tertiary);
     border-radius: 5px;
 }
 
 .channels::-webkit-scrollbar-thumb:hover {
-    background-color: #888;
+    background-color: var(--gj-text-tertiary);
 }
 
 .channels::-webkit-scrollbar-track {
-    background-color: #333;
+    background-color: var(--gj-bg-card-active);
 }
 
 .channels::-webkit-scrollbar-corner {
@@ -465,7 +465,7 @@
 .channel {
     position: relative;
     height: 45px;
-    background-color: #111;
+    background-color: var(--gj-bg-popover);
     border-radius: 10px;
     margin-bottom: 5px;
 }
@@ -495,4 +495,12 @@
     top: 0px;
     height: 100%;
     transform: scale(0.75);
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayImportSubscriptionsDialog/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayImportSubscriptionsDialog/index.tsx
index 2e2a7389..34ddd789 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayImportSubscriptionsDialog/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayImportSubscriptionsDialog/index.tsx
@@ -130,7 +130,7 @@ const OverlayImportSubscriptionsDialog: Component<OverlayImportSubscriptionsDial
                             onPress: () => props.dialog.action!('close', ''),
                             onBack: globalBack
                           }}></Button>
-                          <Button text='Import' color={(props.dialog.data$().Selected.length > 0) ? '#019BE7' : '#181818'} onClick={()=>importSubs()} style={{"margin-left": "10px"}} focusableOpts={{
+                          <Button text='Import' color={(props.dialog.data$().Selected.length > 0) ? 'var(--gj-accent)' : 'var(--gj-bg-control)'} onClick={()=>importSubs()} style={{"margin-left": "10px"}} focusableOpts={{
                             onPress: () => importSubs(),
                             onBack: globalBack
                           }}></Button>
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayModals/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayModals/index.module.css
index fa27be6b..0b29a481 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayModals/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayModals/index.module.css
@@ -5,7 +5,7 @@
     left: 0px;
     width: 100%;
     height: 100%;
-    background-color: rgba(0,0,0, .5);
+    background-color: var(--gj-bg-backdrop);
     display: grid;
     align-items: center;
     justify-content: center;
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayOfficialPluginsDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayOfficialPluginsDialog/index.module.css
index d82e1a7d..972fda52 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayOfficialPluginsDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayOfficialPluginsDialog/index.module.css
@@ -1,5 +1,4 @@
 
-
 .container {
     width: 500px;
     position: relative;
@@ -9,12 +8,13 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
     scrollbar-width: thin;
     overflow-y: auto;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -26,11 +26,11 @@
 .dialogHeader .headerText {
     font-size: 25px;
     font-weight: bold;
-
+    color: var(--gj-text-primary);
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-top: 5px;
 }
 
@@ -38,13 +38,13 @@
     position: absolute;
     display: grid;
     justify-content: center;
-    align-items: center;;
+    align-items: center;
     top: 20px;
     right: 20px;
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-panel-strong);
     cursor: pointer;
 }
 .closeButton img {
@@ -62,8 +62,10 @@
     margin: 10px;
     display: inline-block;
     vertical-align: top;
-    background-color: #222;
+    background-color: var(--gj-bg-card);
+    border: 1px solid var(--gj-border);
     border-radius: 6px;
+    color: var(--gj-text-primary);
 }
 
 .source .imageContainer {
@@ -88,19 +90,19 @@
     display:table-cell;
     vertical-align: middle;
     width: 120px;
+    color: var(--gj-text-primary);
 }
 
-.source:hover {
-    background-color: #333;
+.source:hover,
+.source:focus-visible {
+    background-color: var(--gj-bg-card-hover);
+    outline: unset;
 }
 
-
 .source.otherButton:hover {
     cursor: pointer;
-
 }
 
-
 .checkContainer{
     position: absolute;
     top: 5px;
@@ -112,9 +114,29 @@
 .error {
     width: 100%;
     margin-top: 5px;
-    background-color: rgba(0, 0, 0, .2);
+    background-color: rgba(255, 0, 0, .08);
+    border: 1px solid rgba(255, 0, 0, .18);
     padding: 5px;
     text-align: center;
-    color: red;
+    color: #c83333;
     border-radius: 10px;
-}
\ No newline at end of file
+}
+
+
+:global(:root[data-theme="light"]) .closeButton {
+    background: var(--gj-bg-panel-strong);
+    border: 1px solid var(--gj-border);
+}
+
+:global(:root[data-theme="light"]) .closeButton img {
+    filter: var(--gj-theme-icon-filter);
+}
+
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayOfficialPluginsDialog/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlayOfficialPluginsDialog/index.tsx
index 07f65589..009ad2fa 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayOfficialPluginsDialog/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayOfficialPluginsDialog/index.tsx
@@ -158,12 +158,12 @@ const OverlayOfficialPluginsDialog: Component<OverlayOfficialPluginsDialogProps>
             </div>
           </div>
           
-          <div style="height: 1px; background-color: rgba(255, 255, 255, 0.09); margin-top: 10px; margin-bottom: 10px;"></div>
+          <div style="height: 1px; background-color: var(--gj-border-muted); margin-top: 10px; margin-bottom: 10px;"></div>
             <div style="text-align: center">
                 <Button text={"Install Selected"}
                   onClick={()=>selected$() && selected$().length > 0 && install()}
                   style={{"margin-left": "10px", cursor: ("pointer")}} 
-                  color={((selected$() && selected$().length > 0) ? "linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)" : "")}
+                  color={((selected$() && selected$().length > 0) ? "var(--gj-accent-grad)" : "")}
                   focusableOpts={{
                     onPress: install,
                     onBack: globalBack
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayRoot/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayRoot/index.module.css
index 8d617f4f..f4b2f03d 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayRoot/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayRoot/index.module.css
@@ -1,4 +1,3 @@
-
 .root {
     position: fixed;
     top: 80px;
@@ -17,21 +16,25 @@
 }
 
 .toast {
-    background-color: rgba(20,20,20,.95);
+    background-color: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
     padding-top: 10px;
     padding-bottom: 10px;
     padding-left: 20px;
     padding-right: 20px;
     border-radius: 10px;
     text-align: center;
-    border: 1px solid #2b2a2a;
+    border: 1px solid var(--gj-border);
+    box-shadow: var(--gj-shadow);
     z-index: 999;
 }
 .toastText {
-    font-size: 22px;
-    font-weight: lighter;
+    color: var(--gj-text-secondary);
+    font-size: 18px;
+    font-weight: 400;
 }
 .toastTitle {
-    font-weight: 400;
-    font-size: 26px;
-}
\ No newline at end of file
+    color: var(--gj-text-primary);
+    font-weight: 500;
+    font-size: 22px;
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySelectOnlineSyncDevice/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlaySelectOnlineSyncDevice/index.module.css
index 958f0a47..0b534d1d 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySelectOnlineSyncDevice/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySelectOnlineSyncDevice/index.module.css
@@ -8,9 +8,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -26,7 +26,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-top: 5px;
 }
 
@@ -40,7 +40,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-card-active);
     cursor: pointer;
 }
 .closeButton img {
@@ -55,7 +55,7 @@
     overflow-y: auto;
     max-height: 800px;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 .source {
@@ -66,7 +66,7 @@
     cursor: pointer;
 }
 .source .name {
-    color: #CDCDCD;
+    color: var(--gj-text-secondary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;
@@ -83,7 +83,7 @@
     overflow: hidden;
     font-size: 12px;
     text-overflow: ellipsis;
-    color: #8C8C8C
+    color: var(--gj-text-tertiary)
 }
 .source.hasSubs .meta {
     display: hidden;
@@ -106,13 +106,13 @@
 
 .source.enabled {
     border-radius: 4px;
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--gj-bg-hover);
 }
 .source.enabled img {
     display: block;
 }
 .source.enabled .name {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-weight: 600;
 }
 
@@ -121,4 +121,12 @@
     margin-left: 30px;
     font-weight: bold;
     margin-top: 20px;
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySelectOnlineSyncDevice/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlaySelectOnlineSyncDevice/index.tsx
index feb37506..23e86c94 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySelectOnlineSyncDevice/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySelectOnlineSyncDevice/index.tsx
@@ -45,16 +45,16 @@ const OverlaySelectOnlineSyncDeviceDialog: Component<OverlaySelectOnlineSyncDevi
           <div>
             <For each={StateSync.devicesOnline$()}>{ dev => 
               <div onClick={()=>{UIOverlay.dismiss(); props.act(dev)}} style="cursor: pointer">
-                  <div style="display: flex; flex-direction: row; border-radius: 6px; background: #1B1B1B; padding: 14px 18px 14px; gap: 12px;  margin-left: 24px; margin-right: 24px; align-items: center;">
+                  <div style="display: flex; flex-direction: row; border-radius: 6px; background: var(--gj-bg-panel); padding: 14px 18px 14px; gap: 12px;  margin-left: 24px; margin-right: 24px; align-items: center;">
                     <img src={StateSync.getSyncIcon(dev.linkType)} style="width: 44px;" />
                     <div style="display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; justify-content: center;">
-                        <div style="overflow: hidden; color: white; text-align: center; text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal;">{dev.displayName ?? dev.publicKey}</div>
-                        <div style="color: #595959; font-family: Inter; font-size: 10px; font-style: normal; font-weight: 500; line-height: normal;">{dev.metadata}</div>
+                        <div style="overflow: hidden; color: var(--gj-text-primary); text-align: center; text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal;">{dev.displayName ?? dev.publicKey}</div>
+                        <div style="color: var(--gj-text-tertiary); font-family: Inter; font-size: 10px; font-style: normal; font-weight: 500; line-height: normal;">{dev.metadata}</div>
                     </div>
                 
-                    <div style="border-radius: 4px; border: 1px solid #2E2E2E; display: flex; padding: 6px 8px; align-items: center; gap: 4px; flex-shrink: 0; height: fit-content;">
+                    <div style="border-radius: 4px; border: 1px solid var(--gj-border); display: flex; padding: 6px 8px; align-items: center; gap: 4px; flex-shrink: 0; height: fit-content;">
                       <img src={StateSync.getSyncIcon(dev.linkType)} style="width: 20x; cursor: pointer;" />
-                      <div style="color: #BFBFBF; font-family: Inter; font-size: 10px; font-style: normal; font-weight: 500; line-height: normal;">{StateSync.getSyncLinkName(dev.linkType)}</div>
+                      <div style="color: var(--gj-text-secondary); font-family: Inter; font-size: 10px; font-style: normal; font-weight: 500; line-height: normal;">{StateSync.getSyncLinkName(dev.linkType)}</div>
                     </div>
                   </div>
               </div>
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySettings/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlaySettings/index.module.css
index e657cc01..9d9f0f90 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySettings/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySettings/index.module.css
@@ -9,9 +9,9 @@
     text-align: center;
     
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .buttons {
@@ -28,13 +28,13 @@
     border-radius: 6px;
 }
 .button.none {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -46,9 +46,9 @@
     margin-top: 20px;
     margin-bottom: 30px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-code);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
 }
@@ -65,7 +65,7 @@
     top: 20px;
     height: 100px;
     width: 100px;
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-panel);
     border-radius: 20px;
     display: grid;
     align-items: center;
@@ -82,7 +82,7 @@
     width: 100%;
 }
 .header .descriptor .title{
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 28px;
@@ -93,7 +93,7 @@
     text-align: left;
 }
 .header .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 16px;
@@ -105,7 +105,7 @@
     margin-top: 10px;
 }
 .header .descriptor .meta {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -128,7 +128,7 @@
     flex: 1;
     flex-basis: 1000px;
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
     padding: 16px 18px;
     align-items: center;
     gap: 8px;
@@ -144,7 +144,7 @@
 }
 .linkContainer .linkTitle {
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -159,7 +159,7 @@
 }
 .linkContainer .linkUrl {
     overflow: hidden;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -179,7 +179,7 @@
 
 }
 .permissionContainer .headerTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -191,7 +191,7 @@
     line-height: 24px; /* 109.091% */
 }
 .permissionContainer .headerDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
 
@@ -222,7 +222,7 @@
     width: calc(100% - 50px)
 }
 .permission .permissionTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -234,7 +234,7 @@
     line-height: 24px; /* 150% */
 }
 .permission .permissionDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -273,7 +273,7 @@
     width: calc(100% - 50px)
 }
 .warning .warningTitle {
-    color: #F97066;
+    color: var(--gj-danger-accent);
 
     leading-trim: both;
 
@@ -285,7 +285,7 @@
     line-height: 24px; /* 120% */
 }
 .warning .warningDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -300,7 +300,7 @@
 .tag {
     display: inline-block;
     margin-right: 4px;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -311,7 +311,7 @@
     font-weight: 300;
     line-height: 26px; /* 185.714% */
     border-radius: 4px;
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 4px;
@@ -331,7 +331,7 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    background: #019BE7;
+    background: var(--gj-accent);
     margin-left: auto;
     cursor: pointer;
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayShareDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayShareDialog/index.module.css
index 5438be15..c6c18dec 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayShareDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayShareDialog/index.module.css
@@ -8,9 +8,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -26,7 +26,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-top: 5px;
 }
 
@@ -40,7 +40,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-panel-strong);
     cursor: pointer;
 }
 .closeButton img {
@@ -55,7 +55,7 @@
     overflow-y: auto;
     max-height: 800px;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 .source {
@@ -66,7 +66,7 @@
     cursor: pointer;
 }
 .source .name {
-    color: #CDCDCD;
+    color: var(--gj-text-secondary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;
@@ -83,7 +83,7 @@
     overflow: hidden;
     font-size: 12px;
     text-overflow: ellipsis;
-    color: #8C8C8C
+    color: var(--gj-text-tertiary)
 }
 .source.hasSubs .meta {
     display: hidden;
@@ -106,13 +106,13 @@
 
 .source.enabled {
     border-radius: 4px;
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--gj-bg-hover);
 }
 .source.enabled img {
     display: block;
 }
 .source.enabled .name {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-weight: 600;
 }
 
@@ -130,7 +130,8 @@
     max-height: 100%;
     height: auto;
     padding: 10px;
-    background-color: #212121;
+    background-color: var(--gj-bg-card);
+    color: var(--gj-text-primary);
     border-radius: 8px;
     user-select: text;
     text-align: center;
@@ -145,8 +146,14 @@
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.5s ease;
-    background-color: #111;
+    background-color: var(--gj-bg-panel-strong);
+    color: var(--gj-text-primary);
 }
 .copyLabel.visible {
     opacity: 1;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .source.enabled img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySourceInstall/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlaySourceInstall/index.module.css
index e657cc01..5367f462 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySourceInstall/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySourceInstall/index.module.css
@@ -9,9 +9,9 @@
     text-align: center;
     
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .buttons {
@@ -28,13 +28,13 @@
     border-radius: 6px;
 }
 .button.none {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -46,9 +46,9 @@
     margin-top: 20px;
     margin-bottom: 30px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-code);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
 }
@@ -65,7 +65,7 @@
     top: 20px;
     height: 100px;
     width: 100px;
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-panel);
     border-radius: 20px;
     display: grid;
     align-items: center;
@@ -82,7 +82,7 @@
     width: 100%;
 }
 .header .descriptor .title{
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 28px;
@@ -93,7 +93,7 @@
     text-align: left;
 }
 .header .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 16px;
@@ -105,7 +105,7 @@
     margin-top: 10px;
 }
 .header .descriptor .meta {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -128,7 +128,7 @@
     flex: 1;
     flex-basis: 1000px;
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
     padding: 16px 18px;
     align-items: center;
     gap: 8px;
@@ -144,7 +144,7 @@
 }
 .linkContainer .linkTitle {
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -159,7 +159,7 @@
 }
 .linkContainer .linkUrl {
     overflow: hidden;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -179,7 +179,7 @@
 
 }
 .permissionContainer .headerTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -191,7 +191,7 @@
     line-height: 24px; /* 109.091% */
 }
 .permissionContainer .headerDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
 
@@ -222,7 +222,7 @@
     width: calc(100% - 50px)
 }
 .permission .permissionTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -234,7 +234,7 @@
     line-height: 24px; /* 150% */
 }
 .permission .permissionDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -273,7 +273,7 @@
     width: calc(100% - 50px)
 }
 .warning .warningTitle {
-    color: #F97066;
+    color: var(--gj-danger-accent);
 
     leading-trim: both;
 
@@ -285,7 +285,7 @@
     line-height: 24px; /* 120% */
 }
 .warning .warningDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -300,7 +300,7 @@
 .tag {
     display: inline-block;
     margin-right: 4px;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -311,7 +311,7 @@
     font-weight: 300;
     line-height: 26px; /* 185.714% */
     border-radius: 4px;
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 4px;
@@ -331,7 +331,15 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    background: #019BE7;
+    background: var(--gj-accent);
     margin-left: auto;
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionGroupEdit/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionGroupEdit/index.module.css
index 682b32f6..e70c6ae3 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionGroupEdit/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionGroupEdit/index.module.css
@@ -8,9 +8,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -25,7 +25,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
 }
 
 .closeButton {
@@ -38,7 +38,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-card-active);
     cursor: pointer;
 }
 .closeButton img {
@@ -62,7 +62,7 @@
     margin: 5px;
 }
 .subscription.enabled {
-    background-color: #212121;
+    background-color: var(--gj-bg-control);
 }
 .subscription .check {
     width: 18px;
@@ -71,13 +71,13 @@
     top: 10px;
     right: 5px;
     border-radius: 72.727px;
-    border: 2px solid #454545;
+    border: 2px solid var(--gj-border-strong);
 }
 .subscription .check img {
     display: none;
 }
 .subscription.enabled .check {
-    background-color: #019BE7;
+    background-color: var(--gj-accent);
 }
 .subscription.enabled .check img {
     display: block;
@@ -92,7 +92,7 @@
     display: inline-block;
 }
 .subscription .name {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     text-align: center;
     
@@ -119,7 +119,7 @@
     margin-top: 5px;
     margin-bottom: 10px;
     font-size: 14px;
-    color: #595959;
+    color: var(--gj-text-tertiary);
 }
 
 .image {
@@ -134,5 +134,60 @@
 .image .text{
     text-align: center;
     transform: translateY(30px);
-    color: black;
-}
\ No newline at end of file
+    color: var(--gj-text-inverse);
+}
+
+
+/* subscription-group-edit-light-mode-v29 */
+:global(:root[data-theme="light"]) .container {
+    border-color: var(--gj-border);
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
+    box-shadow: var(--gj-shadow);
+}
+
+:global(:root[data-theme="light"]) .dialogHeader .headerText,
+:global(:root[data-theme="light"]) .sectionTitle {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .dialogHeader .headerSubText,
+:global(:root[data-theme="light"]) .sectionDescription {
+    color: var(--gj-text-tertiary);
+}
+
+:global(:root[data-theme="light"]) .closeButton {
+    background: var(--gj-bg-panel-strong);
+}
+
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .subscription .check img {
+    filter: var(--gj-theme-icon-filter);
+}
+
+:global(:root[data-theme="light"]) .subscription {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .subscription.enabled,
+:global(:root[data-theme="light"]) .subscription:focus {
+    background-color: var(--gj-bg-card-hover);
+}
+
+:global(:root[data-theme="light"]) .subscription .check {
+    border-color: var(--gj-border-strong);
+    background: var(--gj-bg-panel);
+}
+
+:global(:root[data-theme="light"]) .subscription.enabled .check {
+    border-color: var(--gj-accent);
+    background-color: var(--gj-accent);
+}
+
+:global(:root[data-theme="light"]) .subscription .name {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .image .text {
+    color: var(--gj-text-primary);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionGroupEdit/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionGroupEdit/index.tsx
index 46f0aa3c..7b5bc6be 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionGroupEdit/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionGroupEdit/index.tsx
@@ -108,7 +108,7 @@ const OverlaySubscriptionGroupEditDialog: Component<OverlaySubscriptionGroupEdit
                 Deleted groups cannot be recovered
               </div>
             </div>
-            <div style="height: 1px; background-color: rgba(255, 255, 255, 0.09); margin-top: 10px; margin-bottom: 10px;"></div>
+            <div style="height: 1px; background-color: var(--gj-border); margin-top: 10px; margin-bottom: 10px;"></div>
             <div style="text-align: right">
                 <Button text={"Cancel"}
                   onClick={()=>changeView(0)}
@@ -192,7 +192,7 @@ const OverlaySubscriptionGroupEditDialog: Component<OverlaySubscriptionGroupEdit
                 </div>
               </div>
             </ScrollContainer>
-            <div style="height: 1px; background-color: rgba(255, 255, 255, 0.09); margin-top: 10px; margin-bottom: 10px;"></div>
+            <div style="height: 1px; background-color: var(--gj-border); margin-top: 10px; margin-bottom: 10px;"></div>
             <div style="text-align: right">
                   <Show when={selected$().length > 0}>
                     <Button text={"Delete Selected"}
@@ -207,7 +207,7 @@ const OverlaySubscriptionGroupEditDialog: Component<OverlaySubscriptionGroupEdit
                 <Button text={"Add Subscriptions"}
                   onClick={()=>changeView(2)}
                   style={{"margin-left": "10px", cursor: ("pointer")}} 
-                  color={"#222"}
+                  color={"var(--gj-bg-control)"}
                   focusableOpts={{
                     onPress: () => changeView(2),
                     onBack: globalBack
@@ -223,7 +223,7 @@ const OverlaySubscriptionGroupEditDialog: Component<OverlaySubscriptionGroupEdit
                 <Button text={"Save"}
                   onClick={()=>save()}
                   style={{"margin-left": "10px", cursor: ("pointer")}} 
-                  color={"linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)"}
+                  color={"var(--gj-accent-grad)"}
                   focusableOpts={{
                     onPress: () => save(),
                     onBack: globalBack
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionsSelector/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionsSelector/index.module.css
index ead5e0c3..315006de 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionsSelector/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionsSelector/index.module.css
@@ -8,9 +8,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -25,7 +25,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
 }
 
 .closeButton {
@@ -38,7 +38,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-card-active);
     cursor: pointer;
 }
 .closeButton img {
@@ -46,7 +46,7 @@
     height: 24px;
 }
 .closeButton:focus {
-  background: #3A3A3A;
+  background: var(--gj-bg-card-active);
 }
 
 .subscriptionsContainer {
@@ -65,19 +65,19 @@
     margin: 5px;
 }
 .subscription.enabled {
-    background-color: #212121;
+    background-color: var(--gj-bg-control);
 }
 .subscription:focus {
-  background-color: #1E1E1E;
+  background-color: var(--gj-bg-panel-strong);
 }
 .subscription.enabled:focus {
-  background-color: #2A2A2A;
+  background-color: var(--gj-bg-card-active);
 }
 .subscription:focus .check {
-  border-color: #6A6A6A;
+  border-color: var(--gj-border-strong);
 }
 .subscription.enabled:focus .check {
-  background-color: #07A9F0; /* slightly brighter than #019BE7 */
+  background-color: var(--gj-accent); /* slightly brighter than #019BE7 */
 }
 .subscription .check {
     width: 18px;
@@ -86,13 +86,13 @@
     top: 10px;
     right: 5px;
     border-radius: 72.727px;
-    border: 2px solid #454545;
+    border: 2px solid var(--gj-border-strong);
 }
 .subscription .check img {
     display: none;
 }
 .subscription.enabled .check {
-    background-color: #019BE7;
+    background-color: var(--gj-accent);
 }
 .subscription.enabled .check img {
     display: block;
@@ -107,7 +107,7 @@
     display: inline-block;
 }
 .subscription .name {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     text-align: center;
     
@@ -124,4 +124,52 @@
     max-height: 24px;
     margin-top: 3px;
     overflow: hidden;
-}
\ No newline at end of file
+}
+
+
+/* subscriptions-selector-light-mode-v29 */
+:global(:root[data-theme="light"]) .container {
+    border-color: var(--gj-border);
+    background: var(--gj-bg-panel);
+    color: var(--gj-text-primary);
+    box-shadow: var(--gj-shadow);
+}
+
+:global(:root[data-theme="light"]) .dialogHeader .headerText {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .dialogHeader .headerSubText {
+    color: var(--gj-text-tertiary);
+}
+
+:global(:root[data-theme="light"]) .closeButton {
+    background: var(--gj-bg-panel-strong);
+}
+
+:global(:root[data-theme="light"]) .closeButton:focus,
+:global(:root[data-theme="light"]) .subscription:focus,
+:global(:root[data-theme="light"]) .subscription.enabled:focus,
+:global(:root[data-theme="light"]) .subscription.enabled {
+    background-color: var(--gj-bg-card-hover);
+}
+
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .subscription .check img {
+    filter: var(--gj-theme-icon-filter);
+}
+
+:global(:root[data-theme="light"]) .subscription .check {
+    border-color: var(--gj-border-strong);
+    background: var(--gj-bg-panel);
+}
+
+:global(:root[data-theme="light"]) .subscription.enabled .check,
+:global(:root[data-theme="light"]) .subscription.enabled:focus .check {
+    border-color: var(--gj-accent);
+    background-color: var(--gj-accent);
+}
+
+:global(:root[data-theme="light"]) .subscription .name {
+    color: var(--gj-text-primary);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionsSelector/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionsSelector/index.tsx
index 5489d04e..433eda09 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionsSelector/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySubscriptionsSelector/index.tsx
@@ -133,13 +133,13 @@ const OverlaySubscriptionsSelector: Component<OverlaySubscsriptionsSelectorDialo
             </div>
           </ScrollContainer>
         </div>
-        <div style="height: 1px; background-color: rgba(255, 255, 255, 0.09); margin-top: 10px; margin-bottom: 10px;"></div>
+        <div style="height: 1px; background-color: var(--gj-border); margin-top: 10px; margin-bottom: 10px;"></div>
         <div style="text-align: right">
             <Button 
               text={"Select " + selected$().length + " creators"}
               onClick={()=>submit()}
               style={{"margin-left": "auto", cursor: ("pointer")}} 
-              color={"linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)"} 
+              color={"var(--gj-accent-grad)"} 
               focusableOpts={{
                 onPress: submit,
                 onBack: dialogBack,
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySyncConfirmDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlaySyncConfirmDialog/index.module.css
index f2c7fdeb..581dc7e1 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySyncConfirmDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySyncConfirmDialog/index.module.css
@@ -9,9 +9,9 @@
     text-align: center;
     
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .buttons {
@@ -28,13 +28,13 @@
     border-radius: 6px;
 }
 .button.none {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -46,9 +46,9 @@
     margin-top: 20px;
     margin-bottom: 30px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-code);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
 }
@@ -65,7 +65,7 @@
     top: 20px;
     height: 100px;
     width: 100px;
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-panel);
     border-radius: 20px;
     display: grid;
     align-items: center;
@@ -82,7 +82,7 @@
     width: 100%;
 }
 .header .descriptor .title{
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 28px;
@@ -93,7 +93,7 @@
     text-align: left;
 }
 .header .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 16px;
@@ -105,7 +105,7 @@
     margin-top: 10px;
 }
 .header .descriptor .meta {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -128,7 +128,7 @@
     flex: 1;
     flex-basis: 1000px;
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
     padding: 16px 18px;
     align-items: center;
     gap: 8px;
@@ -144,7 +144,7 @@
 }
 .linkContainer .linkTitle {
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -159,7 +159,7 @@
 }
 .linkContainer .linkUrl {
     overflow: hidden;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -179,7 +179,7 @@
 
 }
 .permissionContainer .headerTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -191,7 +191,7 @@
     line-height: 24px; /* 109.091% */
 }
 .permissionContainer .headerDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
 
@@ -222,7 +222,7 @@
     width: calc(100% - 50px)
 }
 .permission .permissionTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -234,7 +234,7 @@
     line-height: 24px; /* 150% */
 }
 .permission .permissionDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -253,7 +253,7 @@
 .tag {
     display: inline-block;
     margin-right: 4px;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -264,7 +264,7 @@
     font-weight: 300;
     line-height: 26px; /* 185.714% */
     border-radius: 4px;
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 4px;
@@ -284,7 +284,7 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    background: #019BE7;
+    background: var(--gj-accent);
     margin-left: auto;
     cursor: pointer;
 }
@@ -318,14 +318,14 @@
     margin-top: 15px;
 }
 .importItem .text .name {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
     line-height: 24px
 }
 .importItem .text .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -343,7 +343,7 @@
 
 
 .dialogTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
@@ -351,7 +351,7 @@
     text-align: left;
 }
 .dialogSubtitle {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -363,7 +363,7 @@
 }
 
 .importTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     text-align: center;
     leading-trim: both;
 
@@ -414,7 +414,7 @@
 .exception {
     color: red;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -424,7 +424,7 @@
 .warning {
     color: orange;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -439,7 +439,7 @@
 .channel {
     position: relative;
     height: 45px;
-    background-color: #111;
+    background-color: var(--gj-bg-popover);
     border-radius: 10px;
     margin-bottom: 5px;
 }
@@ -469,4 +469,12 @@
     top: 0px;
     height: 100%;
     transform: scale(0.75);
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySyncNewDeviceDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlaySyncNewDeviceDialog/index.module.css
index 958f0a47..0b534d1d 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySyncNewDeviceDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySyncNewDeviceDialog/index.module.css
@@ -8,9 +8,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .dialogHeader {
@@ -26,7 +26,7 @@
 }
 .dialogHeader .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-top: 5px;
 }
 
@@ -40,7 +40,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-card-active);
     cursor: pointer;
 }
 .closeButton img {
@@ -55,7 +55,7 @@
     overflow-y: auto;
     max-height: 800px;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 .source {
@@ -66,7 +66,7 @@
     cursor: pointer;
 }
 .source .name {
-    color: #CDCDCD;
+    color: var(--gj-text-secondary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;
@@ -83,7 +83,7 @@
     overflow: hidden;
     font-size: 12px;
     text-overflow: ellipsis;
-    color: #8C8C8C
+    color: var(--gj-text-tertiary)
 }
 .source.hasSubs .meta {
     display: hidden;
@@ -106,13 +106,13 @@
 
 .source.enabled {
     border-radius: 4px;
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--gj-bg-hover);
 }
 .source.enabled img {
     display: block;
 }
 .source.enabled .name {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-weight: 600;
 }
 
@@ -121,4 +121,12 @@
     margin-left: 30px;
     font-weight: bold;
     margin-top: 20px;
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySyncNewDeviceDialog/index.tsx b/Grayjay.Desktop.Web/src/overlays/OverlaySyncNewDeviceDialog/index.tsx
index b4d89568..6cc2daa7 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySyncNewDeviceDialog/index.tsx
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySyncNewDeviceDialog/index.tsx
@@ -83,7 +83,7 @@ const OverlaySyncNewDeviceDialog: Component<OverlaySyncNewDeviceDialogProps> = (
         <Button text={"Link device"}
           onClick={linkDevice}
           style={{"margin-left": "10px", cursor: ("pointer")}} 
-          color={isDeviceInfoValid$()?.valid === true ? "linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)" : undefined} focusableOpts={{
+          color={isDeviceInfoValid$()?.valid === true ? "var(--gj-accent-grad)" : undefined} focusableOpts={{
             onPress: linkDevice,
             onBack: globalBack
           }} />
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlaySyncStatusDialog/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlaySyncStatusDialog/index.module.css
index f2c7fdeb..581dc7e1 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlaySyncStatusDialog/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlaySyncStatusDialog/index.module.css
@@ -9,9 +9,9 @@
     text-align: center;
     
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.167px 3.148px 0px rgba(0, 0, 0, 0.07), 0px 5.133px 6.519px 0px rgba(0, 0, 0, 0.12), 0px 12.6px 13px 0px rgba(0, 0, 0, 0.16), 0px 24.267px 25.481px 0px rgba(0, 0, 0, 0.19), 0px 40.833px 46.852px 0px rgba(0, 0, 0, 0.24), 0px 63px 80px 0px rgba(0, 0, 0, 0.31);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-popover);
+    box-shadow: var(--gj-shadow);
 }
 
 .buttons {
@@ -28,13 +28,13 @@
     border-radius: 6px;
 }
 .button.none {
-    color: #019BE7;
+    color: var(--gj-accent);
 }
 .button.primary {
-    background: #019BE7;
+    background: var(--gj-accent);
 }
 .button.accent {
-    background: #F97066;
+    background: var(--gj-danger-accent);
 }
 
 .input {
@@ -46,9 +46,9 @@
     margin-top: 20px;
     margin-bottom: 30px;
     padding: 10px;
-    background-color: #1A1A1A;
+    background-color: var(--gj-bg-code);
     border-radius: 6px;
-    border: 1px solid #444;
+    border: 1px solid var(--gj-border-strong);
     font-family: monospace;
     white-space: pre-wrap;
 }
@@ -65,7 +65,7 @@
     top: 20px;
     height: 100px;
     width: 100px;
-    background-color: #1B1B1B;
+    background-color: var(--gj-bg-panel);
     border-radius: 20px;
     display: grid;
     align-items: center;
@@ -82,7 +82,7 @@
     width: 100%;
 }
 .header .descriptor .title{
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 28px;
@@ -93,7 +93,7 @@
     text-align: left;
 }
 .header .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: "Inter";
     font-family: Inter;
     font-size: 16px;
@@ -105,7 +105,7 @@
     margin-top: 10px;
 }
 .header .descriptor .meta {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -128,7 +128,7 @@
     flex: 1;
     flex-basis: 1000px;
     border-radius: 8px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
     padding: 16px 18px;
     align-items: center;
     gap: 8px;
@@ -144,7 +144,7 @@
 }
 .linkContainer .linkTitle {
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -159,7 +159,7 @@
 }
 .linkContainer .linkUrl {
     overflow: hidden;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -179,7 +179,7 @@
 
 }
 .permissionContainer .headerTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -191,7 +191,7 @@
     line-height: 24px; /* 109.091% */
 }
 .permissionContainer .headerDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
 
@@ -222,7 +222,7 @@
     width: calc(100% - 50px)
 }
 .permission .permissionTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
 
@@ -234,7 +234,7 @@
     line-height: 24px; /* 150% */
 }
 .permission .permissionDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
     
@@ -253,7 +253,7 @@
 .tag {
     display: inline-block;
     margin-right: 4px;
-    color: #019BE7;
+    color: var(--gj-accent);
 
     leading-trim: both;
 
@@ -264,7 +264,7 @@
     font-weight: 300;
     line-height: 26px; /* 185.714% */
     border-radius: 4px;
-    background: #1B1B1B;
+    background: var(--gj-bg-panel);
     padding-left: 12px;
     padding-right: 12px;
     padding-top: 4px;
@@ -284,7 +284,7 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    background: #019BE7;
+    background: var(--gj-accent);
     margin-left: auto;
     cursor: pointer;
 }
@@ -318,14 +318,14 @@
     margin-top: 15px;
 }
 .importItem .text .name {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 18px;
     font-style: normal;
     font-weight: 500;
     line-height: 24px
 }
 .importItem .text .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -343,7 +343,7 @@
 
 
 .dialogTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-size: 32px;
     font-style: normal;
     font-weight: 600;
@@ -351,7 +351,7 @@
     text-align: left;
 }
 .dialogSubtitle {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-size: 14px;
     font-style: normal;
     font-weight: 300;
@@ -363,7 +363,7 @@
 }
 
 .importTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     text-align: center;
     leading-trim: both;
 
@@ -414,7 +414,7 @@
 .exception {
     color: red;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -424,7 +424,7 @@
 .warning {
     color: orange;
     font-size: 14px;
-    background-color: rgba(0, 0, 0, .4);
+    background-color: var(--gj-danger-soft-bg);
     border-radius: 5px;
     padding-top: 4px;
     padding-bottom: 4px;
@@ -439,7 +439,7 @@
 .channel {
     position: relative;
     height: 45px;
-    background-color: #111;
+    background-color: var(--gj-bg-popover);
     border-radius: 10px;
     margin-bottom: 5px;
 }
@@ -469,4 +469,12 @@
     top: 0px;
     height: 100%;
     transform: scale(0.75);
-}
\ No newline at end of file
+}
+
+/* broad-light-theme-icon-pass */
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .iconClose,
+:global(:root[data-theme="light"]) .button img,
+:global(:root[data-theme="light"]) .status img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/overlays/OverlayToasts/index.module.css b/Grayjay.Desktop.Web/src/overlays/OverlayToasts/index.module.css
index 884c0c8f..ad7f5d28 100644
--- a/Grayjay.Desktop.Web/src/overlays/OverlayToasts/index.module.css
+++ b/Grayjay.Desktop.Web/src/overlays/OverlayToasts/index.module.css
@@ -1,11 +1,10 @@
-
 .root {
     position: fixed;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
-    background-color: rgba(0,0,0, .5);
+    background-color: var(--gj-bg-backdrop);
     display: grid;
     align-items: center;
     justify-content: center;
@@ -13,18 +12,21 @@
     pointer-events: none;
 }
 
-
 .toast {
-    padding: 10px;
+    padding: 10px 14px;
     margin-right: 25px;
-    background-color: #111;
-    border: 1.5px solid #333;
     margin-top: 15px;
     margin-bottom: 15px;
-    border-radius: 5px;
-    box-shadow: 1px 1px 5px black;
-    display:table;
     margin-left: auto;
+    max-width: min(900px, calc(100vw - 80px));
+    background-color: var(--gj-bg-panel);
+    border: 1px solid var(--gj-border);
+    border-radius: 8px;
+    box-shadow: var(--gj-shadow);
+    color: var(--gj-text-primary);
+    display: table;
+    text-align: left;
+    pointer-events: none;
 }
 .toast.showing {
     animation: fadeIn 0.5s ease-in;
@@ -35,12 +37,16 @@
     opacity: 0;
 }
 .toastText {
-    font-size: 22px;
-    font-weight: lighter;
+    color: var(--gj-text-secondary);
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.35;
 }
 .toastTitle {
-    font-weight: 400;
-    font-size: 26px;
+    color: var(--gj-text-primary);
+    font-weight: 500;
+    font-size: 18px;
+    line-height: 1.35;
 }
 
 @keyframes fadeIn {
@@ -58,4 +64,4 @@
     to {
         opacity: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/Grayjay.Desktop.Web/src/pages/BuyPage/index.module.css b/Grayjay.Desktop.Web/src/pages/BuyPage/index.module.css
index 3bef96c4..c6d11fa7 100644
--- a/Grayjay.Desktop.Web/src/pages/BuyPage/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/BuyPage/index.module.css
@@ -14,7 +14,7 @@
     width: 100%;
     margin-left: 4px;
     margin-bottom: 8px;
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Sen;
     font-size: 20px;
     font-style: normal;
diff --git a/Grayjay.Desktop.Web/src/pages/BuyPage/index.tsx b/Grayjay.Desktop.Web/src/pages/BuyPage/index.tsx
index 8cae815f..6f05c8f4 100644
--- a/Grayjay.Desktop.Web/src/pages/BuyPage/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/BuyPage/index.tsx
@@ -88,10 +88,10 @@ const BuyPage: Component = () => {
       <p class={styles.descriptionShared}>
         License keys are shared between Android and Desktop.
       </p>
-      <Button text='Enter License' color='#019BE7' onClick={()=>enterLicense()} style={{margin: '10px'}} focusableOpts={{
+      <Button text='Enter License' color='var(--gj-accent)' onClick={()=>enterLicense()} style={{margin: '10px'}} focusableOpts={{
         onPress: () => enterLicense()
       }} />
-      <Button text='Buy a License' color="#019BE7" onClick={()=>buy()} style={{margin: '10px'}} focusableOpts={{
+      <Button text='Buy a License' color="var(--gj-accent)" onClick={()=>buy()} style={{margin: '10px'}} focusableOpts={{
         onPress: () => buy()
       }} />
     </div>
diff --git a/Grayjay.Desktop.Web/src/pages/Channel/index.module.css b/Grayjay.Desktop.Web/src/pages/Channel/index.module.css
index 4d780b20..dc1a2adf 100644
--- a/Grayjay.Desktop.Web/src/pages/Channel/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/Channel/index.module.css
@@ -2,7 +2,8 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    
+    background: var(--gj-bg-root);
+    color: var(--gj-text-primary);
 }
 
 .containerTopBar {
@@ -46,7 +47,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: linear-gradient(to bottom, #141414DB, #141414 100%);
+    background-image: linear-gradient(to bottom, rgba(20, 20, 20, 0.86), var(--gj-bg-root) 100%);
 }
 
 .containerActions {
@@ -79,7 +80,7 @@
 }
 
 .creatorName {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 28px;
     font-style: normal;
@@ -89,7 +90,7 @@
 }
 
 .creatorMetadata {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -99,7 +100,7 @@
 }
 
 .creatorDescription {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 14px;
     font-style: normal;
@@ -130,22 +131,25 @@
 
 
 .aboutTab {
-    width: 600px; 
-    padding: 20px; 
-    margin-top: 30px; 
-    margin-left: auto; 
-    margin-right: auto; 
-    background-color: #111; 
-    border-radius: 5px;
+    width: 600px;
+    padding: 20px;
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    background-color: var(--gj-bg-card);
+    border: 1px solid var(--gj-border);
+    border-radius: 8px;
+    color: var(--gj-text-primary);
 }
 
 .aboutLogo {
-    border-radius: 100px; 
-    position: absolute; 
-    top: 10px; 
-    left: 10px; 
-    width: 100px; 
+    border-radius: 100px;
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    width: 100px;
     height: 100px;
+    border: 1px solid var(--gj-border);
 }
 
 .aboutTextContainer {
@@ -154,12 +158,13 @@
 }
 
 .aboutTitle {
+    color: var(--gj-text-primary);
     padding-top: 35px;
     font-size: 25px; 
     font-weight: bold;
 }
 .aboutMeta {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: Inter; 
     font-size: 15px; 
     font-style: normal; 
@@ -168,9 +173,20 @@
 
 
 .aboutDescription {
+    color: var(--gj-text-secondary);
+    white-space: pre-wrap;
     margin-left: 10px; 
     margin-right: 10px; 
     margin-bottom: 10px; 
     font-family: 'Inter'; 
     font-size: 16px;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .containerTopBarGradient {
+    background-image: linear-gradient(to bottom, rgba(245, 245, 243, 0.86), var(--gj-bg-root) 100%);
+}
+
+:global(:root[data-theme="light"]) .containerTopBarControls img[src$="sidebar-open.svg"],
+:global(:root[data-theme="light"]) .containerTopBarControls img[src$="sidebar-close.svg"] {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/pages/Channel/index.tsx b/Grayjay.Desktop.Web/src/pages/Channel/index.tsx
index aa1783f4..7c782ae4 100644
--- a/Grayjay.Desktop.Web/src/pages/Channel/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Channel/index.tsx
@@ -331,10 +331,10 @@ const ChannelPage: Component = () => {
                       
                 <Show when={error$()}>
                   <div style="text-align: center;">
-                    <div style="color: #555">
+                    <div style="color: var(--gj-text-tertiary)">
                       Failed to load channel
                     </div>
-                    <div style="color: #AA0000">
+                    <div style="color: var(--gj-danger)">
                       {error$()?.message ?? error$()}
                     </div>
                   </div>
diff --git a/Grayjay.Desktop.Web/src/pages/Creators/index.tsx b/Grayjay.Desktop.Web/src/pages/Creators/index.tsx
index 85d41138..f4b6cbb7 100644
--- a/Grayjay.Desktop.Web/src/pages/Creators/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Creators/index.tsx
@@ -141,7 +141,7 @@ const CreatorsPage: Component = () => {
               showClearButton={true}
               inputContainerStyle={{
                 "height": "48px", 
-                "background": "#141414"
+                "background": "var(--gj-bg-input)"
               }}
               onTextChanged={(v) => {
                 setFilterText(v);
@@ -207,7 +207,7 @@ const CreatorsPage: Component = () => {
               {
                 icon: iconSearch,
                 title: "Search Creators",
-                color: "#019BE7",
+                color: "var(--gj-accent)",
                 action: ()=>{navigate("/web/search?type=" + ContentType.CHANNEL)}
               }
             ]} />
diff --git a/Grayjay.Desktop.Web/src/pages/Downloads/index.module.css b/Grayjay.Desktop.Web/src/pages/Downloads/index.module.css
index e4ba36cf..6eaa79a2 100644
--- a/Grayjay.Desktop.Web/src/pages/Downloads/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/Downloads/index.module.css
@@ -26,8 +26,8 @@
 
 .storageContainer {
     border-radius: var(--Corner-radius-80, 8px);
-    border: 1px solid #262626;
-    background: #1B1B1B;
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
     margin: 24px;
     padding-left: 24px;
     padding-right: 24px;
@@ -44,7 +44,7 @@
 }
 .storageContainer .sizeCurrent {
     display: inline-block;
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     leading-trim: both;
     
@@ -58,7 +58,7 @@
 }
 .storageContainer .sizeTotal {
     display: inline-block;
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     font-family: Inter;
     font-size: 18px;
@@ -68,7 +68,7 @@
 }
 .storageContainer .sizeInter {
     display: inline-block;
-    color: #A6A6A6;
+    color: var(--gj-text-tertiary);
     font-family: Inter;
     font-size: 18px;
     font-style: normal;
@@ -85,14 +85,14 @@
 
 .storageContainer .storageIndicator {
     border-radius: 99px;
-    background: rgba(255, 255, 255, 0.06);
+    background: var(--gj-bg-card-active);
     height: 4px;
     width: 100%;
     margin-top: 16px;
 }
 .storageContainer .storageIndicator .bar {
     border-radius: 99px;
-    background: linear-gradient(90deg, #01D6E6 0%, #0182E7 98.73%);
+    background: var(--gj-accent-grad);
     height: 100%;    
 }
 
@@ -104,7 +104,7 @@
     text-overflow: ellipsis;
     margin-top: 19px;
     vertical-align: top;
-    color: #9c9c9c;
+    color: var(--gj-text-tertiary);
 
     font-family: Inter;
     font-size: 14px;
@@ -118,7 +118,7 @@
 .storageContainer .storagePath .tooltip {
     display: none;
     position: absolute;
-    background-color: #333;
+    background-color: var(--gj-bg-card-active);
     padding: 5px;
     margin-top: 5px;
     margin-left: -100px;
@@ -151,7 +151,7 @@
     margin-left: 5px;
     vertical-align: top;
 
-    color: rgba(255, 255, 255, 0.60);
+    color: var(--gj-text-tertiary);
 
     leading-trim: both;
 
@@ -208,9 +208,9 @@
     margin: 4px;
     padding: 10px 20px;
     border-radius: 6px;
-    background: #141414;
-    border: 1px solid #2E2E2E;
-    color: white;
+    background: var(--gj-bg-button-secondary);
+    border: 1px solid var(--gj-border);
+    color: var(--gj-text-primary);
 
     text-align: center;
     leading-trim: both;
@@ -225,13 +225,19 @@
 }
 
 .deleteButton {    
-    color: #F97066;
+    color: var(--gj-danger-accent);
     cursor: pointer;
 }
 
 .exportButton {
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
 
-    color: #D9D9D9;
+    color: var(--gj-text-primary);
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .storageContainer .sizeImage,
+:global(:root[data-theme="light"]) .storageContainer .itemImage,
+:global(:root[data-theme="light"]) .storageContainer .storagePath img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/pages/Downloads/index.tsx b/Grayjay.Desktop.Web/src/pages/Downloads/index.tsx
index c9aa0df3..78b7f868 100644
--- a/Grayjay.Desktop.Web/src/pages/Downloads/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Downloads/index.tsx
@@ -453,7 +453,7 @@ const DownloadsPage: Component = () => {
             ((row.audioSources?.length ?? 0) > 0) ? (toHumanBitrate(row.audioSources[0].bitrate)) : null
           ].filter(x=>x).join(" • "),
         style: {
-          color: "#8C8C8C"
+          color: "var(--gj-text-tertiary)"
         },
         onClick(video: IVideoLocal){ openVideo(video); }
       },
@@ -461,7 +461,7 @@ const DownloadsPage: Component = () => {
         name: "Size",
         resolve: (row: any)=> toHumanBytesSize(calcSize(row)),
         style: {
-          color: "#8C8C8C"
+          color: "var(--gj-text-tertiary)"
         },
         onClick(video: IVideoLocal){ openVideo(video); }
       },
@@ -473,7 +473,7 @@ const DownloadsPage: Component = () => {
               <button class={styles.selectedButton} onClick={()=>{exportDownload(row.id)}}>
                 Export
               </button>
-              <button class={styles.selectedButton} onClick={()=>{deleteDownload(row.id)}} style="color: #F97066; margin-right: 20px;">
+              <button class={styles.selectedButton} onClick={()=>{deleteDownload(row.id)}} style="color: var(--gj-danger-accent); margin-right: 20px;">
                 Delete
               </button>
             </div>
@@ -510,7 +510,7 @@ const DownloadsPage: Component = () => {
                       name: "Resolution",
                       resolve: (row:any)=> row.targetPixelCount,
                       style: {
-                        color: "#8C8C8C"
+                        color: "var(--gj-text-tertiary)"
                       },
                       onClick(video: IVideoLocal){ openVideo(video); }
                     },
@@ -522,7 +522,7 @@ const DownloadsPage: Component = () => {
                             <button class={styles.selectedButton} onClick={()=>{exportDownloads(row?.playlist?.videos?.map(x=>x.id) ?? [])}}>
                               Export
                             </button>
-                            <button class={styles.selectedButton} onClick={()=>{deleteDownloadPlaylist(row?.playlist?.id)}} style="color: #F97066; margin-right: 20px;">
+                            <button class={styles.selectedButton} onClick={()=>{deleteDownloadPlaylist(row?.playlist?.id)}} style="color: var(--gj-danger-accent); margin-right: 20px;">
                               Delete
                             </button>
                           </div>
@@ -555,7 +555,7 @@ const DownloadsPage: Component = () => {
   const video = useVideo();
   let scrollContainerRef: HTMLDivElement | undefined;
   return (
-    <LoaderContainer isLoading={isLoading$()} loadingText={"Loading Downloads"} loadingSubText={params.url} background='#141414'>
+    <LoaderContainer isLoading={isLoading$()} loadingText={"Loading Downloads"} loadingSubText={params.url} background='var(--gj-bg-root)'>
       <ScrollContainer ref={scrollContainerRef}>
         <Show when={storageInfo$()}>
         <div class={styles.storageContainer}>
@@ -643,7 +643,7 @@ const DownloadsPage: Component = () => {
                     <button class={styles.selectedButton} onClick={doExport} use:focusable={{ onPress: doExport }}>
                       Export
                     </button>
-                    <button class={styles.selectedButton} onClick={doDelete} style="color: #F97066; margin-right: 5px;" use:focusable={{ onPress: doDelete }}>
+                    <button class={styles.selectedButton} onClick={doDelete} style="color: var(--gj-danger-accent); margin-right: 5px;" use:focusable={{ onPress: doDelete }}>
                       Delete
                     </button>
                   </div>
@@ -671,7 +671,7 @@ const DownloadsPage: Component = () => {
               {
                 icon: searchIcon,
                 title: "Search Videos",
-                color: "#019BE7",
+                color: "var(--gj-accent)",
                 action: ()=>{navigate("/web/search?type=" + ContentType.MEDIA)}
               }
             ]} />
diff --git a/Grayjay.Desktop.Web/src/pages/History/index.module.css b/Grayjay.Desktop.Web/src/pages/History/index.module.css
index 1f242901..7d46f985 100644
--- a/Grayjay.Desktop.Web/src/pages/History/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/History/index.module.css
@@ -5,7 +5,7 @@
 }
 
 .title {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     
@@ -24,7 +24,7 @@
     display: -webkit-box;
     -webkit-line-clamp: 2;  /* Number of lines you want to display before truncating */
     -webkit-box-orient: vertical;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -35,7 +35,7 @@
 }
 
 .authorTitle {
-    color: #a3a3a3;
+    color: var(--gj-text-secondary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -47,7 +47,7 @@
 }
 
 .authorMetadata {
-    color: #6a6a6a;
+    color: var(--gj-text-tertiary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -63,7 +63,7 @@
     display: flex; 
     flex-direction: row; 
     height: 100%; 
-    border-top: 1px solid #2e2e2e; 
+    border-top: 1px solid var(--gj-border); 
     align-items: center; 
     padding-top: 16px; 
     padding-bottom: 16px; 
@@ -74,6 +74,6 @@
 }
 
 .itemContainer:focus-visible {
-    background-color:#2e2e2e;
+    background-color: var(--gj-bg-hover);
     outline: unset;
 }
\ No newline at end of file
diff --git a/Grayjay.Desktop.Web/src/pages/History/index.tsx b/Grayjay.Desktop.Web/src/pages/History/index.tsx
index b909b567..4edc726a 100644
--- a/Grayjay.Desktop.Web/src/pages/History/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/History/index.tsx
@@ -191,7 +191,7 @@ const HistoryPage: Component = () => {
               style={{
                 "width": "300px",
               }} inputContainerStyle={{
-                "background-color": "#212121"
+                "background-color": "var(--gj-bg-input)"
               }}
               onTextChanged={(newVal) => setQuery(newVal)}
               icon={ic_search}
@@ -210,7 +210,7 @@ const HistoryPage: Component = () => {
                 style={{
                   "margin-left": "16px",
                   "margin-right": "32px",
-                  "border": "1px solid #f621215c",
+                  "border": "1px solid var(--gj-danger-accent)",
                 }}
                 onClick={(e) => {
                   contentAnchor.setElement(e.target as HTMLElement);
@@ -318,7 +318,7 @@ const HistoryPage: Component = () => {
                         "bottom": "0px",
                         "left": "0px",
                         "right": "0px",
-                        "background-color": "#019BE7",
+                        "background-color": "var(--gj-accent)",
                         "height": "3px",
                         "width": historyVideo() ? `${(getVideoProgressPercentage(historyVideo()?.position, historyVideo()?.video?.duration))}%` : undefined
                       }} />
diff --git a/Grayjay.Desktop.Web/src/pages/Playlist/index.module.css b/Grayjay.Desktop.Web/src/pages/Playlist/index.module.css
index 5e13946b..df91d4f5 100644
--- a/Grayjay.Desktop.Web/src/pages/Playlist/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/Playlist/index.module.css
@@ -6,7 +6,7 @@
 }
 
 .header {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -17,7 +17,7 @@
 }
 
 .metadata {
-    color: rgba(255, 255, 255, 0.60);
+    color: var(--gj-text-muted);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -31,7 +31,7 @@
     display: flex;
     flex-direction: row;
     font-size: 16px;
-    color: #808080;
+    color: var(--gj-text-tertiary);
     align-items: center;
 }
 
@@ -69,7 +69,7 @@
     -webkit-line-clamp: 2;
     flex: 1 0 0;
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     text-overflow: ellipsis;
diff --git a/Grayjay.Desktop.Web/src/pages/Playlists/index.module.css b/Grayjay.Desktop.Web/src/pages/Playlists/index.module.css
index 9b487437..f55ee4cb 100644
--- a/Grayjay.Desktop.Web/src/pages/Playlists/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/Playlists/index.module.css
@@ -6,7 +6,7 @@
 }
 
 .textHeader {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -39,6 +39,7 @@
 }
 
 .containerSeeAll {
+    background: var(--gj-bg-button-secondary);
     display: flex; 
     flex-direction: row;
     align-items: center;
@@ -49,7 +50,7 @@
     padding-bottom: 16px;
     cursor: pointer;
 
-    color: #FFF;
+    color: var(--gj-text-primary);
     text-align: center;
     leading-trim: both;
     text-edge: cap;
@@ -61,7 +62,7 @@
     line-height: 140%; /* 19.6px */
 
     border-radius: 6px;
-    border: 1px solid #2E2E2E;
+    border: 1px solid var(--gj-border);
 }
 
 .containerPlaylists {
@@ -95,7 +96,7 @@
     -webkit-overflow-scrolling: touch;
 
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-border-strong) var(--gj-bg-panel);
 }
 
 .watchLaterItem {
diff --git a/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx b/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx
index 88c8cd06..bd360f9e 100644
--- a/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Playlists/index.tsx
@@ -289,7 +289,7 @@ const PlaylistsPage: Component = () => {
                 showClearButton={true}
                 inputContainerStyle={{
                   "height": "48px",  
-                  "background": "#141414"
+                  "background": "var(--gj-bg-input)"
                 }}
                 onTextChanged={(v) => {
                   setFilterText(v);
@@ -298,7 +298,7 @@ const PlaylistsPage: Component = () => {
               <Dropdown label="Sort by" onSelectedChanged={(v) => setSortBy(v)} value={sortBy()} options={sortOptions} anchorStyle={AnchorStyle.BottomLeft} style={{"width": "280px"}} />
               <ButtonFlex text='New playlist'
                 icon={icon_add}
-                color='#019BE7'
+                color='var(--gj-accent)'
                 small={true}
                 style={{
                   width: '170px',
@@ -384,7 +384,7 @@ const PlaylistsPage: Component = () => {
                     {
                       icon: icon_add,
                       title: "Create Playlist",
-                      color: "#019BE7",
+                      color: "var(--gj-accent)",
                       action: ()=>{createPlaylist()}
                     }
                   ]} />
diff --git a/Grayjay.Desktop.Web/src/pages/RemotePlaylist/index.module.css b/Grayjay.Desktop.Web/src/pages/RemotePlaylist/index.module.css
index 5e13946b..df91d4f5 100644
--- a/Grayjay.Desktop.Web/src/pages/RemotePlaylist/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/RemotePlaylist/index.module.css
@@ -6,7 +6,7 @@
 }
 
 .header {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -17,7 +17,7 @@
 }
 
 .metadata {
-    color: rgba(255, 255, 255, 0.60);
+    color: var(--gj-text-muted);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -31,7 +31,7 @@
     display: flex;
     flex-direction: row;
     font-size: 16px;
-    color: #808080;
+    color: var(--gj-text-tertiary);
     align-items: center;
 }
 
@@ -69,7 +69,7 @@
     -webkit-line-clamp: 2;
     flex: 1 0 0;
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     text-overflow: ellipsis;
diff --git a/Grayjay.Desktop.Web/src/pages/Search/index.module.css b/Grayjay.Desktop.Web/src/pages/Search/index.module.css
index eec9cd2f..657f4cfe 100644
--- a/Grayjay.Desktop.Web/src/pages/Search/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/Search/index.module.css
@@ -30,7 +30,7 @@
     position: fixed;
     top: 0px;
     left: 0px;
-    background: rgba(15, 15, 15, 0.8);
+    background: var(--gj-bg-backdrop);
 
     display: flex;
     align-items: center;
@@ -44,9 +44,9 @@
     flex-direction: column;
     align-items: flex-start;
     border-radius: 12px;
-    border: 1px solid #454545;
-    background: #141414;
-    box-shadow: 0px 100px 80px 0px rgba(0, 0, 0, 0.12), 0px 64.815px 46.852px 0px rgba(0, 0, 0, 0.09), 0px 38.519px 25.481px 0px rgba(0, 0, 0, 0.07), 0px 20px 13px 0px rgba(0, 0, 0, 0.06), 0px 8.148px 6.519px 0px rgba(0, 0, 0, 0.05), 0px 1.852px 3.148px 0px rgba(0, 0, 0, 0.03);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
+    box-shadow: var(--gj-shadow);
     min-width: 400px;
     width: 60%;
     box-sizing: border-box;
@@ -54,7 +54,7 @@
 }
 
 .filtersDialogTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -65,7 +65,7 @@
 }
 
 .filterHeader {
-    color: #D9D9D9;
+    color: var(--gj-text-secondary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -75,4 +75,8 @@
     line-height: normal;
     margin-top: 32px;
     margin-bottom: 16px;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .filtersDialog img[src$="icon24_close.svg"] {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/pages/Search/index.tsx b/Grayjay.Desktop.Web/src/pages/Search/index.tsx
index 6dd028d4..866e8cf8 100644
--- a/Grayjay.Desktop.Web/src/pages/Search/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Search/index.tsx
@@ -175,7 +175,7 @@ const SearchPage: Component = () => {
               performSearch(v, sortBy$(), filterValues$(), enabledSources$());
             }} focusable={true} />
             <Show when={searchType$() === ContentType.MEDIA}>
-              <CustomButton text='Filters' icon={iconFilters} border='1px solid #2E2E2E' style={{"height": "44px" }} onClick={() => setFiltersDialogVisible(true)} focusableOpts={{
+              <CustomButton text='Filters' icon={iconFilters} iconStyle={{"filter": "var(--gj-theme-icon-filter)"}} border='1px solid var(--gj-border)' style={{"height": "44px", "background": "var(--gj-bg-button-secondary)", "color": "var(--gj-text-primary)" }} onClick={() => setFiltersDialogVisible(true)} focusableOpts={{
                 onPress: () => setFiltersDialogVisible(true)
               }} />
             </Show>
diff --git a/Grayjay.Desktop.Web/src/pages/Settings/index.module.css b/Grayjay.Desktop.Web/src/pages/Settings/index.module.css
index 320307ee..c18f4591 100644
--- a/Grayjay.Desktop.Web/src/pages/Settings/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/Settings/index.module.css
@@ -15,7 +15,7 @@
     flex-direction: column;
 }
 .settingsMenuItem {
-    color: rgba(255, 255, 255, 0.60);
+    color: var(--gj-text-muted);
     height: 46px;
     border-radius: 6px;
     font-family: Inter;
@@ -41,24 +41,24 @@
 }
 
 .advanced:focus-visible {
-    background: #454545;
+    background: var(--gj-border-strong);
     border-radius: 6px;
     outline: unset;
 }
 
 .settingsMenuItem:hover {
     cursor: pointer;
-    background: rgba(255, 255, 255, 0.055);
+    background: var(--gj-bg-hover);
 }
 
 .settingsMenuItem:focus-visible {
-    background: rgba(255, 255, 255, 0.055);
+    background: var(--gj-bg-hover);
     outline: unset;
 }
 
 .settingsMenuItem.active {
-    color: #FFF;
-    background: rgba(255, 255, 255, 0.105);
+    color: var(--gj-text-primary);
+    background: var(--gj-bg-selected);
     padding-left: 16px;
     height: 46px;
     font-family: Inter;
diff --git a/Grayjay.Desktop.Web/src/pages/Settings/index.tsx b/Grayjay.Desktop.Web/src/pages/Settings/index.tsx
index b1c0b9cf..51db70bc 100644
--- a/Grayjay.Desktop.Web/src/pages/Settings/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Settings/index.tsx
@@ -122,7 +122,7 @@ const SettingsPage: Component<SettingsPageProps> = (props) => {
                     onPress: () => { setAdvanced(!showAdvanced$()) },
                     onBack: globalBack
                   }} class={styles.advanced}>
-                    <div style="font-size: 16px; color: #999;">
+                    <div style="font-size: 16px; color: var(--gj-text-tertiary);">
                       Advanced
                     </div>
                     <div style="flex-grow: 1"></div>
diff --git a/Grayjay.Desktop.Web/src/pages/Sources/index.module.css b/Grayjay.Desktop.Web/src/pages/Sources/index.module.css
index 37987614..80ae18d5 100644
--- a/Grayjay.Desktop.Web/src/pages/Sources/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/Sources/index.module.css
@@ -1,7 +1,6 @@
 
-
 .pageTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -39,19 +38,21 @@
     position: relative;
     width: calc(100% - 40px);
     height: 80px;
-    background-color: #111;
+    background-color: var(--gj-bg-card);
     overflow: hidden;
     margin-left: 24px;
     border-radius: 8px;
-    border-bottom: 1px solid #1B1B1B;
+    border: 1px solid var(--gj-border);
 }
 
-.source:focus-visible {
-    background-color: #454545;
+.source:focus-visible,
+.source:hover {
+    background-color: var(--gj-bg-card-hover);
+    outline: unset;
 }
 
 .source.enabled {
-    background-color: #222;
+    background-color: var(--gj-bg-card-active);
 }
 
 .source .thumb {
@@ -70,7 +71,7 @@
     font-family: "Inter";
     line-height: 24px;
     overflow: hidden;
-    color: white;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     text-overflow: ellipsis;
@@ -103,8 +104,8 @@
     width: 80px;
     height: 30px;
     text-align:center;
-    background-color: #444;
-    color: white;
+    background-color: var(--gj-bg-panel-strong);
+    color: var(--gj-text-primary);
     border: 0px;
     border-radius: 20px;
 }
@@ -122,4 +123,4 @@
     margin-right: 15px;
     vertical-align: top;
     margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/Grayjay.Desktop.Web/src/pages/Sources/index.tsx b/Grayjay.Desktop.Web/src/pages/Sources/index.tsx
index 11d6f3c1..80fb7e3b 100644
--- a/Grayjay.Desktop.Web/src/pages/Sources/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Sources/index.tsx
@@ -225,7 +225,7 @@ const SourcesPage: Component = () => {
               >
                 <Button
                   text="Install Source"
-                  color="#019BE7"
+                  color="var(--gj-accent)"
                   style={{
                     width: "100%",
                     height: "56px",
@@ -246,7 +246,7 @@ const SourcesPage: Component = () => {
 
                 <Button
                   text="Install Official Sources"
-                  color="#019BE7"
+                  color="var(--gj-accent)"
                   style={{
                     width: "100%",
                     height: "56px",
diff --git a/Grayjay.Desktop.Web/src/pages/Subscriptions/index.module.css b/Grayjay.Desktop.Web/src/pages/Subscriptions/index.module.css
index c404825a..9587f9ad 100644
--- a/Grayjay.Desktop.Web/src/pages/Subscriptions/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/Subscriptions/index.module.css
@@ -33,7 +33,7 @@
     overflow-y: none;
     white-space: nowrap;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 .channel {
@@ -46,20 +46,20 @@
     vertical-align: top;    
     padding: 12px 8px;
     border-radius: 8px;
-    background: #1B1B1B;
+    background: var(--gj-bg-card);
     text-align: center;
-    border: 1px solid transparent;
+    border: 1px solid var(--gj-border);
 }
 .channel:focus {
-    background: #303030;
+    background: var(--gj-bg-card-hover);
 }
 
 .channel.active {
-    border: 1px solid #4D4D4D;
-    background: #1B1B1B;
+    border: 1px solid var(--gj-border-strong);
+    background: var(--gj-bg-card);
 }
 .channel.active .channelText {
-    color: white;
+    color: var(--gj-text-primary);
 }
 .channelImg {
     width: 60px;
@@ -69,7 +69,7 @@
     margin-top: 3px;
 }
 .channelText {
-    color: #989898;
+    color: var(--gj-text-tertiary);
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
@@ -96,7 +96,7 @@
     right: 20px;
     height: 20px;
     width: 20px;
-    background-color: white;
+    background-color: var(--gj-bg-panel);
     border-radius: 20px;
     
 }
@@ -105,6 +105,13 @@
     max-height: 15px;
 }
 
+.subProgress {
+    height: 2px;
+    position: absolute;
+    bottom: 1px;
+    background: var(--gj-accent-grad);
+}
+
 .content {
     flex-grow: 1;
     position: relative;
@@ -122,16 +129,16 @@
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 .subgroup {
     display: inline-block;
     flex-shrink: 0;
     position: relative;
     border-radius: 6px;
-    border: 2px solid rgba(32, 32, 32, 0.13);
+    border: 2px solid var(--gj-border);
 
-    background: #1B1B1B;
+    background: var(--gj-bg-card);
     width: 170px;
     height: 80px;
     overflow: hidden;
@@ -146,7 +153,7 @@
     cursor: pointer;
 }
 .subgroup.active {
-    border: 2px solid #02C6E7;
+    border: 2px solid var(--gj-accent);
 }
 .subgroup .editIcon {
     position: absolute;
@@ -157,7 +164,7 @@
     opacity: 0.5;
 }
 .subgroup:focus {
-    background: #303030;
+    background: var(--gj-bg-card-hover);
 }
 .subgroup .editIcon:hover {
     opacity: 1;
@@ -177,7 +184,7 @@
     bottom: 10px;
     left: 18px;
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -200,7 +207,7 @@
     justify-content: center;
     align-items: center;
     overflow: hidden;
-    color: #FFF;
+    color: var(--gj-text-primary);
     
     leading-trim: both;
     
@@ -225,26 +232,26 @@
     width: 56px;
     padding: 8px 24px;
     border-radius: 6px;
-    border: 1px solid #454545;
+    border: 1px solid var(--gj-border-strong);
     margin-right: 8px;
 
-    background: #1B1B1B;
+    background: var(--gj-bg-card);
 }
 .filter:focus {
-    background: #474747;
+    background: var(--gj-bg-card-hover);
 }
 .filter.active {
-    border: 1px solid #454545;
-    background: #2E2E2E;
+    border: 1px solid var(--gj-border-strong);
+    background: var(--gj-bg-card-active);
 }
 .filter.active:focus {
-    background: #666666;
+    background: var(--gj-bg-card-active);
 }
 .filter:focus .name {
-    color: #b4b4b4;
+    color: var(--gj-text-secondary);
 }
 .filter .name {
-    color: #555555;
+    color: var(--gj-text-tertiary);
     text-align: center;
     leading-trim: both;
 
@@ -257,7 +264,7 @@
     line-height: 140%; /* 19.6px */
 }
 .filter.active .name {
-    color: white !important;
+    color: var(--gj-text-primary) !important;
 }
 
 .subgroupBanner {
@@ -269,9 +276,9 @@
     padding-top: 24px;
     padding-bottom: 24px;
     border-radius: 8px;
-    border: 1px solid rgba(1, 155, 231, 0.00);
+    border: 1px solid transparent;
     
-    background: linear-gradient(0deg, rgba(27, 27, 27, 0.90) 0%, rgba(27, 27, 27, 0.90) 100%), linear-gradient(270deg, #01D6E6 -68.7%, #0182E7 97.07%);
+    background: linear-gradient(0deg, var(--gj-bg-card) 0%, var(--gj-bg-card) 100%), var(--gj-accent-grad);
     
     display: flex;
     flex-direction: row;
@@ -283,7 +290,7 @@
     flex-grow: 1;
 }
 .subgroupBanner .bannerTitle {
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 24px;
     font-style: normal;
@@ -292,7 +299,7 @@
     padding-bottom: 12px;
 }
 .subgroupBanner .bannerDescription {
-    color: rgba(255, 255, 255, 0.6);
+    color: var(--gj-text-muted);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -314,7 +321,7 @@
 }
 .noSubs .title {
     margin-top: 10px;
-    color: #FFF;
+    color: var(--gj-text-primary);
 
     text-align: center;
     font-family: Inter;
@@ -325,7 +332,7 @@
 }
 .noSubs .description {
     margin-top: 10px;
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     text-align: center;
     font-family: Inter;
     font-size: 20px;
@@ -335,4 +342,66 @@
 }
 .noSubs .buttons {
     margin-top: 28px;
-}
\ No newline at end of file
+}
+
+
+
+/* subscription-groups-light-mode-v29 */
+:global(:root[data-theme="light"]) .subgroup {
+    background: var(--gj-bg-panel);
+    border-color: var(--gj-border);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
+}
+
+:global(:root[data-theme="light"]) .subgroup:focus,
+:global(:root[data-theme="light"]) .subgroup:hover {
+    background: var(--gj-bg-card-hover);
+}
+
+:global(:root[data-theme="light"]) .subgroup.active {
+    background: var(--gj-bg-panel);
+    border-color: var(--gj-accent);
+}
+
+:global(:root[data-theme="light"]) .subgroup .image {
+    opacity: 0.42;
+}
+
+:global(:root[data-theme="light"]) .subgroup .name,
+:global(:root[data-theme="light"]) .subgroup .centerText {
+    color: var(--gj-text-primary);
+    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
+}
+
+:global(:root[data-theme="light"]) .subgroup .editIcon {
+    filter: var(--gj-theme-icon-filter);
+    opacity: 0.65;
+}
+
+:global(:root[data-theme="light"]) .filter {
+    background: var(--gj-bg-panel-strong);
+    border-color: var(--gj-border);
+}
+
+:global(:root[data-theme="light"]) .filter:focus,
+:global(:root[data-theme="light"]) .filter:hover {
+    background: var(--gj-bg-card-hover);
+}
+
+:global(:root[data-theme="light"]) .filter.active {
+    background: var(--gj-bg-card-active);
+    border-color: var(--gj-border-strong);
+}
+
+:global(:root[data-theme="light"]) .filter .name {
+    color: var(--gj-text-primary);
+}
+
+:global(:root[data-theme="light"]) .filter:not(.active) .name {
+    color: var(--gj-text-secondary);
+}
+
+:global(:root[data-theme="light"]) .subgroupBanner {
+    background: var(--gj-bg-panel);
+    border-color: var(--gj-border);
+}
diff --git a/Grayjay.Desktop.Web/src/pages/Subscriptions/index.tsx b/Grayjay.Desktop.Web/src/pages/Subscriptions/index.tsx
index 06b2a6e6..3d2ff0a2 100644
--- a/Grayjay.Desktop.Web/src/pages/Subscriptions/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Subscriptions/index.tsx
@@ -339,7 +339,7 @@ const SubscriptionsPage: Component = () => {
                 </div>
                 <div style="flex-grow: 1"></div>
                 <div class={styles.bannerButtons}>
-                  <Button text="Create a subscription group" color="linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)"
+                  <Button text="Create a subscription group" color="var(--gj-accent-grad)"
                     onClick={() => newSubscriptionGroup()} focusableOpts={{ 
                       onPress: () => newSubscriptionGroup(),
                       groupEscapeTo: {
@@ -351,7 +351,7 @@ const SubscriptionsPage: Component = () => {
                       groupType: 'horizontal',
                       groupIndices: [0]
                     }} />
-                  <Button text="Dismiss" color="transparant" focusColor="#FFFFFF22" style={{ border: "1px solid rgba(1, 155, 231, 0)", "margin-left": "16px" }} 
+                  <Button text="Dismiss" color="transparent" focusColor="var(--gj-bg-hover)" textColor="var(--gj-text-primary)" focusTextColor="var(--gj-text-primary)" style={{ border: "1px solid transparent", "margin-left": "16px" }} 
                     onClick={() => dismissSubscriptionGroups()} focusableOpts={{ 
                       onPress: () => dismissSubscriptionGroups(),
                       groupEscapeTo: {
@@ -415,7 +415,7 @@ const SubscriptionsPage: Component = () => {
                     onPress: () => newSubscriptionGroup() 
                   }}
                 >
-                  <div class={styles.image} style={{ background: "#222" }} />
+                  <div class={styles.image} style={{ background: "var(--gj-bg-card-active)" }} />
                   <div class={styles.centerText}>New Group</div>
                 </div>
               </div>
@@ -446,7 +446,7 @@ const SubscriptionsPage: Component = () => {
               </div>
             </Show>
             <Show when={subProgress$() > 0 && subProgress$() < 1}>
-                <div style={{height: "2px", width: (subProgress$() * 100) + "%", position: "absolute", bottom: "1px", background: "linear-gradient(267deg, rgb(1, 214, 230) -100.57%, rgb(1, 130, 231) 90.96%)"}}>
+                <div class={styles.subProgress} style={{width: (subProgress$() * 100) + "%"}}>
                 </div>
               </Show>
           </div>
@@ -477,7 +477,7 @@ const SubscriptionsPage: Component = () => {
               {
                 icon: iconSearch,
                 title: "Search Creators",
-                color: "#019BE7",
+                color: "var(--gj-accent)",
                 action: ()=>{navigate("/web/search?type=" + ContentType.CHANNEL)}
               }
             ]} />
diff --git a/Grayjay.Desktop.Web/src/pages/Sync/index.module.css b/Grayjay.Desktop.Web/src/pages/Sync/index.module.css
index 69d574a3..9344f406 100644
--- a/Grayjay.Desktop.Web/src/pages/Sync/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/Sync/index.module.css
@@ -9,9 +9,9 @@
     padding-right: 20px;
     padding-bottom: 20px;
     border-radius: 12px;
-    border: 1px solid #2E2E2E;
-    background: #141414;
-    box-shadow: 0px 1.648px 3.148px 0px rgba(0, 0, 0, 0.10), 0px 7.252px 6.519px 0px rgba(0, 0, 0, 0.16), 0px 17.8px 13px 0px rgba(0, 0, 0, 0.21), 0px 34.281px 25.481px 0px rgba(0, 0, 0, 0.26), 0px 57.685px 46.852px 0px rgba(0, 0, 0, 0.32), 0px 89px 80px 0px rgba(0, 0, 0, 0.42);
+    border: 1px solid var(--gj-border);
+    background: var(--gj-bg-panel);
+    box-shadow: var(--gj-shadow);
 }
 
 .header {
@@ -31,7 +31,7 @@
 }
 .header .headerSubText {
     font-size: 14px;
-    color: #AAA;
+    color: var(--gj-text-tertiary);
     margin-top: 5px;
 }
 
@@ -45,7 +45,7 @@
     width: 40px;
     height: 40px;
     border-radius: 48px;
-    background: #2E2E2E;
+    background: var(--gj-bg-panel-strong);
     cursor: pointer;
 }
 .closeButton img {
@@ -60,7 +60,7 @@
     overflow-y: auto;
     max-height: 800px;
     scrollbar-width: thin;
-    scrollbar-color: #555 #333;
+    scrollbar-color: var(--gj-scroll-thumb) var(--gj-scroll-track);
 }
 
 .source {
@@ -71,7 +71,7 @@
     cursor: pointer;
 }
 .source .name {
-    color: #CDCDCD;
+    color: var(--gj-text-secondary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;
@@ -88,7 +88,7 @@
     overflow: hidden;
     font-size: 12px;
     text-overflow: ellipsis;
-    color: #8C8C8C
+    color: var(--gj-text-tertiary)
 }
 .source.hasSubs .meta {
     display: hidden;
@@ -111,13 +111,13 @@
 
 .source.enabled {
     border-radius: 4px;
-    background: rgba(255, 255, 255, 0.04);
+    background: var(--gj-bg-hover);
 }
 .source.enabled img {
     display: block;
 }
 .source.enabled .name {
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     font-weight: 600;
 }
 
@@ -135,9 +135,9 @@
     align-items: flex-start;
     overflow: hidden;
     border-radius: var(--Corner-radius-80, 8px);
-    border: 1px solid #454545;
-    background: #1B1B1B;
-    color: white;
+    border: 1px solid var(--gj-border-strong);
+    background: var(--gj-bg-card);
+    color: var(--gj-text-primary);
     font-family: Inter;
     font-size: 16px;
     font-style: normal;
@@ -149,7 +149,7 @@
 }
 
 .pairingUrl:hover {
-    border: 1px solid #7a7a7a;
+    border: 1px solid var(--gj-border-strong);
 }
 
 .errorCard {
@@ -161,7 +161,7 @@
     align-items: center;
     justify-content: center;
     gap: 6px;
-    color: #F97066;
+    color: var(--gj-danger-accent);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -173,14 +173,14 @@
 
 .warningCard {
     border-radius: 6px;
-    background: rgba(244, 162, 97, 0.10);
+    background: var(--gj-warning-bg);
     display: flex;
     height: 36px;
     padding: 10px 12px;
     align-items: center;
     justify-content: center;
     gap: 6px;
-    color: #F4A261;
+    color: var(--gj-warning-text);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -188,4 +188,10 @@
     font-style: normal;
     font-weight: 500;
     line-height: normal;
-}
\ No newline at end of file
+}
+
+:global(:root[data-theme="light"]) .closeButton img,
+:global(:root[data-theme="light"]) .source.enabled img,
+:global(:root[data-theme="light"]) .pairingUrl img {
+    filter: var(--gj-theme-icon-filter);
+}
diff --git a/Grayjay.Desktop.Web/src/pages/Sync/index.tsx b/Grayjay.Desktop.Web/src/pages/Sync/index.tsx
index 99ccd14d..cb6352f6 100644
--- a/Grayjay.Desktop.Web/src/pages/Sync/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/Sync/index.tsx
@@ -42,18 +42,18 @@ const SyncPage: Component = () => {
         break;
     }
   
-    return (<div style="display: flex; flex-direction: row; border-radius: 6px; background: #1B1B1B; padding: 14px 18px 14px; box-sizing: border-box; gap: 12px;  margin-left: 24px; margin-right: 24px; align-items: center; width: calc(100% - 48px);" use:focusable={{
+    return (<div style="display: flex; flex-direction: row; border-radius: 6px; background: var(--gj-bg-card); padding: 14px 18px 14px; box-sizing: border-box; gap: 12px;  margin-left: 24px; margin-right: 24px; align-items: center; width: calc(100% - 48px);" use:focusable={{
         onOptions: async () => await SyncBackend.removeDevice(publicKey)
       }}>
       <img src={iconDevice} style="width: 44px;" />
       <div style="display: flex; flex-direction: column; flex-grow: 1; align-items: flex-start; justify-content: center;">
-          <div style="overflow: hidden; color: white; text-align: center; text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal;">{title}</div>
-          <div style="color: #595959; font-family: Inter; font-size: 10px; font-style: normal; font-weight: 500; line-height: normal;">{subtitle}</div>
+          <div style="overflow: hidden; color: var(--gj-text-primary); text-align: center; text-overflow: ellipsis; font-family: Inter; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal;">{title}</div>
+          <div style="color: var(--gj-text-tertiary); font-family: Inter; font-size: 10px; font-style: normal; font-weight: 500; line-height: normal;">{subtitle}</div>
       </div>
   
-      <div style="border-radius: 4px; border: 1px solid #2E2E2E; display: flex; padding: 6px 8px; align-items: center; gap: 4px; flex-shrink: 0; height: fit-content;">
+      <div style="border-radius: 4px; border: 1px solid var(--gj-border); display: flex; padding: 6px 8px; align-items: center; gap: 4px; flex-shrink: 0; height: fit-content;">
         <img src={icon} style="width: 20x; cursor: pointer;" />
-        <div style="color: #BFBFBF; font-family: Inter; font-size: 10px; font-style: normal; font-weight: 500; line-height: normal;">{status}</div>
+        <div style="color: var(--gj-text-secondary); font-family: Inter; font-size: 10px; font-style: normal; font-weight: 500; line-height: normal;">{status}</div>
       </div>
       <img src={iconClear} style="width: 30px; cursor: pointer; flex-shrink: 0;" onClick={async () => await SyncBackend.removeDevice(publicKey)} />
     </div>);
@@ -102,7 +102,7 @@ const SyncPage: Component = () => {
           <div class={styles.dialogHeader} style={{"margin-left": "0px"}}>
             <div class={styles.headerText}  style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
               Please enable sync to use this feature
-              <ButtonFlex style={{ width: "170px", "margin-top": "20px" }} small={true} text="Enable" color="#019BE7" onClick={enableSync} focusableOpts={{
+              <ButtonFlex style={{ width: "170px", "margin-top": "20px" }} small={true} text="Enable" color="var(--gj-accent)" onClick={enableSync} focusableOpts={{
                 onPress: enableSync
               }} />
             </div>
@@ -222,7 +222,7 @@ const SyncPage: Component = () => {
                   }}
                   style={{cursor: "pointer", "flex-shrink": 0, "margin-right": "20px"}} 
                   small={true}
-                  color={"linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)"}
+                  color={"var(--gj-accent-grad)"}
                   focusableOpts={{ onPress: () => UIOverlay.overlayNewDeviceSync() }} />
 
                 {renderQrCodeOverlay()}
@@ -254,7 +254,7 @@ const SyncPage: Component = () => {
                   }}
                   style={{cursor: "pointer", "flex-shrink": 0}} 
                   small={true}
-                  color={"linear-gradient(267deg, #01D6E6 -100.57%, #0182E7 90.96%)"}
+                  color={"var(--gj-accent-grad)"}
                   focusableOpts={{
                     onPress: () => UIOverlay.overlayNewDeviceSync()
                   }} />
@@ -267,7 +267,7 @@ const SyncPage: Component = () => {
               </ScrollContainer>
             </Show>
             <Show when={isQrVisible$()}>
-              <div style="position: absolute; width: 100%; height: 100%; flex: 1; top: 0px; left: 0px; background-color: rgba(10,10,10,.95)" onClick={() => setIsQrVisible(false)}>{renderQrCodeOverlay()}</div>
+              <div style="position: absolute; width: 100%; height: 100%; flex: 1; top: 0px; left: 0px; background-color: var(--gj-bg-backdrop)" onClick={() => setIsQrVisible(false)}>{renderQrCodeOverlay()}</div>
             </Show>
           </>
         </Show>
diff --git a/Grayjay.Desktop.Web/src/pages/WatchLater/index.module.css b/Grayjay.Desktop.Web/src/pages/WatchLater/index.module.css
index af763e2d..aa71ab02 100644
--- a/Grayjay.Desktop.Web/src/pages/WatchLater/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/WatchLater/index.module.css
@@ -6,7 +6,7 @@
 }
 
 .header {
-    color: #FFF;
+    color: var(--gj-text-primary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -17,7 +17,7 @@
 }
 
 .metadata {
-    color: rgba(255, 255, 255, 0.60);
+    color: var(--gj-text-muted);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -31,7 +31,7 @@
     display: flex;
     flex-direction: row;
     font-size: 16px;
-    color: #808080;
+    color: var(--gj-text-tertiary);
     align-items: center;
 }
 
@@ -69,7 +69,7 @@
     -webkit-line-clamp: 2;
     flex: 1 0 0;
     overflow: hidden;
-    color: #F0F0F0;
+    color: var(--gj-text-primary);
     text-overflow: ellipsis;
     font-family: Inter;
     font-size: 16px;
diff --git a/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.module.css b/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.module.css
index 6155ebf9..15433014 100644
--- a/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.module.css
+++ b/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.module.css
@@ -1,5 +1,4 @@
 
-
 .header {
     position: relative;
     flex-shrink: 0;
@@ -10,7 +9,8 @@
 .header .icon{
     height: 80px;
     width: 80px;
-    background-color: #1d1d1d;
+    background-color: var(--gj-bg-card);
+    border: 1px solid var(--gj-border);
     border-radius: 14px;
     position: relative;
     flex-shrink: 0;
@@ -29,7 +29,7 @@
 }
 
 .header .descriptor .title{
-    color: #FFF;
+    color: var(--gj-text-primary);
     font-family: "Inter";
     leading-trim: both;
     text-edge: cap;
@@ -41,7 +41,7 @@
     margin-bottom: 2px;
 }
 .header .descriptor .description {
-    color: #8C8C8C;
+    color: var(--gj-text-tertiary);
     font-family: "Inter";
     leading-trim: both;
     text-edge: cap;
@@ -53,7 +53,7 @@
     margin-bottom: 10px;
 }
 .header .descriptor .meta {
-    color: #FFF;
+    color: var(--gj-text-secondary);
     leading-trim: both;
     text-edge: cap;
     font-family: Inter;
@@ -63,7 +63,7 @@
     line-height: normal;
 }
 .header .descriptor .meta > a {
-    color: #019BE7;
+    color: var(--gj-accent);
     text-decoration: none;
 }
 
@@ -73,4 +73,4 @@
     flex-direction: column;
     align-items: center;
     overflow: hidden;
-}
\ No newline at end of file
+}
diff --git a/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.tsx b/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.tsx
index 858edf86..45711b10 100644
--- a/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.tsx
+++ b/Grayjay.Desktop.Web/src/pages/subpages/SourceDetails/index.tsx
@@ -281,7 +281,7 @@ const SourceDetails: Component<SourceDetailsProps> = (props: SourceDetailsProps)
                 }} />
               </Show>
               
-              <Button style={{width: "calc(100% - 54px)", "margin-bottom": "10px", "margin-left": "24px"}} text='Uninstall' color='#550000' onClick={()=>uninstall()} focusableOpts={{
+              <Button style={{width: "calc(100% - 54px)", "margin-bottom": "10px", "margin-left": "24px"}} text='Uninstall' color='var(--gj-danger)' onClick={()=>uninstall()} focusableOpts={{
                 groupId: 'plugin-settings',
                 groupEscapeTo: {
                   left: ['sources']
@@ -289,7 +289,7 @@ const SourceDetails: Component<SourceDetailsProps> = (props: SourceDetailsProps)
                 groupType: 'vertical',
                 onPress: uninstall
               }}></Button>
-              <Button style={{width: "calc(100% - 54px)", "margin-bottom": "10px", "margin-left": "24px"}} text='Copy Settings to Clipboard' color='#019BE7' onClick={()=>copySettingsToClipboard()} focusableOpts={{
+              <Button style={{width: "calc(100% - 54px)", "margin-bottom": "10px", "margin-left": "24px"}} text='Copy Settings to Clipboard' color='var(--gj-accent)' onClick={()=>copySettingsToClipboard()} focusableOpts={{
                 groupId: 'plugin-settings',
                 groupEscapeTo: {
                   left: ['sources']
diff --git a/Grayjay.Desktop.Web/src/theme.css b/Grayjay.Desktop.Web/src/theme.css
new file mode 100644
index 00000000..06ee9e86
--- /dev/null
+++ b/Grayjay.Desktop.Web/src/theme.css
@@ -0,0 +1,169 @@
+
+:root {
+  color-scheme: dark;
+
+  --gj-bg-root: #141414;
+  --gj-bg-sidebar: #1b1b1b;
+  --gj-bg-panel: #1b1b1b;
+  --gj-bg-panel-strong: #212122;
+  --gj-bg-elevated: #141414;
+  --gj-bg-input: #1b1b1b;
+  --gj-bg-button-secondary: #212122;
+  --gj-bg-card: #1b1b1b;
+  --gj-bg-card-hover: #303030;
+  --gj-bg-card-active: #2e2e2e;
+  --gj-bg-soft: #171717;
+  --gj-bg-hover: rgba(255, 255, 255, 0.055);
+  --gj-bg-selected: rgba(255, 255, 255, 0.105);
+  --gj-bg-selected-strong: rgba(255, 255, 255, 0.15);
+  --gj-bg-backdrop: rgba(0, 0, 0, 0.60);
+  --gj-bg-code: #1a1a1a;
+  --gj-bg-chip: #1b1b1b;
+  --gj-bg-control: #212122;
+  --gj-bg-popover: #141414;
+  --gj-danger-soft-bg: rgba(0, 0, 0, 0.40);
+  --gj-warning-soft-bg: rgba(0, 0, 0, 0.40);
+  --gj-video-surface: #000000;
+  --gj-video-overlay-bg: rgba(0, 0, 0, 0.70);
+  --gj-video-overlay-border: rgba(255, 255, 255, 0.15);
+  --gj-video-overlay-text: #ffffff;
+
+  --gj-border: #2e2e2e;
+  --gj-border-strong: #454545;
+  --gj-border-subtle: rgba(255, 255, 255, 0.07);
+  --gj-border-muted: rgba(255, 255, 255, 0.13);
+  --gj-text-primary: #ffffff;
+  --gj-text-secondary: #bfbfbf;
+  --gj-text-tertiary: #8c8c8c;
+  --gj-text-muted: rgba(255, 255, 255, 0.60);
+  --gj-text-inverse: #141414;
+
+  --gj-accent: #019be7;
+  --gj-accent-grad: linear-gradient(267deg, #01D6E6 -100.57%, var(--gj-accent) 90.96%);
+  --gj-danger: #b23636;
+  --gj-danger-accent: #F97066;
+  --gj-warning-bg: rgba(244, 162, 97, 0.12);
+  --gj-warning-text: #ffb070;
+  --gj-focus: #bbbbbb;
+  --gj-shadow: 0px 1.852px 3.148px rgba(0, 0, 0, 0.06), 0px 8.148px 6.519px rgba(0, 0, 0, 0.10), 0px 20px 13px rgba(0, 0, 0, 0.13), 0px 38.519px 25.481px rgba(0, 0, 0, 0.15), 0px 64.815px 46.852px rgba(0, 0, 0, 0.19), 0px 100px 80px rgba(0, 0, 0, 0.25);
+  --gj-scroll-thumb: #555555;
+  --gj-scroll-thumb-hover: #888888;
+  --gj-scroll-track: #333333;
+  --gj-descriptor-gradient: #3b3b3b4f;
+  --gj-loader-glow: rgba(1, 155, 231, 0.35);
+  --gj-theme-icon-filter: none;
+  --gj-thumbnail-badge-bg: #000000ee;
+  --gj-thumbnail-badge-text: #ffffff;
+  --gj-live-badge-bg: #ff3b30;
+  --gj-live-badge-text: #ffffff;
+
+  --btn-bg: var(--gj-bg-panel-strong);
+  --btn-text: var(--gj-text-primary);
+  --btn-bg-focus: var(--gj-text-primary);
+  --btn-text-focus: var(--gj-text-inverse);
+  --cb-bg: var(--gj-bg-panel-strong);
+  --cb-text: var(--gj-text-primary);
+  --cb-bg-focus: var(--gj-text-primary);
+  --cb-text-focus: var(--gj-text-inverse);
+  --ib-bg: var(--gj-bg-panel-strong);
+  --ib-bg-focus: var(--gj-text-primary);
+  --pill-bg: var(--gj-bg-panel-strong);
+  --pill-text: var(--gj-text-primary);
+  --pill-bg-focus: var(--gj-text-primary);
+  --pill-text-focus: var(--gj-text-inverse);
+}
+
+:root[data-theme="light"] {
+  color-scheme: light;
+
+  --gj-bg-root: #f5f5f3;
+  --gj-bg-sidebar: #ecebe7;
+  --gj-bg-panel: #ffffff;
+  --gj-bg-panel-strong: #e4e2dc;
+  --gj-bg-elevated: #ffffff;
+  --gj-bg-input: #ffffff;
+  --gj-bg-button-secondary: #e4e2dc;
+  --gj-bg-card: #f6f4ef;
+  --gj-bg-card-hover: #ece9e2;
+  --gj-bg-card-active: #dfdad0;
+  --gj-bg-soft: #f1efea;
+  --gj-bg-hover: rgba(20, 20, 20, 0.055);
+  --gj-bg-selected: rgba(20, 20, 20, 0.105);
+  --gj-bg-selected-strong: rgba(20, 20, 20, 0.15);
+  --gj-bg-backdrop: rgba(20, 20, 20, 0.42);
+  --gj-bg-code: #f1efea;
+  --gj-bg-chip: #ecebe7;
+  --gj-bg-control: #e4e2dc;
+  --gj-bg-popover: #ffffff;
+  --gj-danger-soft-bg: rgba(249, 112, 102, 0.12);
+  --gj-warning-soft-bg: rgba(201, 102, 38, 0.12);
+  --gj-video-surface: #000000;
+  --gj-video-overlay-bg: rgba(0, 0, 0, 0.70);
+  --gj-video-overlay-border: rgba(255, 255, 255, 0.15);
+  --gj-video-overlay-text: #ffffff;
+
+  --gj-border: #d6d2ca;
+  --gj-border-strong: #c4beb3;
+  --gj-border-subtle: rgba(20, 20, 20, 0.07);
+  --gj-border-muted: rgba(20, 20, 20, 0.13);
+  --gj-text-primary: #141414;
+  --gj-text-secondary: #3f3f3f;
+  --gj-text-tertiary: #6d6a64;
+  --gj-text-muted: rgba(20, 20, 20, 0.62);
+  --gj-text-inverse: #ffffff;
+
+  --gj-focus: #3f3f3f;
+  --gj-danger-accent: #F97066;
+  --gj-warning-bg: rgba(244, 162, 97, 0.12);
+  --gj-warning-text: #c96626;
+  --gj-shadow: 0px 1.852px 3.148px rgba(0, 0, 0, 0.04), 0px 8.148px 6.519px rgba(0, 0, 0, 0.06), 0px 20px 13px rgba(0, 0, 0, 0.08), 0px 38.519px 25.481px rgba(0, 0, 0, 0.10);
+  --gj-scroll-thumb: #aaa59b;
+  --gj-scroll-thumb-hover: #8d877c;
+  --gj-scroll-track: #dedbd4;
+  --gj-descriptor-gradient: rgba(20, 20, 20, 0.08);
+  --gj-loader-glow: rgba(20, 20, 20, 0.10);
+  --gj-theme-icon-filter: brightness(0) saturate(100%);
+  --gj-thumbnail-badge-bg: rgba(255, 255, 255, 0.92);
+  --gj-thumbnail-badge-text: #141414;
+  --gj-live-badge-bg: #ff3b30;
+  --gj-live-badge-text: #ffffff;
+
+  --btn-bg: var(--gj-bg-panel-strong);
+  --btn-text: var(--gj-text-primary);
+  --btn-bg-focus: var(--gj-text-primary);
+  --btn-text-focus: var(--gj-text-inverse);
+  --cb-bg: var(--gj-bg-panel-strong);
+  --cb-text: var(--gj-text-primary);
+  --cb-bg-focus: var(--gj-text-primary);
+  --cb-text-focus: var(--gj-text-inverse);
+  --ib-bg: var(--gj-bg-panel-strong);
+  --ib-bg-focus: var(--gj-text-primary);
+  --pill-bg: var(--gj-bg-panel-strong);
+  --pill-text: var(--gj-text-primary);
+  --pill-bg-focus: var(--gj-text-primary);
+  --pill-text-focus: var(--gj-text-inverse);
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+:root[data-theme="light"] h1,
+:root[data-theme="light"] h2,
+:root[data-theme="light"] h3,
+:root[data-theme="light"] p,
+:root[data-theme="light"] span,
+:root[data-theme="light"] label,
+:root[data-theme="light"] input,
+:root[data-theme="light"] textarea,
+:root[data-theme="light"] select,
+:root[data-theme="light"] button {
+  color: inherit;
+}
+
+:root[data-theme="light"] input,
+:root[data-theme="light"] textarea,
+:root[data-theme="light"] select {
+  background-color: var(--gj-bg-elevated);
+  color: var(--gj-text-primary);
+}
diff --git a/Grayjay.Desktop.Web/src/theme.tsx b/Grayjay.Desktop.Web/src/theme.tsx
new file mode 100644
index 00000000..21f819fa
--- /dev/null
+++ b/Grayjay.Desktop.Web/src/theme.tsx
@@ -0,0 +1,93 @@
+import { Component, createEffect, onCleanup, onMount } from 'solid-js';
+import StateGlobal from './state/StateGlobal';
+
+const THEME_SYSTEM = 0;
+const THEME_DARK = 1;
+const THEME_LIGHT = 2;
+
+type ResolvedTheme = 'dark' | 'light';
+
+let installed = false;
+
+function getSystemTheme(): ResolvedTheme {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+    return 'dark';
+  }
+
+  return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+}
+
+function resolveTheme(setting: unknown): ResolvedTheme {
+  if (setting === THEME_LIGHT) {
+    return 'light';
+  }
+
+  if (setting === THEME_SYSTEM) {
+    return getSystemTheme();
+  }
+
+  return 'dark';
+}
+
+function getPrepaintThemeSetting(): unknown {
+  const source = document.documentElement.dataset.themeSource;
+
+  if (source === 'light') {
+    return THEME_LIGHT;
+  }
+
+  if (source === 'system') {
+    return THEME_SYSTEM;
+  }
+
+  if (source === 'dark') {
+    return THEME_DARK;
+  }
+
+  return undefined;
+}
+
+function getThemeSetting(): unknown {
+  return StateGlobal.settings$()?.object?.appearance?.theme ?? getPrepaintThemeSetting();
+}
+
+function applyTheme(setting: unknown) {
+  const theme = resolveTheme(setting);
+  const root = document.documentElement;
+
+  root.dataset.theme = theme;
+  root.dataset.themeSource = setting === THEME_LIGHT ? 'light' : setting === THEME_DARK ? 'dark' : 'system';
+  root.style.colorScheme = theme;
+}
+
+const NativeTheme: Component = () => {
+  onMount(() => {
+    if (installed) {
+      return;
+    }
+
+    installed = true;
+    const media = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+      ? window.matchMedia('(prefers-color-scheme: light)')
+      : undefined;
+    const onSystemThemeChanged = () => applyTheme(getThemeSetting());
+
+    applyTheme(getThemeSetting());
+
+    if (media?.addEventListener) {
+      media.addEventListener('change', onSystemThemeChanged);
+      onCleanup(() => media.removeEventListener('change', onSystemThemeChanged));
+    } else if (media?.addListener) {
+      media.addListener(onSystemThemeChanged);
+      onCleanup(() => media.removeListener(onSystemThemeChanged));
+    }
+  });
+
+  createEffect(() => {
+    applyTheme(getThemeSetting());
+  });
+
+  return null;
+};
+
+export default NativeTheme;