mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2026-01-05 16:09:49 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(theme): Missing header background color

Browse Source
This commit is contained in:
Eli Bosley
2025-11-19 06:25:03 -05:00
parent 3d4f193fa4
commit e2fdf6cadb
2 changed files with 29 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
@tailwind-shared/theme-variants.css
View File

@@ -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);

25
web/src/store/theme.ts
View File

@@ -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) {