mirror/api
1
0
Fork 0
mirror of https://github.com/unraid/api.git synced 2025-12-31 13:39:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: connect breaks default css of header (#1155)

Browse Source 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced theme customization with new options for custom gradients,
delivering dynamic and visually cohesive banner effects.
- Improved header styling with refined color handling to adapt
seamlessly across both dark and light modes.
- Added new CSS variables for gradient management in theme definitions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: mdatelle <mike@datelle.net>
This commit is contained in:
Michael Datelle
2025-02-20 11:18:12 -05:00
committed by GitHub
parent 6084b9df93
commit fb2472399a
1 changed files with 48 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
web/store/theme.ts
View File

@@ -1,6 +1,6 @@
import hexToRgba from 'hex-to-rgba';
import { createPinia, defineStore, setActivePinia } from 'pinia';
import hexToRgba from 'hex-to-rgba';
/**
* @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
@@ -46,6 +46,8 @@ export const defaultColors: Record<string, ThemeVariables> = {
'--header-text-primary': '#1c1c1c',
'--header-text-secondary': '#999999',
'--header-background-color': '#f2f2f2',
'--gradient-start': 'rgba(0, 0, 0, 0)',
'--gradient-end': 'var(--header-background-color)',
},
light: {
'--background': '0 0% 100%',
@@ -71,6 +73,8 @@ export const defaultColors: Record<string, ThemeVariables> = {
'--header-text-primary': '#f2f2f2',
'--header-text-secondary': '#999999',
'--header-background-color': '#1c1b1b',
'--gradient-start': 'rgba(0, 0, 0, 0)',
'--gradient-end': 'var(--header-background-color)',
},
} as const;
@@ -82,7 +86,8 @@ export const defaultColors: Record<string, ThemeVariables> = {
* LIGHT THEMES: white, gray
* LIGHT HEADER THEMES: black, gray
*/
export const defaultAzureGrayHeaderColors: ThemeVariables = { // azure and gray header colors are the same but the background color is different
export const defaultAzureGrayHeaderColors: ThemeVariables = {
// azure and gray header colors are the same but the background color is different
'--header-text-primary': '#39587f',
'--header-text-secondary': '#606e7f',
};
@@ -128,8 +133,8 @@ export const useThemeStore = defineStore('theme', () => {
if (!theme.value?.banner || !theme.value?.bannerGradient) {
return undefined;
}
const start = theme.value?.bgColor ? 'var(--color-customgradient-start)' : 'rgba(0, 0, 0, 0)';
const end = theme.value?.bgColor ? 'var(--color-customgradient-end)' : 'var(--color-beta)';
const start = theme.value?.bgColor ? 'var(--gradient-start)' : 'rgba(0, 0, 0, 0)';
const end = theme.value?.bgColor ? 'var(--gradient-end)' : 'var(--header-background-color)';
return `background-image: linear-gradient(90deg, ${start} 0, ${end} 30%);`;
});
// Actions
@@ -151,23 +156,54 @@ export const useThemeStore = defineStore('theme', () => {
};
}
// Set banner gradient if enabled
if (theme.value?.banner && theme.value?.bannerGradient) {
const start = theme.value?.bgColor
? hexToRgba(theme.value.bgColor, 0)
: customColorVariables[selectedMode]['--gradient-start'];
const end = theme.value?.bgColor
? hexToRgba(theme.value.bgColor, 0.7)
: customColorVariables[selectedMode]['--gradient-end'];
body.style.setProperty('--banner-gradient', `linear-gradient(90deg, ${start} 0, ${end} 30%)`);
} else {
body.style.removeProperty('--banner-gradient');
}
// overwrite with hex colors set in webGUI @ /Settings/DisplaySettings
if (theme.value?.textColor) {
customColorVariables[selectedMode]['--header-text-primary'] = theme.value.textColor;
body.style.setProperty('--header-text-primary', theme.value.textColor);
} else {
body.style.setProperty(
'--header-text-primary',
customColorVariables[selectedMode]['--header-text-primary']
);
}
if (theme.value?.metaColor) {
customColorVariables[selectedMode]['--header-text-secondary'] = theme.value.metaColor;
body.style.setProperty('--header-text-secondary', theme.value.metaColor);
} else {
body.style.setProperty(
'--header-text-secondary',
customColorVariables[selectedMode]['--header-text-secondary']
);
}
if (theme.value?.bgColor) {
customColorVariables[selectedMode]['--header-background-color'] = theme.value.bgColor;
body.style.setProperty('--color-customgradient-start', hexToRgba(theme.value.bgColor, 0));
body.style.setProperty('--color-customgradient-end', hexToRgba(theme.value.bgColor, 0.7));
body.style.setProperty('--header-background-color', theme.value.bgColor);
body.style.setProperty('--gradient-start', hexToRgba(theme.value.bgColor, 0));
body.style.setProperty('--gradient-end', hexToRgba(theme.value.bgColor, 0.7));
} else {
body.style.setProperty(
'--header-background-color',
customColorVariables[selectedMode]['--header-background-color']
);
}
// Apply all other CSS variables
Object.entries(customColorVariables[selectedMode]).forEach(([key, value]) => {
body.style.setProperty(key, value);
if (!key.startsWith('--header-')) {
body.style.setProperty(key, value);
}
});
if (darkMode.value) {
document.body.classList.add('dark');
} else {
@@ -190,4 +226,4 @@ export const useThemeStore = defineStore('theme', () => {
// actions
setTheme,
};
});
});