From 22fc5df0e55525cc4dafa8463bf180696373b439 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 11:28:05 +1000
Subject: [PATCH 01/25] fix(web-ui): Moved sunshine.css + fixed sunshine css
 style overriding / loading

- Moved `sunshine.css` from `src_assets/common/assets/web/public/assets/css/sunshine.cs` to `src_assets/common/assets/web/sunshine.css`
- MOved link refeences for styles from `template_header` to `init.js`
---
 src_assets/common/assets/web/init.js                         | 5 +++++
 .../common/assets/web/{public/assets/css => }/sunshine.css   | 0
 src_assets/common/assets/web/template_header.html            | 2 --
 3 files changed, 5 insertions(+), 2 deletions(-)
 rename src_assets/common/assets/web/{public/assets/css => }/sunshine.css (100%)

diff --git a/src_assets/common/assets/web/init.js b/src_assets/common/assets/web/init.js
index 22b84df293e..0244018c8f0 100644
--- a/src_assets/common/assets/web/init.js
+++ b/src_assets/common/assets/web/init.js
@@ -1,5 +1,10 @@
 import i18n from './locale'
 
+import 'bootstrap/dist/css/bootstrap.min.css'
+// Load Sunshine.css after bootstrap to override some of the styles.
+// Makes themes load and style correctly.
+import './sunshine.css'
+
 // must import even if not implicitly using here
 // https://github.com/aurelia/skeleton-navigation/issues/894
 // https://discourse.aurelia.io/t/bootstrap-import-bootstrap-breaks-dropdown-menu-in-navbar/641/9
diff --git a/src_assets/common/assets/web/public/assets/css/sunshine.css b/src_assets/common/assets/web/sunshine.css
similarity index 100%
rename from src_assets/common/assets/web/public/assets/css/sunshine.css
rename to src_assets/common/assets/web/sunshine.css
diff --git a/src_assets/common/assets/web/template_header.html b/src_assets/common/assets/web/template_header.html
index a41642fc3e7..9fc206b1c5a 100644
--- a/src_assets/common/assets/web/template_header.html
+++ b/src_assets/common/assets/web/template_header.html
@@ -4,5 +4,3 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Sunshine</title>
 <link rel="icon" type="image/x-icon" href="./images/sunshine.ico">
-<link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
-<link href="./assets/css/sunshine.css" rel="stylesheet" />

From 5f06ed602495bfed4b4880dca75e44d3aa7e454a Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 11:40:03 +1000
Subject: [PATCH 02/25] fix(web-ui): Updated Nord theme stylig with proper
 theme HEX codes

