Skip to content

fix: connect breaks default css of header #1155

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 20, 2025
Merged

fix: connect breaks default css of header #1155

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2169170
fix: use correct css variable for gradient color
Feb 20, 2025
d272a85
refatcor: rename gradient vars
Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 48 additions & 12 deletions web/store/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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%',
Expand All @@ -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;

Expand All @@ -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',
};
Expand Down Expand Up @@ -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
Expand All @@ -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 {
Expand All @@ -190,4 +226,4 @@ export const useThemeStore = defineStore('theme', () => {
// actions
setTheme,
};
});
});
Loading