From e2fdf6cadbd816559b8c82546c2bc771a81ffa9e Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Wed, 19 Nov 2025 06:25:03 -0500
Subject: [PATCH] fix(theme): Missing header background color

---
 @tailwind-shared/theme-variants.css |  8 +++++++-
 web/src/store/theme.ts              | 25 ++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/@tailwind-shared/theme-variants.css b/@tailwind-shared/theme-variants.css
index a76ba4a87..25e8e3daa 100644
--- a/@tailwind-shared/theme-variants.css
+++ b/@tailwind-shared/theme-variants.css
@@ -81,7 +81,13 @@
   --color-header-text-secondary: var(--custom-header-text-secondary);
 }
 
-:root.has-custom-header-bg {
+:root.has-custom-header-bg,
+.has-custom-header-bg.Theme--black,
+.has-custom-header-bg.Theme--black.dark,
+.has-custom-header-bg.Theme--white,
+.has-custom-header-bg.Theme--white.dark,
+.has-custom-header-bg.Theme--gray,
+.has-custom-header-bg.Theme--azure {
   --header-background-color: var(--custom-header-background-color);
   --color-header-background: var(--custom-header-background-color);
   --header-gradient-start: var(--custom-header-gradient-start);
diff --git a/web/src/store/theme.ts b/web/src/store/theme.ts
index 94806c829..9ecf3807a 100644
--- a/web/src/store/theme.ts
+++ b/web/src/store/theme.ts
@@ -65,6 +65,12 @@ const DYNAMIC_VAR_KEYS = [
   '--custom-header-background-color',
   '--custom-header-gradient-start',
   '--custom-header-gradient-end',
+  '--header-background-color',
+  '--header-gradient-start',
+  '--header-gradient-end',
+  '--color-header-background',
+  '--color-header-gradient-start',
+  '--color-header-gradient-end',
   '--banner-gradient',
 ] as const;
 
@@ -202,9 +208,20 @@ export const useThemeStore = defineStore(
       }
 
       if (theme.value.bgColor) {
+        const gradientStart = hexToRgba(theme.value.bgColor, 0);
+        const gradientEnd = hexToRgba(theme.value.bgColor, 0.7);
+
         dynamicVars['--custom-header-background-color'] = theme.value.bgColor;
-        dynamicVars['--custom-header-gradient-start'] = hexToRgba(theme.value.bgColor, 0);
-        dynamicVars['--custom-header-gradient-end'] = hexToRgba(theme.value.bgColor, 0.7);
+        dynamicVars['--custom-header-gradient-start'] = gradientStart;
+        dynamicVars['--custom-header-gradient-end'] = gradientEnd;
+
+        // Apply the resolved values directly to ensure they override base theme vars
+        dynamicVars['--header-background-color'] = theme.value.bgColor;
+        dynamicVars['--header-gradient-start'] = gradientStart;
+        dynamicVars['--header-gradient-end'] = gradientEnd;
+        dynamicVars['--color-header-background'] = theme.value.bgColor;
+        dynamicVars['--color-header-gradient-start'] = gradientStart;
+        dynamicVars['--color-header-gradient-end'] = gradientEnd;
         customClasses.push('has-custom-header-bg');
       }
 
@@ -227,6 +244,8 @@ export const useThemeStore = defineStore(
           ...Array.from(document.querySelectorAll<HTMLElement>('.unapi')),
         ];
 
+        const styleTargets = [...scopedTargets, document.body].filter(Boolean) as HTMLElement[];
+
         const cleanClassList = (classList: string, isDocumentElement: boolean) => {
           // Don't remove Theme-- classes from documentElement if Unraid PHP set them
           if (isDocumentElement && hasExistingThemeClass) {
@@ -274,7 +293,7 @@ export const useThemeStore = defineStore(
         // All theme defaults are handled by classes in @tailwind-shared/theme-variants.css
         const activeDynamicKeys = Object.keys(dynamicVars) as DynamicVarKey[];
 
-        scopedTargets.forEach((target) => {
+        styleTargets.forEach((target) => {
           activeDynamicKeys.forEach((key) => {
             const value = dynamicVars[key];
             if (value !== undefined) {