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

* feat: fallback to real themes if colors not adequate

* lint

console/src/app/app.component.ts

@@ -235,6 +235,9 @@ export class AppComponent implements OnDestroy {
       const darkBackground = '#212224';
       const lightBackground = '#fafafa';
 
+      const darkText = '#ffffff';
+      const lightText = '#000000';
+
       this.themeService.savePrimaryColor(darkPrimary, true);
       this.themeService.savePrimaryColor(lightPrimary, false);
 
@@ -243,6 +246,9 @@ export class AppComponent implements OnDestroy {
 
       this.themeService.saveBackgroundColor(darkBackground, true);
       this.themeService.saveBackgroundColor(lightBackground, false);
+
+      this.themeService.saveTextColor(darkText, true);
+      this.themeService.saveTextColor(lightText, false);
     };
 
     setDefaultColors();
@@ -251,14 +257,20 @@ export class AppComponent implements OnDestroy {
       if (labelpolicy.policy) {
         this.labelpolicy = labelpolicy.policy;
 
+        const isDark = (color: string) => this.themeService.isDark(color);
+        const isLight = (color: string) => this.themeService.isLight(color);
+
         const darkPrimary = this.labelpolicy?.primaryColorDark || '#5282c1';
         const lightPrimary = this.labelpolicy?.primaryColor || '#5282c1';
 
         const darkWarn = this.labelpolicy?.warnColorDark || '#cd3d56';
         const lightWarn = this.labelpolicy?.warnColor || '#cd3d56';
 
-        const darkBackground = this.labelpolicy?.backgroundColorDark || '#212224';
-        const lightBackground = this.labelpolicy?.backgroundColor || '#fafafa';
+        let darkBackground = this.labelpolicy?.backgroundColorDark;
+        let lightBackground = this.labelpolicy?.backgroundColor;
+
+        let darkText = this.labelpolicy.fontColorDark;
+        let lightText = this.labelpolicy.fontColor;
 
         this.themeService.savePrimaryColor(darkPrimary, true);
         this.themeService.savePrimaryColor(lightPrimary, false);
@@ -266,8 +278,37 @@ export class AppComponent implements OnDestroy {
         this.themeService.saveWarnColor(darkWarn, true);
         this.themeService.saveWarnColor(lightWarn, false);
 
-        this.themeService.saveBackgroundColor(darkBackground, true);
-        this.themeService.saveBackgroundColor(lightBackground, false);
+        if (darkBackground && !isDark(darkBackground)) {
+          console.info(
+            `Background (${darkBackground}) is not dark enough for a dark theme. Falling back to zitadel background`,
+          );
+          darkBackground = '#212224';
+        }
+        this.themeService.saveBackgroundColor(darkBackground || '#212224', true);
+
+        if (lightBackground && !isLight(lightBackground)) {
+          console.info(
+            `Background (${lightBackground}) is not light enough for a light theme. Falling back to zitadel background`,
+          );
+          lightBackground = '#fafafa';
+        }
+        this.themeService.saveBackgroundColor(lightBackground || '#fafafa', false);
+
+        if (darkText && !isLight(darkText)) {
+          console.info(
+            `Text color (${darkText}) is not light enough for a dark theme. Falling back to zitadel's text color`,
+          );
+          darkText = '#ffffff';
+        }
+        this.themeService.saveTextColor(darkText || '#ffffff', true);
+
+        if (lightText && !isDark(lightText)) {
+          console.info(
+            `Text color (${lightText}) is not dark enough for a light theme. Falling back to zitadel's text color`,
+          );
+          lightText = '#000000';
+        }
+        this.themeService.saveTextColor(lightText || '#000000', false);
       }
     });
   }

console/src/app/services/theme.service.ts

@@ -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();
+  }
 }