---
 src_assets/common/assets/web/sunshine.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index a8efdffdfbf..13fa945b489 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -223,22 +223,22 @@
 [data-theme="nord"] {
     --color-primary: #5E81AC;
     --color-primary-hover: #81A1C1;
-    --color-primary-light: #D8DEE9;
+    --color-primary-light: #434C5E;
     --color-accent: #88C0D0;
     --color-accent-hover: #8FBCBB;
-    --color-accent-light: #ECEFF4;
+    --color-accent-light: #434C5E;
     --color-success: #A3BE8C;
     --color-success-hover: #B8D4A3;
-    --color-success-light: #E5E9F0;
+    --color-success-light: #434C5E;
     --color-danger: #BF616A;
     --color-danger-hover: #D08770;
-    --color-danger-light: #E5E9F0;
+    --color-danger-light: #434C5E;
     --color-warning: #EBCB8B;
     --color-warning-hover: #F0D9A6;
-    --color-warning-light: #ECEFF4;
+    --color-warning-light: #434C5E;
     --color-info: #5E81AC;
     --color-info-hover: #81A1C1;
-    --color-info-light: #D8DEE9;
+    --color-info-light: #434C5E;
 
     --color-bg-base: #2E3440;
     --color-bg-subtle: #3B4252;

From 2e4fda3cbf4317bdce017402e2118ecb4d9bfe7c Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 11:44:08 +1000
Subject: [PATCH 03/25] feat(web-ui): Added Dracula / Alucard themes

---
 src_assets/common/assets/web/ThemeToggle.vue  | 14 ++++
 .../assets/web/public/assets/locale/en.json   |  2 +
 src_assets/common/assets/web/sunshine.css     | 83 +++++++++++++++++++
 src_assets/common/assets/web/theme.js         |  1 +
 4 files changed, 100 insertions(+)

diff --git a/src_assets/common/assets/web/ThemeToggle.vue b/src_assets/common/assets/web/ThemeToggle.vue
index 0ae5a58b1bd..90a67cf3e4a 100644
--- a/src_assets/common/assets/web/ThemeToggle.vue
+++ b/src_assets/common/assets/web/ThemeToggle.vue
@@ -5,9 +5,11 @@ import {
   CloudMoon,
   CloudRain,
   Contrast,
+  Droplet,
   Flame,
   Flower,
   Flower2,
+  Ghost,
   Layers,
   MonitorSmartphone,
   Moon,
@@ -53,6 +55,12 @@ onMounted(() => {
           {{ $t('navbar.theme_dark') }}
         </button>
       </li>
+      <li>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dracula" aria-pressed="false">
+          <Ghost :size="18" class="theme-icon icon"></Ghost>
+          {{ $t('navbar.theme_dracula') }}
+        </button>
+      </li>
       <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
           <Layers :size="18" class="theme-icon icon"></Layers>
@@ -91,6 +99,12 @@ onMounted(() => {
           {{ $t('navbar.theme_light') }}
         </button>
       </li>
+      <li>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="alucard" aria-pressed="false">
+          <Droplet :size="18" class="theme-icon icon"></Droplet>
+          {{ $t('navbar.theme_alucard') }}
+        </button>
+      </li>
       <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
           <Sparkles :size="18" class="theme-icon icon"></Sparkles>
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index f4eee2cdccf..009e9c9d358 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -438,8 +438,10 @@
     "logout": "Log Out",
     "password": "Change Password",
     "pin": "PIN",
+    "theme_alucard": "Alucard",
     "theme_auto": "Auto",
     "theme_dark": "Dark",
+    "theme_dracula": "Dracula",
     "theme_ember": "Ember",
     "theme_forest": "Forest",
     "theme_indigo": "Indigo",
diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 13fa945b489..5d71d0dd701 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -307,6 +307,50 @@
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
 }
 
+/* Dracula Theme - https://draculatheme.com */
+[data-theme="dracula"] {
+    --color-primary: #BD93F9;
+    --color-primary-hover: #CFB0FB;
+    --color-primary-light: #3A2D5C;
+    --color-accent: #FFB86C;
+    --color-accent-hover: #FFCB93;
+    --color-accent-light: #43331D;
+    --color-success: #50FA7B;
+    --color-success-hover: #74FB97;
+    --color-success-light: #143D24;
+    --color-danger: #FF5555;
+    --color-danger-hover: #FF7B7B;
+    --color-danger-light: #43201F;
+    --color-warning: #F1FA8C;
+    --color-warning-hover: #F5FCA8;
+    --color-warning-light: #3F421F;
+    --color-info: #8BE9FD;
+    --color-info-hover: #ABF0FE;
+    --color-info-light: #173B43;
+
+    --color-bg-base: #282A36;
+    --color-bg-subtle: #343746;
+    --color-bg-muted: #424450;
+    --color-surface: #343746;
+    --color-surface-raised: #424450;
+
+    --color-border: #44475A;
+    --color-border-strong: #6272A4;
+
+    --color-text-base: #F8F8F2;
+    --color-text-muted: #6272A4;
+    --color-text-subtle: #6272A4;
+
+    --navbar-bg: #44475A;
+    --navbar-text: #F8F8F2;
+    --navbar-text-muted: rgba(248, 248, 242, 0.7);
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
+}
+
 /* ==========================================================================
    Light Themes
    ========================================================================== */
@@ -623,6 +667,45 @@
     --navbar-text-muted: rgba(255, 255, 255, 0.9);
 }
 
+/* Alucard Theme - https://draculatheme.com */
+[data-theme="alucard"] {
+    --color-primary: #644AC9;
+    --color-primary-hover: #5239B0;
+    --color-primary-light: #E0DAF6;
+    --color-accent: #A34D14;
+    --color-accent-hover: #874010;
+    --color-accent-light: #F0E1D4;
+    --color-success: #14710A;
+    --color-success-hover: #0F5A07;
+    --color-success-light: #D5E6D2;
+    --color-danger: #CB3A2A;
+    --color-danger-hover: #B02E20;
+    --color-danger-light: #F4DAD6;
+    --color-warning: #846E15;
+    --color-warning-hover: #6B5910;
+    --color-warning-light: #EAE5CE;
+    --color-info: #036A96;
+    --color-info-hover: #02597D;
+    --color-info-light: #D2E4EC;
+
+    --color-bg-base: #FFFBEB;
+    --color-bg-subtle: #ECE9DF;
+    --color-bg-muted: #DEDCCF;
+    --color-surface: #EFEDDC;
+    --color-surface-raised: #EFEDDC;
+
+    --color-border: #CFCFDE;
+    --color-border-strong: #6C664B;
+
+    --color-text-base: #1F1F1F;
+    --color-text-muted: #6C664B;
+    --color-text-subtle: #6C664B;
+
+    --navbar-bg: #CFCFDE;
+    --navbar-text: #1F1F1F;
+    --navbar-text-muted: rgba(31, 31, 31, 0.7);
+}
+
 /* ==========================================================================
    Global Styles
    ========================================================================== */
diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/theme.js
index a04c3e7c90d..da6c65683ea 100644
--- a/src_assets/common/assets/web/theme.js
+++ b/src_assets/common/assets/web/theme.js
@@ -13,6 +13,7 @@ export const getPreferredTheme = () => {
 // Define which themes are dark (for Bootstrap compatibility)
 const darkThemes = new Set([
     'dark',
+    'dracula',
     'ember',
     'midnight',
     'moonlight',

From 51e3a499c93f5f7777e0761886b33f6a3f3cdd1d Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 17:06:09 +1000
Subject: [PATCH 04/25] fix(web-ui): Updated button styling

- Fixed `.btn-info` / `.btn-outline-primary` to use theme styling
- Fixed `.btn-primary` being blue when clicking in (now themed)
---
 src_assets/common/assets/web/sunshine.css | 24 +++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 5d71d0dd701..db7d76b4758 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -1060,6 +1060,8 @@ p {
 }
 
 .btn-primary {
+    --bs-btn-active-bg: var(--color-primary-hover);
+    --bs-btn-active-border-color: var(--color-primary-hover);
     background-color: var(--color-primary);
     color: white;
 }
@@ -1099,6 +1101,16 @@ p {
     color: white;
 }
 
+.btn-info {
+    background-color: var(--color-info);
+    color: white;
+}
+
+.btn-info:hover {
+    background-color: var(--color-info-hover);
+    color: white;
+}
+
 .btn-secondary {
     background-color: var(--color-bg-muted);
     color: var(--color-text-base);
@@ -1109,6 +1121,18 @@ p {
     color: var(--color-text-base);
 }
 
+.btn-outline-primary {
+    --bs-btn-color: var(--color-primary);
+    --bs-btn-border-color: var(--color-primary);
+    --bs-btn-hover-color: white;
+    --bs-btn-hover-bg: var(--color-primary);
+    --bs-btn-hover-border-color: var(--color-primary);
+    --bs-btn-active-color: white;
+    --bs-btn-active-bg: var(--color-primary);
+    --bs-btn-active-border-color: var(--color-primary);
+    border: 1px solid var(--color-primary);
+}
+
 /* Align SVG icons inside buttons. */
 .btn .icon,
 .btn svg {

From ff6fd135fc8b2e1fbc8221852b86a5dd5ee39b90 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 17:31:43 +1000
Subject: [PATCH 05/25] feat(web-ui): Created a themed drop-down

- Updated the hover for dropdown items to actually style properly
- Updated `ThemeToggle.vue` to implement it as a 2-column wide dropdown (left dark, right light)
- Added translation for `theme_group_light` and `theme_group_dark`
- Dropdown arrow rotates now + button is highlighted when open
---
 src_assets/common/assets/web/ThemeToggle.vue  | 40 +++---------------
 .../assets/web/public/assets/locale/en.json   |  2 +
 src_assets/common/assets/web/sunshine.css     | 41 ++++++++++++++++++-
 3 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/src_assets/common/assets/web/ThemeToggle.vue b/src_assets/common/assets/web/ThemeToggle.vue
index 90a67cf3e4a..462cd49f897 100644
--- a/src_assets/common/assets/web/ThemeToggle.vue
+++ b/src_assets/common/assets/web/ThemeToggle.vue
@@ -40,108 +40,80 @@ onMounted(() => {
       </span>
       <span id="bd-theme-text">{{ $t('navbar.toggle_theme') }}</span>
     </a>
-    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
-      <li>
+    <ul class="dropdown-menu dropdown-menu-end theme-menu" aria-labelledby="bd-theme-text">
+      <li class="theme-menu-full">
         <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
           <MonitorSmartphone :size="18" class="theme-icon icon"></MonitorSmartphone>
           {{ $t('navbar.theme_auto') }}
         </button>
       </li>
-      <li><hr class="dropdown-divider"></li>
       <!-- Dark Themes -->
-      <li>
+      <li class="theme-menu-group">
+        <h6 class="dropdown-header">{{ $t('navbar.theme_group_dark') }}</h6>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
           <Moon :size="18" class="theme-icon icon"></Moon>
           {{ $t('navbar.theme_dark') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dracula" aria-pressed="false">
           <Ghost :size="18" class="theme-icon icon"></Ghost>
           {{ $t('navbar.theme_dracula') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
           <Layers :size="18" class="theme-icon icon"></Layers>
           {{ $t('navbar.theme_slate') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="moonlight" aria-pressed="false">
           <CloudMoon :size="18" class="theme-icon icon"></CloudMoon>
           {{ $t('navbar.theme_moonlight') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="midnight" aria-pressed="false">
           <CloudRain :size="18" class="theme-icon icon"></CloudRain>
           {{ $t('navbar.theme_midnight') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember" aria-pressed="false">
           <Flame :size="18" class="theme-icon icon"></Flame>
           {{ $t('navbar.theme_ember') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="nord" aria-pressed="false">
           <Mountain :size="18" class="theme-icon icon"></Mountain>
           {{ $t('navbar.theme_nord') }}
         </button>
       </li>
-      <li><hr class="dropdown-divider"></li>
       <!-- Light Themes -->
-      <li>
+      <li class="theme-menu-group">
+        <h6 class="dropdown-header">{{ $t('navbar.theme_group_light') }}</h6>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
           <Sun :size="18" class="theme-icon icon"></Sun>
           {{ $t('navbar.theme_light') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="alucard" aria-pressed="false">
           <Droplet :size="18" class="theme-icon icon"></Droplet>
           {{ $t('navbar.theme_alucard') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
           <Sparkles :size="18" class="theme-icon icon"></Sparkles>
           {{ $t('navbar.theme_indigo') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="sunshine" aria-pressed="false">
           <Sunrise :size="18" class="theme-icon icon"></Sunrise>
           {{ $t('navbar.theme_sunshine') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ocean" aria-pressed="false">
           <Waves :size="18" class="theme-icon icon"></Waves>
           {{ $t('navbar.theme_ocean') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="forest" aria-pressed="false">
           <Trees :size="18" class="theme-icon icon"></Trees>
           {{ $t('navbar.theme_forest') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose" aria-pressed="false">
           <Flower :size="18" class="theme-icon icon"></Flower>
           {{ $t('navbar.theme_rose') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="lavender" aria-pressed="false">
           <Flower2 :size="18" class="theme-icon icon"></Flower2>
           {{ $t('navbar.theme_lavender') }}
         </button>
-      </li>
-      <li>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="monochrome" aria-pressed="false">
           <Contrast :size="18" class="theme-icon icon"></Contrast>
           {{ $t('navbar.theme_monochrome') }}
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index 009e9c9d358..c251a5591c7 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -444,6 +444,8 @@
     "theme_dracula": "Dracula",
     "theme_ember": "Ember",
     "theme_forest": "Forest",
+    "theme_group_dark": "Dark Themes",
+    "theme_group_light": "Light Themes",
     "theme_indigo": "Indigo",
     "theme_lavender": "Lavender",
     "theme_light": "Light",
diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index db7d76b4758..eb999038b0b 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -905,6 +905,11 @@ body {
     font-weight: 600;
 }
 
+.navbar-sunshine .nav-link.dropdown-toggle.show {
+    color: var(--navbar-text) !important;
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
 .navbar-sunshine .navbar-toggler {
     color: var(--navbar-text) !important;
     border-color: rgba(255, 255, 255, 0.2) !important;
@@ -1668,6 +1673,10 @@ p {
     padding: var(--spacing-sm);
 }
 
+.dropdown-toggle.show::after {
+    transform: rotate(180deg);
+}
+
 .dropdown-item {
     padding: var(--spacing-sm) var(--spacing-md);
     border-radius: var(--radius-sm);
@@ -1676,7 +1685,7 @@ p {
 }
 
 .dropdown-item:hover {
-    background-color: var(--color-bg-subtle) !important;
+    background-color: var(--color-bg-muted) !important;
     color: var(--color-text-base) !important;
 }
 
@@ -1700,6 +1709,36 @@ p {
     margin-right: 0.5rem;
 }
 
+.theme-menu {
+    grid-template-columns: 1fr 1fr;
+    gap: 0 var(--spacing-sm);
+    min-width: 22rem;
+}
+
+.dropdown-menu.theme-menu.show {
+    display: grid;
+}
+
+.theme-menu-full {
+    grid-column: 1 / -1;
+}
+
+.theme-menu .dropdown-header {
+    color: var(--color-text-muted);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs);
+}
+
+@media (max-width: 480px) {
+    .theme-menu {
+        grid-template-columns: 1fr;
+        min-width: 12rem;
+    }
+}
+
 /* ==========================================================================
    Responsive Adjustments
    ========================================================================== */

From dffff89450f00550ff12f86320613ffb57642c66 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 17:39:14 +1000
Subject: [PATCH 06/25] fix(web-ui): Bootstrap override for secondary outline
 button + fixed input group text colouring

---
 src_assets/common/assets/web/sunshine.css | 28 +++++++++++++++--------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index eb999038b0b..f12feb16521 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -1138,6 +1138,18 @@ p {
     border: 1px solid var(--color-primary);
 }
 
+.btn-outline-secondary {
+    --bs-btn-color: var(--color-text-muted);
+    --bs-btn-border-color: var(--color-border);
+    --bs-btn-hover-color: var(--color-text-base);
+    --bs-btn-hover-bg: var(--color-bg-muted);
+    --bs-btn-hover-border-color: var(--color-border-strong);
+    --bs-btn-active-color: var(--color-text-base);
+    --bs-btn-active-bg: var(--color-bg-muted);
+    --bs-btn-active-border-color: var(--color-border-strong);
+    border: 1px solid var(--color-border);
+}
+
 /* Align SVG icons inside buttons. */
 .btn .icon,
 .btn svg {
@@ -1171,6 +1183,12 @@ p {
     opacity: 0.7;
 }
 
+.input-group-text {
+    background-color: var(--color-bg-muted);
+    border: 1px solid var(--color-border);
+    color: var(--color-text-muted);
+}
+
 .form-label {
     font-weight: 600;
     color: var(--color-text-base);
@@ -1862,16 +1880,6 @@ p {
     max-width: 18rem;
 }
 
-.apps-toolbar .btn-outline-secondary {
-    border: 1px solid var(--color-border);
-}
-
-.apps-toolbar .btn-outline-secondary.active {
-    background-color: var(--color-bg-muted);
-    border-color: var(--color-border-strong);
-    color: var(--color-text-base);
-}
-
 /* ==========================================================================
    Featured Apps Page Styles
    ========================================================================== */

From 2aef88f52e8a3bd574735bc3ead66da514249c62 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 17:51:46 +1000
Subject: [PATCH 07/25] fix(web-ui): Themed the logout page

---
 src_assets/common/assets/web/logout.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src_assets/common/assets/web/logout.html b/src_assets/common/assets/web/logout.html
index 84ff3a42bcd..81d6081d672 100644
--- a/src_assets/common/assets/web/logout.html
+++ b/src_assets/common/assets/web/logout.html
@@ -27,8 +27,11 @@ <h1 class="h3 mb-3">{{ $t('logout.logged_out') }}</h1>
 <script type="module">
   import { createApp } from 'vue'
   import { initApp } from './init'
+  import { loadAutoTheme } from './theme'
   import { LogIn } from '@lucide/vue'
 
+  loadAutoTheme();
+
   const app = createApp({
     components: {
       LogIn,

From 73919ade0f3f749a2c7fc3014cc2f7619d69eb86 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 17:58:46 +1000
Subject: [PATCH 08/25] fix(web-ui): Added `color-on-XXX` css variables to set
 text colour

- Allowing for overrides when themes are not contrasting enough between bg and text
---
 src_assets/common/assets/web/sunshine.css | 37 ++++++++++++++++-------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index f12feb16521..2d9a52ba355 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -37,6 +37,12 @@
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+    --color-on-primary: #fff;
+    --color-on-success: #fff;
+    --color-on-danger: #fff;
+    --color-on-info: #fff;
+    --color-on-warning: #1a1a1a;
 }
 
 /* ==========================================================================
@@ -64,6 +70,8 @@
     --color-info-hover: #3dd5f3;
     --color-info-light: #032830;
 
+    --color-on-info: #1a1a1a;
+
     --color-bg-base: #212529;
     --color-bg-subtle: #2c3034;
     --color-bg-muted: #383d41;
@@ -328,6 +336,10 @@
     --color-info-hover: #ABF0FE;
     --color-info-light: #173B43;
 
+    --color-on-primary: #282A36;
+    --color-on-success: #282A36;
+    --color-on-info: #282A36;
+
     --color-bg-base: #282A36;
     --color-bg-subtle: #343746;
     --color-bg-muted: #424450;
@@ -376,6 +388,8 @@
     --color-info-hover: #31d2f2;
     --color-info-light: #cff4fc;
 
+    --color-on-info: #1a1a1a;
+
     --color-bg-base: #ffffff;
     --color-bg-subtle: #f8f9fa;
     --color-bg-muted: #e9ecef;
@@ -633,6 +647,7 @@
     --color-primary: #F59E0B;
     --color-primary-hover: #D97706;
     --color-primary-light: #FEF3C7;
+    --color-on-primary: #1a1a1a;
     --color-accent: #FB923C;
     --color-accent-hover: #F97316;
     --color-accent-light: #FFEDD5;
@@ -1068,52 +1083,52 @@ p {
     --bs-btn-active-bg: var(--color-primary-hover);
     --bs-btn-active-border-color: var(--color-primary-hover);
     background-color: var(--color-primary);
-    color: white;
+    color: var(--color-on-primary);
 }
 
 .btn-primary:hover {
     background-color: var(--color-primary-hover);
-    color: white;
+    color: var(--color-on-primary);
 }
 
 .btn-success {
     background-color: var(--color-success);
-    color: white;
+    color: var(--color-on-success);
 }
 
 .btn-success:hover {
     background-color: var(--color-success-hover);
-    color: white;
+    color: var(--color-on-success);
 }
 
 .btn-danger {
     background-color: var(--color-danger);
-    color: white;
+    color: var(--color-on-danger);
 }
 
 .btn-danger:hover {
     background-color: var(--color-danger-hover);
-    color: white;
+    color: var(--color-on-danger);
 }
 
 .btn-warning {
     background-color: var(--color-warning);
-    color: white;
+    color: var(--color-on-warning);
 }
 
 .btn-warning:hover {
     background-color: var(--color-warning-hover);
-    color: white;
+    color: var(--color-on-warning);
 }
 
 .btn-info {
     background-color: var(--color-info);
-    color: white;
+    color: var(--color-on-info);
 }
 
 .btn-info:hover {
     background-color: var(--color-info-hover);
-    color: white;
+    color: var(--color-on-info);
 }
 
 .btn-secondary {
@@ -1184,7 +1199,7 @@ p {
 }
 
 .input-group-text {
-    background-color: var(--color-bg-muted);
+    background-color: var(--color-surface);
     border: 1px solid var(--color-border);
     color: var(--color-text-muted);
 }

From ffebd155b7cdde1406e73e55d673339e537ff56f Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 18:01:37 +1000
Subject: [PATCH 09/25] fix(web-ui): updated the background of input group
 texts to use bg colours instead of `surface`

---
 src_assets/common/assets/web/sunshine.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 2d9a52ba355..8d3fc4b810c 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -1177,7 +1177,7 @@ p {
 
 .form-control,
 .form-select {
-    background-color: var(--color-surface);
+    background-color: var(--color-bg-base);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-md);
     padding: 0.625rem 0.875rem;
@@ -1189,7 +1189,7 @@ p {
 .form-select:focus {
     border-color: var(--color-primary);
     box-shadow: 0 0 0 3px var(--color-primary-light);
-    background-color: var(--color-surface);
+    background-color: var(--color-bg-base);
     color: var(--color-text-base);
 }
 
@@ -1199,7 +1199,7 @@ p {
 }
 
 .input-group-text {
-    background-color: var(--color-surface);
+    background-color: var(--color-bg-base);
     border: 1px solid var(--color-border);
     color: var(--color-text-muted);
 }

From 43fe884b5f9fa8a48afd08f9b9e7011f57430821 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 18:08:22 +1000
Subject: [PATCH 10/25] fix(web-ui): Fixed missing `color-on-warning` for
 dracula theme

---
 src_assets/common/assets/web/sunshine.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 8d3fc4b810c..d056e93c99b 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -703,6 +703,8 @@
     --color-info-hover: #02597D;
     --color-info-light: #D2E4EC;
 
+    --color-on-warning: #fff;
+
     --color-bg-base: #FFFBEB;
     --color-bg-subtle: #ECE9DF;
     --color-bg-muted: #DEDCCF;

From 9f047c65966a5dab068ce58a3b16e217c931d92c Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 18:29:38 +1000
Subject: [PATCH 11/25] feat(web-ui): added 2 new themes, `Catppuccin Latte`
 (light) and `Catppuccin Mocha` (dark)

---
 src_assets/common/assets/web/ThemeToggle.vue  | 10 +++
 .../assets/web/public/assets/locale/en.json   |  2 +
 src_assets/common/assets/web/sunshine.css     | 88 +++++++++++++++++++
 src_assets/common/assets/web/theme.js         |  1 +
 4 files changed, 101 insertions(+)

diff --git a/src_assets/common/assets/web/ThemeToggle.vue b/src_assets/common/assets/web/ThemeToggle.vue
index 462cd49f897..6e63cd86c3b 100644
--- a/src_assets/common/assets/web/ThemeToggle.vue
+++ b/src_assets/common/assets/web/ThemeToggle.vue
@@ -4,6 +4,7 @@ import { onMounted } from 'vue'
 import {
   CloudMoon,
   CloudRain,
+  Coffee,
   Contrast,
   Droplet,
   Flame,
@@ -11,6 +12,7 @@ import {
   Flower2,
   Ghost,
   Layers,
+  Milk,
   MonitorSmartphone,
   Moon,
   Mountain,
@@ -58,6 +60,10 @@ onMounted(() => {
           <Ghost :size="18" class="theme-icon icon"></Ghost>
           {{ $t('navbar.theme_dracula') }}
         </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="mocha" aria-pressed="false">
+          <Coffee :size="18" class="theme-icon icon"></Coffee>
+          {{ $t('navbar.theme_mocha') }}
+        </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
           <Layers :size="18" class="theme-icon icon"></Layers>
           {{ $t('navbar.theme_slate') }}
@@ -90,6 +96,10 @@ onMounted(() => {
           <Droplet :size="18" class="theme-icon icon"></Droplet>
           {{ $t('navbar.theme_alucard') }}
         </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="latte" aria-pressed="false">
+          <Milk :size="18" class="theme-icon icon"></Milk>
+          {{ $t('navbar.theme_latte') }}
+        </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
           <Sparkles :size="18" class="theme-icon icon"></Sparkles>
           {{ $t('navbar.theme_indigo') }}
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index c251a5591c7..758f2230970 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -447,9 +447,11 @@
     "theme_group_dark": "Dark Themes",
     "theme_group_light": "Light Themes",
     "theme_indigo": "Indigo",
+    "theme_latte": "Latte",
     "theme_lavender": "Lavender",
     "theme_light": "Light",
     "theme_midnight": "Midnight",
+    "theme_mocha": "Mocha",
     "theme_monochrome": "Monochrome",
     "theme_moonlight": "Moonlight",
     "theme_nord": "Nord",
diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index d056e93c99b..23b1e4c1b43 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -363,6 +363,55 @@
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
 }
 
+/* Catppuccin Mocha - https://github.com/catppuccin/catppuccin */
+[data-theme="mocha"] {
+    --color-primary: #cba6f7;
+    --color-primary-hover: #d5b8f9;
+    --color-primary-light: #3c2e5c;
+    --color-accent: #f5c2e7;
+    --color-accent-hover: #f7ceec;
+    --color-accent-light: #4a2e44;
+    --color-success: #a6e3a1;
+    --color-success-hover: #b8e9b4;
+    --color-success-light: #1e3d24;
+    --color-danger: #f38ba8;
+    --color-danger-hover: #f5a2b9;
+    --color-danger-light: #4a2230;
+    --color-warning: #f9e2af;
+    --color-warning-hover: #fae8bf;
+    --color-warning-light: #41391f;
+    --color-info: #89b4fa;
+    --color-info-hover: #a1c3fb;
+    --color-info-light: #1e2e4a;
+
+    --color-on-primary: #1e1e2e;
+    --color-on-success: #1e1e2e;
+    --color-on-danger: #1e1e2e;
+    --color-on-info: #1e1e2e;
+
+    --color-bg-base: #1e1e2e;
+    --color-bg-subtle: #313244;
+    --color-bg-muted: #45475a;
+    --color-surface: #313244;
+    --color-surface-raised: #45475a;
+
+    --color-border: #585b70;
+    --color-border-strong: #6c7086;
+
+    --color-text-base: #cdd6f4;
+    --color-text-muted: #a6adc8;
+    --color-text-subtle: #7f849c;
+
+    --navbar-bg: #cba6f7;
+    --navbar-text: #1e1e2e;
+    --navbar-text-muted: rgba(30, 30, 46, 0.75);
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
+}
+
 /* ==========================================================================
    Light Themes
    ========================================================================== */
@@ -723,6 +772,45 @@
     --navbar-text-muted: rgba(31, 31, 31, 0.7);
 }
 
+/* Catppuccin Latte - https://github.com/catppuccin/catppuccin */
+[data-theme="latte"] {
+    --color-primary: #8839ef;
+    --color-primary-hover: #7430cb;
+    --color-primary-light: #ede1fd;
+    --color-accent: #ea76cb;
+    --color-accent-hover: #ce68b3;
+    --color-accent-light: #fbe4f5;
+    --color-success: #40a02b;
+    --color-success-hover: #368825;
+    --color-success-light: #dcefd5;
+    --color-danger: #d20f39;
+    --color-danger-hover: #b30d30;
+    --color-danger-light: #f7d6dd;
+    --color-warning: #df8e1d;
+    --color-warning-hover: #be7919;
+    --color-warning-light: #f8ecd3;
+    --color-info: #1e66f5;
+    --color-info-hover: #1a57d0;
+    --color-info-light: #d7e2fd;
+
+    --color-bg-base: #e6e9ef;
+    --color-bg-subtle: #dce0e8;
+    --color-bg-muted: #ccd0da;
+    --color-surface: #eff1f5;
+    --color-surface-raised: #eff1f5;
+
+    --color-border: #ccd0da;
+    --color-border-strong: #acb0be;
+
+    --color-text-base: #4c4f69;
+    --color-text-muted: #6c6f85;
+    --color-text-subtle: #8c8fa1;
+
+    --navbar-bg: #8839ef;
+    --navbar-text: #ffffff;
+    --navbar-text-muted: rgba(255, 255, 255, 0.85);
+}
+
 /* ==========================================================================
    Global Styles
    ========================================================================== */
diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/theme.js
index da6c65683ea..e12b4794100 100644
--- a/src_assets/common/assets/web/theme.js
+++ b/src_assets/common/assets/web/theme.js
@@ -16,6 +16,7 @@ const darkThemes = new Set([
     'dracula',
     'ember',
     'midnight',
+    'mocha',
     'moonlight',
     'nord',
     'slate',

From 4d9a57f4ef230eeb9fe07a407b388a3bea876c21 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 18:42:49 +1000
Subject: [PATCH 12/25] feat(web-ui): Added `Rose` themes and updated `Ember`
 theme to use proper palette from `ember`

- Moved some of the theme buttons to be in-line with eachother
---
 src_assets/common/assets/web/ThemeToggle.vue  |  35 ++-
 .../assets/web/public/assets/locale/en.json   |   3 +
 src_assets/common/assets/web/sunshine.css     | 205 +++++++++++++++---
 src_assets/common/assets/web/theme.js         |   1 +
 4 files changed, 198 insertions(+), 46 deletions(-)

diff --git a/src_assets/common/assets/web/ThemeToggle.vue b/src_assets/common/assets/web/ThemeToggle.vue
index 6e63cd86c3b..b2bb6b01a79 100644
--- a/src_assets/common/assets/web/ThemeToggle.vue
+++ b/src_assets/common/assets/web/ThemeToggle.vue
@@ -17,8 +17,11 @@ import {
   Moon,
   Mountain,
   Sparkles,
+  Sprout,
   Sun,
   Sunrise,
+  Sunset,
+  TreePine,
   Trees,
   Waves,
 } from '@lucide/vue'
@@ -64,22 +67,26 @@ onMounted(() => {
           <Coffee :size="18" class="theme-icon icon"></Coffee>
           {{ $t('navbar.theme_mocha') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
-          <Layers :size="18" class="theme-icon icon"></Layers>
-          {{ $t('navbar.theme_slate') }}
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember" aria-pressed="false">
+          <Flame :size="18" class="theme-icon icon"></Flame>
+          {{ $t('navbar.theme_ember') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine" aria-pressed="false">
+          <TreePine :size="18" class="theme-icon icon"></TreePine>
+          {{ $t('navbar.theme_rose_pine') }}
         </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="moonlight" aria-pressed="false">
           <CloudMoon :size="18" class="theme-icon icon"></CloudMoon>
           {{ $t('navbar.theme_moonlight') }}
         </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="slate" aria-pressed="false">
+          <Layers :size="18" class="theme-icon icon"></Layers>
+          {{ $t('navbar.theme_slate') }}
+        </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="midnight" aria-pressed="false">
           <CloudRain :size="18" class="theme-icon icon"></CloudRain>
           {{ $t('navbar.theme_midnight') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember" aria-pressed="false">
-          <Flame :size="18" class="theme-icon icon"></Flame>
-          {{ $t('navbar.theme_ember') }}
-        </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="nord" aria-pressed="false">
           <Mountain :size="18" class="theme-icon icon"></Mountain>
           {{ $t('navbar.theme_nord') }}
@@ -100,14 +107,22 @@ onMounted(() => {
           <Milk :size="18" class="theme-icon icon"></Milk>
           {{ $t('navbar.theme_latte') }}
         </button>
-        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
-          <Sparkles :size="18" class="theme-icon icon"></Sparkles>
-          {{ $t('navbar.theme_indigo') }}
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ember-light" aria-pressed="false">
+          <Sunset :size="18" class="theme-icon icon"></Sunset>
+          {{ $t('navbar.theme_ember_light') }}
+        </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="rose-pine-dawn" aria-pressed="false">
+          <Sprout :size="18" class="theme-icon icon"></Sprout>
+          {{ $t('navbar.theme_rose_pine_dawn') }}
         </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="sunshine" aria-pressed="false">
           <Sunrise :size="18" class="theme-icon icon"></Sunrise>
           {{ $t('navbar.theme_sunshine') }}
         </button>
+        <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="indigo" aria-pressed="false">
+          <Sparkles :size="18" class="theme-icon icon"></Sparkles>
+          {{ $t('navbar.theme_indigo') }}
+        </button>
         <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="ocean" aria-pressed="false">
           <Waves :size="18" class="theme-icon icon"></Waves>
           {{ $t('navbar.theme_ocean') }}
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index 758f2230970..ab67b94d52b 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -443,6 +443,7 @@
     "theme_dark": "Dark",
     "theme_dracula": "Dracula",
     "theme_ember": "Ember",
+    "theme_ember_light": "Ember Light",
     "theme_forest": "Forest",
     "theme_group_dark": "Dark Themes",
     "theme_group_light": "Light Themes",
@@ -457,6 +458,8 @@
     "theme_nord": "Nord",
     "theme_ocean": "Ocean",
     "theme_rose": "Rose",
+    "theme_rose_pine": "Rosé Pine",
+    "theme_rose_pine_dawn": "Rosé Pine Dawn",
     "theme_slate": "Slate",
     "theme_sunshine": "Sunshine",
     "toggle_theme": "Theme",
diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 23b1e4c1b43..daac698f701 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -95,43 +95,48 @@
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
 }
 
-/* Ember Theme - Warm dark with orange/red accents */
+/* Ember Theme - https://github.com/ember-theme/ember */
 [data-theme="ember"] {
-    --color-primary: #F97316;
-    --color-primary-hover: #FB923C;
-    --color-primary-light: #7C2D12;
-    --color-accent: #EF4444;
-    --color-accent-hover: #F87171;
-    --color-accent-light: #7F1D1D;
-    --color-success: #34D399;
-    --color-success-hover: #6EE7B7;
-    --color-success-light: #064E3B;
-    --color-danger: #DC2626;
-    --color-danger-hover: #EF4444;
-    --color-danger-light: #7F1D1D;
-    --color-warning: #F59E0B;
-    --color-warning-hover: #FBBF24;
-    --color-warning-light: #78350F;
-    --color-info: #60A5FA;
-    --color-info-hover: #93C5FD;
-    --color-info-light: #1E3A8A;
-
-    --color-bg-base: #1C1917;
-    --color-bg-subtle: #292524;
-    --color-bg-muted: #44403C;
-    --color-surface: #292524;
-    --color-surface-raised: #44403C;
-
-    --color-border: #57534E;
-    --color-border-strong: #78716C;
-
-    --color-text-base: #FEF3C7;
-    --color-text-muted: #FDE68A;
-    --color-text-subtle: #FCD34D;
-
-    --navbar-bg: linear-gradient(135deg, #7C2D12 0%, #9A3412 50%, #C2410C 100%);
-    --navbar-text: #FEF3C7;
-    --navbar-text-muted: rgba(254, 243, 199, 0.8);
+    --color-primary: #E08060;
+    --color-primary-hover: #E7A088;
+    --color-primary-light: #452217;
+    --color-accent: #C09058;
+    --color-accent-hover: #CEA87E;
+    --color-accent-light: #392A18;
+    --color-success: #8A9868;
+    --color-success-hover: #9DAB7C;
+    --color-success-light: #292E1F;
+    --color-danger: #B07878;
+    --color-danger-hover: #C28E8E;
+    --color-danger-light: #381E1E;
+    --color-warning: #C8B468;
+    --color-warning-hover: #D9C98C;
+    --color-warning-light: #393318;
+    --color-info: #7890A0;
+    --color-info-hover: #92AAB9;
+    --color-info-light: #1F2B33;
+
+    --color-on-primary: #282418;
+    --color-on-success: #282418;
+    --color-on-danger: #282418;
+    --color-on-info: #282418;
+
+    --color-bg-base: #1C1B19;
+    --color-bg-subtle: #242320;
+    --color-bg-muted: #33302B;
+    --color-surface: #242320;
+    --color-surface-raised: #33302B;
+
+    --color-border: #45413B;
+    --color-border-strong: #5C574F;
+
+    --color-text-base: #D8D0C0;
+    --color-text-muted: #B0A48D;
+    --color-text-subtle: #93866C;
+
+    --navbar-bg: linear-gradient(135deg, #D06A4C 0%, #C87D52 50%, #C09058 100%);
+    --navbar-text: #282418;
+    --navbar-text-muted: rgba(40, 36, 24, 0.72);
 
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
@@ -412,6 +417,54 @@
     --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
 }
 
+/* Rosé Pine Theme - https://rosepinetheme.com */
+[data-theme="rose-pine"] {
+    --color-primary: #c4a7e7;
+    --color-primary-hover: #d0b8ec;
+    --color-primary-light: #2e2640;
+    --color-accent: #ebbcba;
+    --color-accent-hover: #efc9c8;
+    --color-accent-light: #3a2b2f;
+    --color-success: #31748f;
+    --color-success-hover: #3a87a5;
+    --color-success-light: #1b2e36;
+    --color-danger: #eb6f92;
+    --color-danger-hover: #ef85a3;
+    --color-danger-light: #3a2530;
+    --color-warning: #f6c177;
+    --color-warning-hover: #f8cd90;
+    --color-warning-light: #3a3020;
+    --color-info: #9ccfd8;
+    --color-info-hover: #b0d8df;
+    --color-info-light: #1f2e30;
+
+    --color-on-primary: #191724;
+    --color-on-danger: #191724;
+    --color-on-info: #191724;
+
+    --color-bg-base: #191724;
+    --color-bg-subtle: #1f1d2e;
+    --color-bg-muted: #26233a;
+    --color-surface: #1f1d2e;
+    --color-surface-raised: #26233a;
+
+    --color-border: #403d52;
+    --color-border-strong: #524f67;
+
+    --color-text-base: #e0def4;
+    --color-text-muted: #908caa;
+    --color-text-subtle: #6e6a86;
+
+    --navbar-bg: linear-gradient(135deg, #c4a7e7 0%, #ebbcba 100%);
+    --navbar-text: #191724;
+    --navbar-text-muted: rgba(25, 23, 36, 0.75);
+
+    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
+}
+
 /* ==========================================================================
    Light Themes
    ========================================================================== */
@@ -811,6 +864,86 @@
     --navbar-text-muted: rgba(255, 255, 255, 0.85);
 }
 
+/* Ember Light Theme - https://github.com/ember-theme/ember */
+[data-theme="ember-light"] {
+    --color-primary: #B84C30;
+    --color-primary-hover: #993F28;
+    --color-primary-light: #F1DDD5;
+    --color-accent: #946030;
+    --color-accent-hover: #7B5028;
+    --color-accent-light: #ECE0D1;
+    --color-success: #4A6830;
+    --color-success-hover: #3D5628;
+    --color-success-light: #DDE5D3;
+    --color-danger: #905050;
+    --color-danger-hover: #784242;
+    --color-danger-light: #ECDCDC;
+    --color-warning: #7A6820;
+    --color-warning-hover: #65561B;
+    --color-warning-light: #EBE5D0;
+    --color-info: #3A6080;
+    --color-info-hover: #30506A;
+    --color-info-light: #D8E0E8;
+
+    --color-on-warning: #fff;
+
+    --color-bg-base: #E6DAC4;
+    --color-bg-subtle: #DCCFB6;
+    --color-bg-muted: #CEBF9F;
+    --color-surface: #F2EAD9;
+    --color-surface-raised: #F2EAD9;
+
+    --color-border: #CABD9C;
+    --color-border-strong: #A89C7A;
+
+    --color-text-base: #282418;
+    --color-text-muted: #6C664B;
+    --color-text-subtle: #8A8264;
+
+    --navbar-bg: linear-gradient(135deg, #B84C30 0%, #A5562C 50%, #946030 100%);
+    --navbar-text: #FFFFFF;
+    --navbar-text-muted: rgba(255, 255, 255, 0.85);
+}
+
+/* Rosé Pine Dawn Theme - https://rosepinetheme.com */
+[data-theme="rose-pine-dawn"] {
+    --color-primary: #907aa9;
+    --color-primary-hover: #7d6795;
+    --color-primary-light: #ece5f0;
+    --color-accent: #d7827e;
+    --color-accent-hover: #c66f6b;
+    --color-accent-light: #f7e6e4;
+    --color-success: #286983;
+    --color-success-hover: #20586e;
+    --color-success-light: #d6e4e9;
+    --color-danger: #b4637a;
+    --color-danger-hover: #9d5269;
+    --color-danger-light: #f1dde2;
+    --color-warning: #ea9d34;
+    --color-warning-hover: #d18a26;
+    --color-warning-light: #fbedd4;
+    --color-info: #56949f;
+    --color-info-hover: #487e88;
+    --color-info-light: #ddeaec;
+
+    --color-bg-base: #faf4ed;
+    --color-bg-subtle: #f2e9e1;
+    --color-bg-muted: #e9ded3;
+    --color-surface: #fffaf3;
+    --color-surface-raised: #fffaf3;
+
+    --color-border: #dfdad9;
+    --color-border-strong: #cecacd;
+
+    --color-text-base: #575279;
+    --color-text-muted: #797593;
+    --color-text-subtle: #9893a5;
+
+    --navbar-bg: linear-gradient(135deg, #907aa9 0%, #d7827e 100%);
+    --navbar-text: #ffffff;
+    --navbar-text-muted: rgba(255, 255, 255, 0.85);
+}
+
 /* ==========================================================================
    Global Styles
    ========================================================================== */
diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/theme.js
index e12b4794100..a88ebd4f13b 100644
--- a/src_assets/common/assets/web/theme.js
+++ b/src_assets/common/assets/web/theme.js
@@ -19,6 +19,7 @@ const darkThemes = new Set([
     'mocha',
     'moonlight',
     'nord',
+    'rose-pine',
     'slate',
 ])
 

From 4a6f569fba8cdc99a0f84df70d3f5282d8a6a511 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 20:17:33 +1000
Subject: [PATCH 13/25] fix(web-ui): Added linear gradient for Dracula /
 Alucard

---
 src_assets/common/assets/web/sunshine.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index daac698f701..39ac062abf0 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -358,7 +358,7 @@
     --color-text-muted: #6272A4;
     --color-text-subtle: #6272A4;
 
-    --navbar-bg: #44475A;
+    --navbar-bg: linear-gradient(135deg, #282A36 0%, #2D3140 50%, #343746 100%);
     --navbar-text: #F8F8F2;
     --navbar-text-muted: rgba(248, 248, 242, 0.7);
 
@@ -820,7 +820,7 @@
     --color-text-muted: #6C664B;
     --color-text-subtle: #6C664B;
 
-    --navbar-bg: #CFCFDE;
+    --navbar-bg: linear-gradient(135deg, #F7F7F7 0%, #F2F1F8 60%, #ECEAF6 100%);
     --navbar-text: #1F1F1F;
     --navbar-text-muted: rgba(31, 31, 31, 0.7);
 }

From f880ab2cb2425dc49e7c2d7e06cf8660cfc73a01 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 22:57:11 +1000
Subject: [PATCH 14/25] fix(web-ui): Add navbar gradients to new themes +
 default

---
 src_assets/common/assets/web/sunshine.css | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 39ac062abf0..fd8b6fd31a9 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -85,7 +85,7 @@
     --color-text-muted: #adb5bd;
     --color-text-subtle: #6c757d;
 
-    --navbar-bg: #ffc400;
+    --navbar-bg: linear-gradient(135deg, #ffc400 0%, #ff9d00 100%);
     --navbar-text: #594400;
     --navbar-text-muted: #7f6100;
 
@@ -358,9 +358,9 @@
     --color-text-muted: #6272A4;
     --color-text-subtle: #6272A4;
 
-    --navbar-bg: linear-gradient(135deg, #282A36 0%, #2D3140 50%, #343746 100%);
-    --navbar-text: #F8F8F2;
-    --navbar-text-muted: rgba(248, 248, 242, 0.7);
+    --navbar-bg: linear-gradient(135deg, #A98FD8 0%, #C792BB 100%);
+    --navbar-text: #282A36;
+    --navbar-text-muted: rgba(40, 42, 54, 0.7);
 
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
@@ -407,7 +407,7 @@
     --color-text-muted: #a6adc8;
     --color-text-subtle: #7f849c;
 
-    --navbar-bg: #cba6f7;
+    --navbar-bg: linear-gradient(135deg, #c9aae8 0%, #e3bdd8 100%);
     --navbar-text: #1e1e2e;
     --navbar-text-muted: rgba(30, 30, 46, 0.75);
 
@@ -505,7 +505,7 @@
     --color-text-muted: #6c757d;
     --color-text-subtle: #adb5bd;
 
-    --navbar-bg: #ffc400;
+    --navbar-bg: linear-gradient(135deg, #ffc400 0%, #ff9d00 100%);
     --navbar-text: #594400;
     --navbar-text-muted: #7f6100;
 }
@@ -820,9 +820,9 @@
     --color-text-muted: #6C664B;
     --color-text-subtle: #6C664B;
 
-    --navbar-bg: linear-gradient(135deg, #F7F7F7 0%, #F2F1F8 60%, #ECEAF6 100%);
-    --navbar-text: #1F1F1F;
-    --navbar-text-muted: rgba(31, 31, 31, 0.7);
+    --navbar-bg: linear-gradient(135deg, #6A5AA8 0%, #8A4F77 100%);
+    --navbar-text: #ffffff;
+    --navbar-text-muted: rgba(255, 255, 255, 0.85);
 }
 
 /* Catppuccin Latte - https://github.com/catppuccin/catppuccin */
@@ -859,7 +859,7 @@
     --color-text-muted: #6c6f85;
     --color-text-subtle: #8c8fa1;
 
-    --navbar-bg: #8839ef;
+    --navbar-bg: linear-gradient(135deg, #7b47d0 0%, #4257c2 100%);
     --navbar-text: #ffffff;
     --navbar-text-muted: rgba(255, 255, 255, 0.85);
 }

From 7f89fd632facbce8224554e7671c3f1e1c827ae3 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 23:06:40 +1000
Subject: [PATCH 15/25] fix(web-ui): replaced pulse animation with `colour-mix`

- Apparently `color-mix` is widely available to use now, so used this instead of setting keyframes
---
 src_assets/common/assets/web/sunshine.css | 19 ++-----------------
 1 file changed, 2 insertions(+), 17 deletions(-)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index fd8b6fd31a9..5a79d29489f 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -2036,23 +2036,8 @@ p {
         box-shadow: none;
     }
     20%, 80% {
-        background-color: rgba(255, 215, 0, 0.4);
-        box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.6);
-    }
-}
-
-[data-bs-theme="dark"] .config-search-highlight {
-    animation: highlightPulseDark 5s ease-in-out;
-}
-
-@keyframes highlightPulseDark {
-    0%, 100% {
-        background-color: transparent;
-        box-shadow: none;
-    }
-    20%, 80% {
-        background-color: rgba(255, 215, 0, 0.3);
-        box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.5);
+        background-color: color-mix(in srgb, var(--color-warning) 35%, transparent);
+        box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning) 55%, transparent);
     }
 }
 

From 1228f32d1b271a210753ba221b39e572c521d2a2 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 23:08:20 +1000
Subject: [PATCH 16/25] feat(web-ui): Added a `Random` button to select a
 random theme

---
 src_assets/common/assets/web/ThemeToggle.vue  |  5 ++++
 .../assets/web/public/assets/locale/en.json   |  1 +
 src_assets/common/assets/web/sunshine.css     |  6 +++++
 src_assets/common/assets/web/theme.js         | 26 ++++++++++++++-----
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src_assets/common/assets/web/ThemeToggle.vue b/src_assets/common/assets/web/ThemeToggle.vue
index b2bb6b01a79..0bddebf84c3 100644
--- a/src_assets/common/assets/web/ThemeToggle.vue
+++ b/src_assets/common/assets/web/ThemeToggle.vue
@@ -16,6 +16,7 @@ import {
   MonitorSmartphone,
   Moon,
   Mountain,
+  Shuffle,
   Sparkles,
   Sprout,
   Sun,
@@ -51,6 +52,10 @@ onMounted(() => {
           <MonitorSmartphone :size="18" class="theme-icon icon"></MonitorSmartphone>
           {{ $t('navbar.theme_auto') }}
         </button>
+        <button type="button" id="bd-theme-random" class="dropdown-item d-flex align-items-center">
+          <Shuffle :size="18" class="theme-icon icon"></Shuffle>
+          {{ $t('navbar.theme_random') }}
+        </button>
       </li>
       <!-- Dark Themes -->
       <li class="theme-menu-group">
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index ab67b94d52b..287c5a55068 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -457,6 +457,7 @@
     "theme_moonlight": "Moonlight",
     "theme_nord": "Nord",
     "theme_ocean": "Ocean",
+    "theme_random": "Random",
     "theme_rose": "Rose",
     "theme_rose_pine": "Rosé Pine",
     "theme_rose_pine_dawn": "Rosé Pine Dawn",
diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 5a79d29489f..87caf3b67b3 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -1977,6 +1977,12 @@ p {
 
 .theme-menu-full {
     grid-column: 1 / -1;
+    display: flex;
+    gap: var(--spacing-sm);
+}
+
+.theme-menu-full .dropdown-item {
+    flex: 1;
 }
 
 .theme-menu .dropdown-header {
diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/theme.js
index a88ebd4f13b..c74cc2c9762 100644
--- a/src_assets/common/assets/web/theme.js
+++ b/src_assets/common/assets/web/theme.js
@@ -81,17 +81,31 @@ export const showActiveTheme = (theme, focus = false) => {
     }
 }
 
+const applyTheme = theme => {
+    setStoredTheme(theme)
+    setTheme(theme)
+    showActiveTheme(theme, true)
+}
+
+const pickRandomTheme = () => {
+    const current = getStoredTheme()
+    const values = Array.from(document.querySelectorAll('[data-bs-theme-value]'))
+        .map(el => el.getAttribute('data-bs-theme-value'))
+        .filter(value => value !== 'auto' && value !== current)
+    return values[Math.floor(Math.random() * values.length)]
+}
+
 export function setupThemeToggleListener() {
     document.querySelectorAll('[data-bs-theme-value]')
         .forEach(toggle => {
-            toggle.addEventListener('click', () => {
-                const theme = toggle.getAttribute('data-bs-theme-value')
-                setStoredTheme(theme)
-                setTheme(theme)
-                showActiveTheme(theme, true)
-            })
+            toggle.addEventListener('click', () => applyTheme(toggle.getAttribute('data-bs-theme-value')))
         })
 
+    const randomToggle = document.querySelector('#bd-theme-random')
+    if (randomToggle) {
+        randomToggle.addEventListener('click', () => applyTheme(pickRandomTheme()))
+    }
+
     showActiveTheme(getPreferredTheme(), false)
 }
 

From fdd3c85ae58e4ce70a9ee715b41a6bb8be8fd903 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sat, 30 May 2026 23:22:55 +1000
Subject: [PATCH 17/25] fix(web-ui): Added badge theme overriding

---
 src_assets/common/assets/web/sunshine.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 0e236ed68f2..4506759ac2c 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -1395,6 +1395,20 @@ p {
     vertical-align: text-bottom;
 }
 
+/* ==========================================================================
+   Badge Styles
+   ========================================================================== */
+
+.badge.bg-primary {
+    background-color: var(--color-primary) !important;
+    color: var(--color-on-primary) !important;
+}
+
+.badge.bg-secondary {
+    background-color: var(--color-bg-muted) !important;
+    color: var(--color-text-base) !important;
+}
+
 /* ==========================================================================
    Form Styles
    ========================================================================== */

From aa29109340e6f682f0185ef618863b1d4b2dc97c Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sun, 31 May 2026 00:01:31 +1000
Subject: [PATCH 18/25] fix(web-ui): Created toolbar styling for `apps` /
 `featured` pages

---
 src_assets/common/assets/web/apps.html     |  2 +-
 src_assets/common/assets/web/featured.html |  2 +-
 src_assets/common/assets/web/sunshine.css  | 20 ++++++++++++++++----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html
index f963f57568d..c35c61218d6 100644
--- a/src_assets/common/assets/web/apps.html
+++ b/src_assets/common/assets/web/apps.html
@@ -14,7 +14,7 @@ <h1>{{ $t('apps.applications_title') }}<span v-if="apps.length"> ({{ appCountLab
     </div>
 
     <!-- Actions toolbar -->
-    <div class="apps-toolbar d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
+    <div class="toolbar apps-toolbar d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
       <!-- Left side actions -->
       <div class="d-flex align-items-center gap-2">
         <!-- Add new application -->
diff --git a/src_assets/common/assets/web/featured.html b/src_assets/common/assets/web/featured.html
index 662fe987e13..2a440334229 100644
--- a/src_assets/common/assets/web/featured.html
+++ b/src_assets/common/assets/web/featured.html
@@ -14,7 +14,7 @@ <h1>{{ $t('featured.title') }}</h1>
     </div>
 
     <!-- Category Filter -->
-    <div class="mb-4">
+    <div class="toolbar mb-4">
       <div class="btn-group" role="group" aria-label="Category filter">
         <button
           type="button"
diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 4506759ac2c..9773180a413 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -1409,6 +1409,22 @@ p {
     color: var(--color-text-base) !important;
 }
 
+/* ==========================================================================
+   Toolbar Styles
+   ========================================================================== */
+
+.toolbar {
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-sm);
+    padding: var(--spacing-md);
+}
+
+.apps-toolbar .input-group {
+    width: 14rem;
+}
+
 /* ==========================================================================
    Form Styles
    ========================================================================== */
@@ -2120,10 +2136,6 @@ p {
     align-items: center;
 }
 
-.apps-toolbar .input-group {
-    width: 14rem;
-}
-
 /* ==========================================================================
    Featured Apps Page Styles
    ========================================================================== */

From f9879b5e647068eeb6dca13ebad5d2a67d759554 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sun, 31 May 2026 00:06:20 +1000
Subject: [PATCH 19/25] feat(web-ui): Added description to configuration (WIP)

- Felt odd not having any text on this page like the others...
---
 src_assets/common/assets/web/config.html                  | 5 ++++-
 src_assets/common/assets/web/public/assets/locale/en.json | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index 27d84205dc4..fa56c1cee50 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -8,7 +8,10 @@
 <body id="app" v-cloak>
   <Navbar></Navbar>
   <div class="container">
-    <h1 class="my-4">{{ $t('config.configuration') }}</h1>
+    <div class="my-4">
+      <h1>{{ $t('config.configuration') }}</h1>
+      <p>{{ $t('config.configuration_desc') }}</p>
+    </div>
 
     <!-- Search Bar with Autocomplete -->
     <div class="mb-3">
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index 2e8c884990d..4e3acf581bf 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -169,6 +169,7 @@
     "coder_cabac": "cabac -- context adaptive binary arithmetic coding - higher quality",
     "coder_cavlc": "cavlc -- context adaptive variable-length coding - faster decode",
     "configuration": "Configuration",
+    "configuration_desc": "Configure Sunshine's host settings to match your streaming setup.",
     "controller": "Enable Gamepad Input",
     "controller_desc": "Allows guests to control the host system with a gamepad / controller",
     "credentials_file": "Credentials File",

From 3e61a6d20ae03dc653b86bc868f2248445d6ff44 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sun, 31 May 2026 11:28:19 +1000
Subject: [PATCH 20/25] feat(web-ui): Re-styled the settings tabs to be a
 vertical column instead of headers

- Created column-based layout, including a split out for General / Encoder tabs
- Shortened in-line search to display count
---
 src_assets/common/assets/web/config.html      | 94 ++++++++++++-------
 .../assets/web/public/assets/locale/en.json   |  1 +
 src_assets/common/assets/web/sunshine.css     | 90 +++++++++++++++++-
 3 files changed, 150 insertions(+), 35 deletions(-)

diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index fa56c1cee50..45635dffce9 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -14,8 +14,8 @@ <h1>{{ $t('config.configuration') }}</h1>
     </div>
 
     <!-- Search Bar with Autocomplete -->
-    <div class="mb-3">
-      <div class="input-group">
+    <div class="toolbar mb-3 d-flex flex-wrap align-items-center gap-3">
+      <div class="input-group config-search">
         <span class="input-group-text">
           <search :size="18" class="icon"></search>
         </span>
@@ -33,25 +33,60 @@ <h1>{{ $t('config.configuration') }}</h1>
           {{ option.tab }} - {{ option.label }}
         </option>
       </datalist>
-      <div v-if="searchQuery && searchResults.length === 0" class="text-muted small mt-1">
+      <span v-if="searchQuery && searchResults.length === 0" class="text-muted small flex-shrink-0">
         No results found for "{{ searchQuery }}"
-      </div>
-      <div v-else-if="searchQuery" class="text-muted small mt-1">
+      </span>
+      <span v-else-if="searchQuery" class="text-muted small flex-shrink-0">
         Found {{ searchResults.length }} result(s)
-      </div>
+      </span>
     </div>
 
     <div class="form" v-if="config">
-      <!-- Header -->
-      <ul class="nav nav-tabs">
-        <li class="nav-item" v-for="tab in tabs" :key="tab.id">
-          <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
-            @click="currentTab = tab.id">
-            <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
-            {{tab.name}}
-          </a>
-        </li>
-      </ul>
+      <div class="config-layout">
+        <!-- Sidebar navigation -->
+        <nav class="config-nav">
+          <ul class="nav config-nav-list">
+            <li class="nav-item" v-for="tab in generalTabs" :key="tab.id">
+              <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
+                @click="currentTab = tab.id">
+                <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+                {{tab.name}}
+              </a>
+            </li>
+          </ul>
+          <template v-if="encoderTabs.length">
+            <div class="config-nav-heading">{{ $t('config.encoders') }}</div>
+            <ul class="nav config-nav-list">
+              <li class="nav-item" v-for="tab in encoderTabs" :key="tab.id">
+                <a class="nav-link" :class="{'active': tab.id === currentTab}" href="#"
+                  @click="currentTab = tab.id">
+                  <component :is="getTabIcon(tab.id)" :size="18" class="icon"></component>
+                  {{tab.name}}
+                </a>
+              </li>
+            </ul>
+          </template>
+
+          <div class="config-actions">
+            <button class="btn btn-primary" @click="save">
+              <save :size="18" class="icon"></save>
+              {{ $t('_common.save') }}
+            </button>
+            <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
+              <check :size="18" class="icon"></check>
+              {{ $t('_common.apply') }}
+            </button>
+          </div>
+        </nav>
+
+        <!-- Tab content -->
+        <div class="config-content">
+          <div class="alert alert-success mb-4" v-if="saved && !restarted">
+            <b>{{ $t('_common.success') }}</b> {{ $t('config.apply_note') }}
+          </div>
+          <div class="alert alert-success mb-4" v-if="restarted">
+            <b>{{ $t('_common.success') }}</b> {{ $t('config.restart_note') }}
+          </div>
 
       <!-- General Tab -->
       <general
@@ -101,25 +136,10 @@ <h1>{{ $t('config.configuration') }}</h1>
         :config="config"
         :platform="platform">
       </container-encoders>
+        </div>
+      </div>
     </div>
 
-    <!-- Save and Apply buttons -->
-    <div class="alert alert-success my-4" v-if="saved && !restarted">
-      <b>{{ $t('_common.success') }}</b> {{ $t('config.apply_note') }}
-    </div>
-    <div class="alert alert-success my-4" v-if="restarted">
-      <b>{{ $t('_common.success') }}</b> {{ $t('config.restart_note') }}
-    </div>
-    <div class="mb-3 d-flex gap-2 mt-4">
-      <button class="btn btn-primary" @click="save">
-        <save :size="18" class="icon"></save>
-        {{ $t('_common.save') }}
-      </button>
-      <button class="btn btn-success" @click="apply" v-if="saved && !restarted">
-        <check :size="18" class="icon"></check>
-        {{ $t('_common.apply') }}
-      </button>
-    </div>
   </div>
 </body>
 
@@ -151,6 +171,8 @@ <h1>{{ $t('config.configuration') }}</h1>
     Volume2,
   } from '@lucide/vue'
 
+  const ENCODER_TAB_IDS = ["nv", "amd", "qsv", "vaapi", "vt", "vulkan", "sw"];
+
   const app = createApp({
     components: {
       Navbar,
@@ -363,6 +385,12 @@ <h1>{{ $t('config.configuration') }}</h1>
        }
     },
     computed: {
+      generalTabs() {
+        return this.tabs.filter(tab => !ENCODER_TAB_IDS.includes(tab.id));
+      },
+      encoderTabs() {
+        return this.tabs.filter(tab => ENCODER_TAB_IDS.includes(tab.id));
+      },
       allConfigOptions() {
         const options = [];
         this.tabs.forEach(tab => {
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index 4e3acf581bf..2b098ec5ad7 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -224,6 +224,7 @@
     "encoder": "Force a Specific Encoder",
     "encoder_desc": "Force a specific encoder, otherwise Sunshine will select the best available option. Note: If you specify a hardware encoder on Windows, it must match the GPU where the display is connected.",
     "encoder_software": "Software",
+    "encoders": "Encoders",
     "external_ip": "External IP",
     "external_ip_desc": "If no external IP address is given, Sunshine will automatically detect external IP",
     "fec_percentage": "FEC Percentage",
diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 9773180a413..52f42f4117d 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -1425,6 +1425,10 @@ p {
     width: 14rem;
 }
 
+.config-search {
+    flex: 0 1 28rem;
+}
+
 /* ==========================================================================
    Form Styles
    ========================================================================== */
@@ -1551,12 +1555,94 @@ p {
     padding-bottom: var(--spacing-3xl);
 }
 
+.config-layout {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-lg);
+}
+
+.config-nav {
+    flex: 0 0 15rem;
+    position: sticky;
+    top: var(--spacing-lg);
+}
+
+.config-nav-list {
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.config-nav-list .nav-link {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-md);
+    border-radius: var(--radius-md);
+    color: var(--color-text-muted);
+    font-weight: 600;
+    transition: all var(--transition-fast);
+}
+
+.config-nav-list .nav-link:hover {
+    color: var(--color-text-base);
+    background-color: var(--color-bg-subtle);
+}
+
+.config-nav-list .nav-link.active {
+    color: var(--color-on-primary);
+    background-color: var(--color-primary);
+}
+
+.config-nav-heading {
+    margin: var(--spacing-md) var(--spacing-md) var(--spacing-xs);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--color-text-subtle);
+}
+
+.config-content {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.config-actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-lg);
+    padding-top: var(--spacing-lg);
+    border-top: 1px solid var(--color-border);
+}
+
+.config-actions .btn {
+    width: 100%;
+    justify-content: center;
+}
+
 .config-page {
     padding: var(--spacing-xl);
     background-color: var(--color-surface);
     border: 1px solid var(--color-border);
-    border-top: none;
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+    border-radius: var(--radius-lg);
+}
+
+@media (max-width: 768px) {
+    .config-layout {
+        flex-direction: column;
+    }
+
+    .config-nav {
+        position: static;
+        flex-basis: auto;
+        width: 100%;
+    }
+
+    .config-nav-list {
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
 }
 
 /* ==========================================================================

From cf86a807183944c1455b06010f42c539f77ac73d Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sun, 31 May 2026 12:15:43 +1000
Subject: [PATCH 21/25] fix(web-ui): Fixed sonarqube issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Prefer `.dataset` over `getAttribute(…)`
- `ENCODER_TAB_IDS` should be a `Set`, and use `ENCODER_TAB_IDS.has()` to check existence or non-existence.
---
 src_assets/common/assets/web/config.html | 6 +++---
 src_assets/common/assets/web/theme.js    | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src_assets/common/assets/web/config.html b/src_assets/common/assets/web/config.html
index 45635dffce9..0b10f246b5e 100644
--- a/src_assets/common/assets/web/config.html
+++ b/src_assets/common/assets/web/config.html
@@ -171,7 +171,7 @@ <h1>{{ $t('config.configuration') }}</h1>
     Volume2,
   } from '@lucide/vue'
 
-  const ENCODER_TAB_IDS = ["nv", "amd", "qsv", "vaapi", "vt", "vulkan", "sw"];
+  const ENCODER_TAB_IDS = new Set(["nv", "amd", "qsv", "vaapi", "vt", "vulkan", "sw"]);
 
   const app = createApp({
     components: {
@@ -386,10 +386,10 @@ <h1>{{ $t('config.configuration') }}</h1>
     },
     computed: {
       generalTabs() {
-        return this.tabs.filter(tab => !ENCODER_TAB_IDS.includes(tab.id));
+        return this.tabs.filter(tab => !ENCODER_TAB_IDS.has(tab.id));
       },
       encoderTabs() {
-        return this.tabs.filter(tab => ENCODER_TAB_IDS.includes(tab.id));
+        return this.tabs.filter(tab => ENCODER_TAB_IDS.has(tab.id));
       },
       allConfigOptions() {
         const options = [];
diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/theme.js
index c74cc2c9762..8782ffffa9b 100644
--- a/src_assets/common/assets/web/theme.js
+++ b/src_assets/common/assets/web/theme.js
@@ -90,7 +90,7 @@ const applyTheme = theme => {
 const pickRandomTheme = () => {
     const current = getStoredTheme()
     const values = Array.from(document.querySelectorAll('[data-bs-theme-value]'))
-        .map(el => el.getAttribute('data-bs-theme-value'))
+        .map(el => el.dataset.bsThemeValue)
         .filter(value => value !== 'auto' && value !== current)
     return values[Math.floor(Math.random() * values.length)]
 }
@@ -98,7 +98,7 @@ const pickRandomTheme = () => {
 export function setupThemeToggleListener() {
     document.querySelectorAll('[data-bs-theme-value]')
         .forEach(toggle => {
-            toggle.addEventListener('click', () => applyTheme(toggle.getAttribute('data-bs-theme-value')))
+            toggle.addEventListener('click', () => applyTheme(toggle.dataset.bsThemeValue))
         })
 
     const randomToggle = document.querySelector('#bd-theme-random')

From eeba0ea6dec9de549ca5f68f0d60f07c66904322 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sun, 31 May 2026 12:37:26 +1000
Subject: [PATCH 22/25] fix(web-ui): Added description to password page

---
 src_assets/common/assets/web/password.html                | 5 ++++-
 src_assets/common/assets/web/public/assets/locale/en.json | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/password.html b/src_assets/common/assets/web/password.html
index a86f11323f1..6464b3ebaa7 100644
--- a/src_assets/common/assets/web/password.html
+++ b/src_assets/common/assets/web/password.html
@@ -8,7 +8,10 @@
 <body id="app" v-cloak>
   <Navbar></Navbar>
   <div class="container">
-    <h1 class="my-4">{{ $t('password.password_change') }}</h1>
+    <div class="my-4">
+      <h1>{{ $t('password.password_change') }}</h1>
+      <p>{{ $t('password.password_change_desc') }}</p>
+    </div>
     <form @submit.prevent="save">
       <div class="card">
         <div class="card-body">
diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
index 2b098ec5ad7..918c33c876e 100644
--- a/src_assets/common/assets/web/public/assets/locale/en.json
+++ b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -481,6 +481,7 @@
     "new_creds": "New Credentials",
     "new_username_desc": "If not specified, the username will not change",
     "password_change": "Password Change",
+    "password_change_desc": "Update the username and password used to sign in to the Sunshine web UI. You'll need to sign in again after changing them.",
     "success_msg": "Password has been changed successfully! This page will reload soon, your browser will ask you for the new credentials."
   },
   "pin": {

From f486e5824184b61a57a400ac8a0356839538bcf0 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sun, 31 May 2026 13:02:57 +1000
Subject: [PATCH 23/25] fix(web-ui): added `color-on-xxx` for `latte` and `rose
 pine dawn`

---
 src_assets/common/assets/web/sunshine.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src_assets/common/assets/web/sunshine.css b/src_assets/common/assets/web/sunshine.css
index 52f42f4117d..ec47f517eb5 100644
--- a/src_assets/common/assets/web/sunshine.css
+++ b/src_assets/common/assets/web/sunshine.css
@@ -846,6 +846,8 @@
     --color-info-hover: #1a57d0;
     --color-info-light: #d7e2fd;
 
+    --color-on-success: #1a1a1a;
+
     --color-bg-base: #e6e9ef;
     --color-bg-subtle: #dce0e8;
     --color-bg-muted: #ccd0da;
@@ -926,6 +928,9 @@
     --color-info-hover: #487e88;
     --color-info-light: #ddeaec;
 
+    --color-on-primary: #191724;
+    --color-on-info: #191724;
+
     --color-bg-base: #faf4ed;
     --color-bg-subtle: #f2e9e1;
     --color-bg-muted: #e9ded3;

From d88f12c0c0cd0c49f74d5541ae84e021be644f2f Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sun, 31 May 2026 16:16:37 +1000
Subject: [PATCH 24/25] fix(web-ui): Added `NONSONAR` comment to unflag
 SonarQube

Co-authored-by: David Lane <42013603+ReenigneArcher@users.noreply.github.com>
---
 src_assets/common/assets/web/theme.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/theme.js
index 8782ffffa9b..ca6030033ae 100644
--- a/src_assets/common/assets/web/theme.js
+++ b/src_assets/common/assets/web/theme.js
@@ -92,7 +92,7 @@ const pickRandomTheme = () => {
     const values = Array.from(document.querySelectorAll('[data-bs-theme-value]'))
         .map(el => el.dataset.bsThemeValue)
         .filter(value => value !== 'auto' && value !== current)
-    return values[Math.floor(Math.random() * values.length)]
+    return values[Math.floor(Math.random() * values.length)]  // NONSONAR(javascript:S2245) random not used for cryptography here
 }
 
 export function setupThemeToggleListener() {

From d3471b7194d1b19999fec6afd9b86bfe5fbae310 Mon Sep 17 00:00:00 2001
From: Noklef <281545466+Noklef@users.noreply.github.com>
Date: Sun, 31 May 2026 16:38:20 +1000
Subject: [PATCH 25/25] fix(web-ui): `NON` -> `NO`

---
 src_assets/common/assets/web/theme.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src_assets/common/assets/web/theme.js b/src_assets/common/assets/web/theme.js
index ca6030033ae..b7e7c4437fe 100644
--- a/src_assets/common/assets/web/theme.js
+++ b/src_assets/common/assets/web/theme.js
@@ -92,7 +92,7 @@ const pickRandomTheme = () => {
     const values = Array.from(document.querySelectorAll('[data-bs-theme-value]'))
         .map(el => el.dataset.bsThemeValue)
         .filter(value => value !== 'auto' && value !== current)
-    return values[Math.floor(Math.random() * values.length)]  // NONSONAR(javascript:S2245) random not used for cryptography here
+    return values[Math.floor(Math.random() * values.length)]  // NOSONAR(javascript:S2245) random not used for cryptography here
 }
 
 export function setupThemeToggleListener() {