andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-03 04:42:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): apply text color, fallback to zitadel themes if colors not adequate (#3087)

Browse Source 
* feat: fallback to real themes if colors not adequate

* lint
This commit is contained in:
Max Peintner
2022-01-21 16:08:32 +01:00
committed by GitHub
parent bca337319c
commit f485a52d9a
3 changed files with 94 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/services/theme.service.ts
+18 -5
View File
@@ -23,11 +23,8 @@ export class ThemeService {
}
public updateTheme(colors: Color[], type: string, theme: string): void {
colors.forEach(color => {
document.documentElement.style.setProperty(
`--theme-${theme}-${type}-${color.name}`,
color.hex,
);
colors.forEach((color) => {
document.documentElement.style.setProperty(`--theme-${theme}-${type}-${color.name}`, color.hex);
document.documentElement.style.setProperty(
`--theme-${theme}-${type}-contrast-${color.name}`,
color.darkContrast ? 'hsla(0, 0%, 0%, 0.87)' : '#ffffff',
@@ -50,6 +47,12 @@ export class ThemeService {
this.updateTheme(this.backgroundColorPalette, 'background', isDark ? 'dark' : 'light');
}
public saveTextColor(colorHex: string, isDark: boolean): void {
this.primaryColorPalette = this.computeColors(colorHex);
const theme = isDark ? 'dark' : 'light';
document.documentElement.style.setProperty(`--theme-${theme}-${'text'}`, colorHex);
}
private computeColors(hex: string): Color[] {
return [
this.getColorObject(tinycolor(hex).lighten(52), '50'),
@@ -77,4 +80,14 @@ export class ThemeService {
darkContrast: c.isLight(),
};
}
public isLight(hex: string): boolean {
const color = tinycolor(hex);
return color.isLight();
}
public isDark(hex: string): boolean {
const color = tinycolor(hex);
return color.isDark();
}
}