fix(console): improve project counters, dark primary color change, smaller UI improvements (#4620)

* dark primary color change, project counter, link color improvements

* update fallback colors

* fallback colors

Co-authored-by: Livio Spring <livio.a@gmail.com>

cmd/defaults.yaml

@@ -226,8 +226,6 @@ SAML:
     #  Company: ZITADEL
     #  EmailAddress: hi@zitadel.com
 
-
-
 Login:
   LanguageCookieName: zitadel.login.lang
   CSRFCookieName: zitadel.login.csrf
@@ -318,7 +316,7 @@ Actions:
     # wildcard sub domains are currently unsupported
     DenyList:
       - localhost
-      - '127.0.0.1'
+      - "127.0.0.1"
 
 DefaultInstance:
   InstanceName:
@@ -429,7 +427,7 @@ DefaultInstance:
     BackgroundColor: "#fafafa"
     WarnColor: "#cd3d56"
     FontColor: "#000000"
-    PrimaryColorDark: "#bbbafa"
+    PrimaryColorDark: "#2073c4"
     BackgroundColorDark: "#111827"
     WarnColorDark: "#ff3b5b"
     FontColorDark: "#ffffff"

console/src/app/modules/footer/footer.component.scss

@@ -3,7 +3,9 @@
   $warn: map-get($theme, warn);
   $background: map-get($theme, background);
   $accent: map-get($theme, accent);
-  $primary-color: mat.get-color-from-palette($primary, 500);
+
+  $lighter-primary-color: mat.get-color-from-palette($primary, 300);
+  $darker-primary-color: mat.get-color-from-palette($primary, 700);
 
   $warn-color: mat.get-color-from-palette($warn, 500);
   $accent-color: mat.get-color-from-palette($accent, 500);
@@ -11,6 +13,7 @@
   $is-dark-theme: map-get($theme, is-dark);
   $back: map-get($background, background);
   $secondary-text: map-get($foreground, secondary-text);
+  $link-hover-color: if($is-dark-theme, $lighter-primary-color, $darker-primary-color);
 
   .footer-wrapper {
     padding: 2rem;
@@ -46,7 +49,7 @@
           }
 
           &:hover {
-            color: $primary-color;
+            color: $link-hover-color;
           }
         }
       }
@@ -114,7 +117,7 @@
           }
 
           &:hover {
-            color: $primary-color;
+            color: $link-hover-color;
 
             i {
               visibility: visible;

console/src/app/modules/nav-toggle/nav-toggle.component.html

@@ -1,6 +1,11 @@
 <button class="nav-toggle" [ngClass]="{active}" (click)="clicked.emit()">
   <div class="c_label">
     <span> {{ label }} </span>
-    <small *ngIf="count" class="count">({{ count }})</small>
+    <div *ngIf="count && count < 100" class="count">
+      <span>{{ count }}</span>
+    </div>
+    <div *ngIf="count && count >= 100" class="count">
+      <span>99+</span>
+    </div>
   </div>
 </button>

console/src/app/modules/nav-toggle/nav-toggle.component.scss

@@ -31,6 +31,8 @@
     background: none;
     cursor: pointer;
     font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
+    box-sizing: border-box;
+    height: 27px;
 
     .c_label {
       display: flex;
@@ -38,8 +40,19 @@
       text-align: center;
 
       .count {
-        display: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 17px;
+        width: 17px;
+        border-radius: 50%;
+        padding: 2px;
+        margin: -2px -9px -2px 8px;
         margin-left: 6px;
+        background-color: if($is-dark-theme, #ffffff20, #00000020);
+        line-height: 18px;
+        font-size: 11px;
+        transition: background 0.2s ease;
       }
     }
 
@@ -63,7 +76,7 @@
 
       .c_label {
         .count {
-          display: inline-block;
+          background-color: if($is-dark-theme, #00000020, #ffffff20);
         }
       }
     }

console/src/app/modules/nav/nav.component.html

@@ -121,14 +121,14 @@
                   >
                     <div class="c_label">
                       <span> {{ 'MENU.PROJECT' | translate }} </span>
-                      <small
+                      <ng-container *ngIf="projectcounter | async as count">
-                        *ngIf="(mgmtService?.ownedProjectsCount | async) && (mgmtService?.grantedProjectsCount | async)"
+                        <div *ngIf="count < 100" class="count">
-                        class="count"
+                          <span>{{ count }}</span>
-                        >({{
+                        </div>
-                          ((mgmtService.ownedProjectsCount | async) ?? 0) +
+                        <div *ngIf="count >= 100" class="count">
-                            ((mgmtService.grantedProjectsCount | async) ?? 0)
+                          <span>99+</span>
-                        }})</small
+                        </div>
-                      >
+                      </ng-container>
                     </div>
                   </a>
                 </ng-template>

console/src/app/modules/nav/nav.component.scss

@@ -64,6 +64,8 @@
           margin: 0.25rem 2px;
           white-space: nowrap;
           position: relative;
+          box-sizing: border-box;
+          height: 27px;
 
           .c_label {
             display: flex;
@@ -72,7 +74,18 @@
 
             .count {
               display: none;
+              align-items: center;
+              justify-content: center;
+              height: 17px;
+              width: 17px;
+              border-radius: 50%;
+              padding: 2px;
+              margin: -2px -9px -2px 8px;
               margin-left: 6px;
+              background-color: if($is-dark-theme, #ffffff20, #00000020);
+              line-height: 18px;
+              font-size: 11px;
+              transition: background 0.2s ease;
             }
           }
 
@@ -97,6 +110,7 @@
             .c_label {
               .count {
                 display: inline-block;
+                background-color: if($is-dark-theme, #00000020, #ffffff20);
               }
             }
           }

console/src/app/modules/nav/nav.component.ts

@@ -4,7 +4,7 @@ import { HttpClient } from '@angular/common/http';
 import { Component, ElementRef, Input, OnDestroy, ViewChild } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { Router } from '@angular/router';
-import { BehaviorSubject, map, Observable, Subject, take } from 'rxjs';
+import { BehaviorSubject, combineLatest, forkJoin, map, merge, Observable, Subject, switchMap, take } from 'rxjs';
 import { Org } from 'src/app/proto/generated/zitadel/org_pb';
 import { User } from 'src/app/proto/generated/zitadel/user_pb';
 import { AuthenticationService } from 'src/app/services/authentication.service';
@@ -132,4 +132,15 @@ export class NavComponent implements OnDestroy {
   public openHelp() {
     this.shortcutService.openOverviewDialog();
   }
+
+  public get projectcounter(): Observable<number> {
+    return combineLatest({
+      owned: this.mgmtService.ownedProjectsCount,
+      granted: this.mgmtService.grantedProjectsCount,
+    }).pipe(
+      map(({ owned, granted }) => {
+        return (owned ?? 0) + (granted ?? 0);
+      }),
+    );
+  }
 }

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts

@@ -20,7 +20,15 @@ import { AdminService } from 'src/app/services/admin.service';
 import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service';
-import { ThemeService } from 'src/app/services/theme.service';
+import {
+  BACKGROUND,
+  DARK_BACKGROUND,
+  DARK_PRIMARY,
+  DARK_WARN,
+  PRIMARY,
+  ThemeService,
+  WARN,
+} from 'src/app/services/theme.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import { InfoSectionType } from '../../info-section/info-section.component';
@@ -637,14 +645,14 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
   }
 
   private applyToConsole(labelpolicy: LabelPolicy.AsObject): void {
-    const darkPrimary = labelpolicy?.primaryColorDark || '#bbbafa';
+    const darkPrimary = labelpolicy?.primaryColorDark || DARK_PRIMARY;
-    const lightPrimary = labelpolicy?.primaryColor || '#5469d4';
+    const lightPrimary = labelpolicy?.primaryColor || PRIMARY;
 
-    const darkWarn = labelpolicy?.warnColorDark || '#ff3b5b';
+    const darkWarn = labelpolicy?.warnColorDark || DARK_WARN;
-    const lightWarn = labelpolicy?.warnColor || '#cd3d56';
+    const lightWarn = labelpolicy?.warnColor || WARN;
 
-    const darkBackground = labelpolicy?.backgroundColorDark || '#111827';
+    const darkBackground = labelpolicy?.backgroundColorDark || DARK_BACKGROUND;
-    const lightBackground = labelpolicy?.backgroundColor || '#fafafa';
+    const lightBackground = labelpolicy?.backgroundColor || BACKGROUND;
 
     this.themeService.savePrimaryColor(darkPrimary, true);
     this.themeService.savePrimaryColor(lightPrimary, false);

console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss

@@ -3,9 +3,16 @@
 @mixin search-user-autocomplete-theme($theme) {
   $primary: map-get($theme, primary);
   $primary-color: mat.get-color-from-palette($primary, 500);
+  $lighter-primary-color: mat.get-color-from-palette($primary, 300);
+  $darker-primary-color: mat.get-color-from-palette($primary, 700);
+
   $background: map-get($theme, background);
   $foreground: map-get($theme, foreground);
   $secondary-text: map-get($foreground, secondary-text);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  $link-hover-color: if($is-dark-theme, mat.get-color-from-palette($primary, 200), $primary-color);
+  $link-color: if($is-dark-theme, $lighter-primary-color, $primary-color);
 
   .user-autocomplete-found {
     margin: 0.5rem 0;
@@ -67,11 +74,12 @@
     margin-top: 0.5rem;
 
     a {
-      color: $primary-color;
+      color: $link-color;
+      transition: color 0.2s ease;
 
       &:hover {
         cursor: pointer;
-        color: mat.get-color-from-palette($primary, 400);
+        color: $link-hover-color;
         text-decoration: underline;
       }
     }

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html

@@ -12,7 +12,9 @@
 </cnsl-top-view>
 
 <div *ngIf="loading" class="max-width-container">
-  <mat-progress-spinner diameter="25" color="primary" mode="indeterminate"></mat-progress-spinner>
+  <div class="user-spinner-wrapper">
+    <mat-progress-spinner diameter="25" color="primary" mode="indeterminate"></mat-progress-spinner>
+  </div>
 </div>
 
 <div class="max-width-container">

console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.scss

@@ -88,6 +88,10 @@
   }
 }
 
+.user-spinner-wrapper {
+  margin: 1rem 0;
+}
+
 .icon-button {
   .icon {
     font-size: 1.2rem;

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

@@ -13,17 +13,17 @@ export interface Color {
   contrastColor: string;
 }
 
-const DARK_PRIMARY = '#bbbafa';
+export const DARK_PRIMARY = '#2073c4';
-const PRIMARY = '#5469d4';
+export const PRIMARY = '#5469d4';
 
-const DARK_WARN = '#ff3b5b';
+export const DARK_WARN = '#ff3b5b';
-const WARN = '#cd3d56';
+export const WARN = '#cd3d56';
 
-const DARK_BACKGROUND = '#111827';
+export const DARK_BACKGROUND = '#111827';
-const BACKGROUND = '#fafafa';
+export const BACKGROUND = '#fafafa';
 
-const DARK_TEXT = '#ffffff';
+export const DARK_TEXT = '#ffffff';
-const TEXT = '#000000';
+export const TEXT = '#000000';
 
 @Injectable()
 export class ThemeService {

internal/api/ui/login/static/resources/themes/scss/styles/theming/palette.scss

@@ -15,251 +15,220 @@ $light-input-border: #00000040;
 $light-input-border-hover: #1a1b1b;
 
 $lgn-dark-brand: (
-    50: #fff,
+  50: #f1f7fd,
-    100: #dde6f3,
+  100: #afd1f2,
-    200: #b4c9e4,
+  200: #7fb5ea,
-    300: #7fa3d1,
+  300: #4192e0,
-    400: #6992c9,
+  400: #2782dc,
-    500: #5282c1,
+  500: #2073c4,
-    600: #4072b4,
+  600: #1c64aa,
-    700: #38649d,
+  700: #17548f,
-    800: #305687,
+  800: #134575,
-    900: #284770,
+  900: #0f355b,
-    A100: #fff,
+  A100: #fff,
-    A200: #dde6f3,
+  A200: #dde6f3,
-    A300: #6992c9,
+  A300: #6992c9,
-    A400: #38649d,
+  A400: #38649d,
-    A500: #666,
+  A500: #666,
-    A600: #fff,
+  A600: #fff,
-    A700: #8795a1,
+  A700: #8795a1,
-    A800: #2d2e30,
+  A800: #2d2e30,
-    A900: #212224,
+  A900: #212224,
-    contrast: (
+  contrast: (
-        50: $dark-primary-text,
+    50: $dark-primary-text,
-        100: $dark-primary-text,
+    100: $dark-primary-text,
-        200: $dark-primary-text,
+    200: $dark-primary-text,
-        300: $dark-primary-text,
+    300: $dark-primary-text,
-        400: $dark-primary-text,
+    400: $dark-primary-text,
-        500: $light-primary-text,
+    500: $light-primary-text,
-        600: $light-primary-text,
+    600: $light-primary-text,
-        700: $light-primary-text,
+    700: $light-primary-text,
-        800: $light-primary-text,
+    800: $light-primary-text,
-        900: $light-primary-text,
+    900: $light-primary-text,
-        A100: $dark-primary-text,
+    A100: $dark-primary-text,
-        A200: $light-primary-text,
+    A200: $light-primary-text,
-        A400: $light-primary-text,
+    A400: $light-primary-text,
-        A700: $light-primary-text,
+    A700: $light-primary-text,
-    )
+  ),
 );
-  
+
 $lgn-light-brand: (
-    50: #eaedfa,
+  50: #eaedfa,
-    100: #ccd2f2,
+  100: #ccd2f2,
-    200: #aab4ea,
+  200: #aab4ea,
-    300: #8796e1,
+  300: #8796e1,
-    400: #6e80da,
+  400: #6e80da,
-    500: #5469d4,
+  500: #5469d4,
-    600: #4d61cf,
+  600: #4d61cf,
-    700: #4356c9,
+  700: #4356c9,
-    800: #3a4cc3,
+  800: #3a4cc3,
-    900: #293bb9,
+  900: #293bb9,
-    A100: #f9faff,
+  A100: #f9faff,
-    A200: #c6ccff,
+  A200: #c6ccff,
-    A300: #939fff,
+  A300: #939fff,
-    A400: #7a88ff,
+  A400: #7a88ff,
-    A500: #333,
+  A500: #333,
-    A600: #000,
+  A600: #000,
-    A700: #8795a1,
+  A700: #8795a1,
-    A800: white,
+  A800: white,
-    A900: #fafafa,
+  A900: #fafafa,
-    contrast: (
+  contrast: (
-        50: $dark-primary-text,
+    50: $dark-primary-text,
-        100: $dark-primary-text,
+    100: $dark-primary-text,
-        200: $dark-primary-text,
+    200: $dark-primary-text,
-        300: $dark-primary-text,
+    300: $dark-primary-text,
-        400: $dark-primary-text,
+    400: $dark-primary-text,
-        500: $light-primary-text,
+    500: $light-primary-text,
-        600: $light-primary-text,
+    600: $light-primary-text,
-        700: $light-primary-text,
+    700: $light-primary-text,
-        800: $light-primary-text,
+    800: $light-primary-text,
-        900: $light-primary-text,
+    900: $light-primary-text,
-        A100: $dark-primary-text,
+    A100: $dark-primary-text,
-        A200: $light-primary-text,
+    A200: $light-primary-text,
-        A400: $light-primary-text,
+    A400: $light-primary-text,
-        A700: $light-primary-text,
+    A700: $light-primary-text,
-    )
+  ),
 );
-  
+
-// skip accent color for first gen theming
-// $lgn-accent-color: (
-//     50: #ebf4f2,
-//     100: #cce3de,
-//     200: #abd1c9,
-//     300: #89bfb3,
-//     400: #6fb1a2,
-//     500: #56a392,
-//     600: #4f9b8a,
-//     700: #45917f,
-//     800: #3c8875,
-//     900: #2b7763,
-//     A100: #beffed,
-//     A200: #8bffde,
-//     A400: #58ffd0,
-//     A700: #3effc9,
-//     contrast: (
-//         50: $dark-primary-text,
-//         100: $dark-primary-text,
-//         200: $dark-primary-text,
-//         300: $dark-primary-text,
-//         400: $dark-primary-text,
-//         500: $light-primary-text,
-//         600: $light-primary-text,
-//         700: $light-primary-text,
-//         800: $light-primary-text,
-//         900: $light-primary-text,
-//         A100: $dark-primary-text,
-//         A200: $light-primary-text,
-//         A400: $light-primary-text,
-//         A700: $light-primary-text,
-//     )
-// );
-  
 $lgn-warn: (
-    50: #ffebee,
+  50: #ffebee,
-    100: #ffcdd2,
+  100: #ffcdd2,
-    200: #ef9a9a,
+  200: #ef9a9a,
-    300: #e57373,
+  300: #e57373,
-    400: #ef5350,
+  400: #ef5350,
-    500: #f44336,
+  500: #f44336,
-    600: #e53935,
+  600: #e53935,
-    700: #d32f2f,
+  700: #d32f2f,
-    800: #c62828,
+  800: #c62828,
-    900: #b71c1c,
+  900: #b71c1c,
-    A100: #ff8a80,
+  A100: #ff8a80,
-    A200: #ff5252,
+  A200: #ff5252,
-    A400: #ff1744,
+  A400: #ff1744,
-    A700: #d50000,
+  A700: #d50000,
-    contrast: (
+  contrast: (
-        50: $dark-primary-text,
+    50: $dark-primary-text,
-        100: $dark-primary-text,
+    100: $dark-primary-text,
-        200: $dark-primary-text,
+    200: $dark-primary-text,
-        300: $dark-primary-text,
+    300: $dark-primary-text,
-        400: $dark-primary-text,
+    400: $dark-primary-text,
-        500: $light-primary-text,
+    500: $light-primary-text,
-        600: $light-primary-text,
+    600: $light-primary-text,
-        700: $light-primary-text,
+    700: $light-primary-text,
-        800: $light-primary-text,
+    800: $light-primary-text,
-        900: $light-primary-text,
+    900: $light-primary-text,
-        A100: $dark-primary-text,
+    A100: $dark-primary-text,
-        A200: $light-primary-text,
+    A200: $light-primary-text,
-        A400: $light-primary-text,
+    A400: $light-primary-text,
-        A700: $light-primary-text,
+    A700: $light-primary-text,
-    )
+  ),
 );
-  
+
 $lgn-grey: (
-    50: #fafafa,
+  50: #fafafa,
-    100: #f5f5f5,
+  100: #f5f5f5,
-    200: #eeeeee,
+  200: #eeeeee,
-    300: #e0e0e0,
+  300: #e0e0e0,
-    400: #bdbdbd,
+  400: #bdbdbd,
-    500: #9e9e9e,
+  500: #9e9e9e,
-    600: #757575,
+  600: #757575,
-    700: #616161,
+  700: #616161,
-    800: #424242,
+  800: #424242,
-    900: #212121,
+  900: #212121,
-    A100: #ffffff,
+  A100: #ffffff,
-    A200: #eeeeee,
+  A200: #eeeeee,
-    A400: #bdbdbd,
+  A400: #bdbdbd,
-    A700: #616161,
+  A700: #616161,
-    contrast: (
+  contrast: (
-        50: $dark-primary-text,
+    50: $dark-primary-text,
-        100: $dark-primary-text,
+    100: $dark-primary-text,
-        200: $dark-primary-text,
+    200: $dark-primary-text,
-        300: $dark-primary-text,
+    300: $dark-primary-text,
-        400: $dark-primary-text,
+    400: $dark-primary-text,
-        500: $dark-primary-text,
+    500: $dark-primary-text,
-        600: $light-primary-text,
+    600: $light-primary-text,
-        700: $light-primary-text,
+    700: $light-primary-text,
-        800: $light-primary-text,
+    800: $light-primary-text,
-        900: $light-primary-text,
+    900: $light-primary-text,
-        A100: $dark-primary-text,
+    A100: $dark-primary-text,
-        A200: $dark-primary-text,
+    A200: $dark-primary-text,
-        A400: $dark-primary-text,
+    A400: $dark-primary-text,
-        A700: $light-primary-text,
+    A700: $light-primary-text,
-    )
+  ),
 );
 
 $lgn-light-theme-background: (
-    background: map-get($lgn-grey, 50),
+  background: map-get($lgn-grey, 50),
-    hover:      rgba(black, 0.04),
+  hover: rgba(black, 0.04),
-    disabled-button: rgba(black, 0.12),
+  disabled-button: rgba(black, 0.12),
-    raised-button: white,
+  raised-button: white,
-    focused-button: $dark-focused,
+  focused-button: $dark-focused,
-    selected-button: map-get($lgn-grey, 300),
+  selected-button: map-get($lgn-grey, 300),
-    selected-disabled-button: map-get($lgn-grey, 400),
+  selected-disabled-button: map-get($lgn-grey, 400),
-    tooltip: map-get($lgn-grey, 700),
+  tooltip: map-get($lgn-grey, 700),
-    input: #fafafa50,
+  input: #fafafa50,
-    footer:  #fafafa,
+  footer: #fafafa,
-    qrcode: #fafafa, // use black ground on white background because inverted qrcode colors are not allowed
+  qrcode: #fafafa,
-    account-selector-hover: rgba(black, 0.02),
+  // use black ground on white background because inverted qrcode colors are not allowed
-    account-selector-active: rgba(black, 0.05),
+  account-selector-hover: rgba(black, 0.02),
-    google: #ffffff,
+  account-selector-active: rgba(black, 0.05),
+  google: #ffffff,
 );
-  
+
 $lgn-dark-theme-background: (
-    background: #212224,
+  background: #212224,
-    hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
+  hover: rgba(white, 0.04),
-    disabled-button: rgba(white, 0.12),
+  // TODO(kara): check style with Material Design UX
-    raised-button: map-get($lgn-grey, 800),
+  disabled-button: rgba(white, 0.12),
-    focused-button: $light-focused,
+  raised-button: map-get($lgn-grey, 800),
-    selected-button: map-get($lgn-grey, 900),
+  focused-button: $light-focused,
-    selected-disabled-button: map-get($lgn-grey, 800),
+  selected-button: map-get($lgn-grey, 900),
-    tooltip: map-get($lgn-grey, 700),
+  selected-disabled-button: map-get($lgn-grey, 800),
-    input: rgba(black, .2),
+  tooltip: map-get($lgn-grey, 700),
-    footer: #212224,
+  input: rgba(black, 0.2),
-    qrcode: white, // needs white background to recognize borders,
+  footer: #212224,
-    account-selector-hover: rgba(white, 0.02),
+  qrcode: white,
-    account-selector-active: rgba(white, 0.05),
+  // needs white background to recognize borders,
-    google: #ffffff,
+  account-selector-hover: rgba(white, 0.02),
+  account-selector-active: rgba(white, 0.05),
+  google: #ffffff,
 );
 
 $lgn-light-theme-foreground: (
-    footer-links:      map-get($lgn-light-brand, 500),
+  footer-links: map-get($lgn-light-brand, 500),
-    footer-line:     #e3e8ee,
+  footer-line: #e3e8ee,
-    base:              black,
+  base: black,
-    input-border:      $light-input-border,
+  input-border: $light-input-border,
-    radio-border:      $light-input-border,
+  radio-border: $light-input-border,
-    input-border-hover: $light-input-border-hover,
+  input-border-hover: $light-input-border-hover,
-    input-placeholder: map-get($lgn-grey, 600),
+  input-placeholder: map-get($lgn-grey, 600),
-    label:             map-get($lgn-grey, 600),//#697386
+  label: map-get($lgn-grey, 600),
-    divider:           $dark-dividers,
+  divider: $dark-dividers,
-    disabled:          $dark-disabled-text,
+  disabled: $dark-disabled-text,
-    disabled-button:   rgba(black, 0.26),
+  disabled-button: rgba(black, 0.26),
-    elevation:         black,
+  elevation: black,
-    secondary-text:    $dark-secondary-text,
+  secondary-text: $dark-secondary-text,
-    icon:              rgba(black, 0.54),
+  icon: rgba(black, 0.54),
-    text:              rgba(black, 0.87),
+  text: rgba(black, 0.87),
-    qrcode:            black,
+  qrcode: black,
-    google-text:       #8b8d8d,
+  google-text: #8b8d8d,
 );
-  
+
 $lgn-dark-theme-foreground: (
-    footer-links:      map-get($lgn-grey, 500),
+  footer-links: map-get($lgn-grey, 500),
-    footer-line:     #303131,
+  footer-line: #303131,
-    base:            white,
+  base: white,
-    input-border:      $dark-input-border,
+  input-border: $dark-input-border,
-    radio-border: $dark-input-border,
+  radio-border: $dark-input-border,
-    input-border-hover: $dark-input-border-hover,
+  input-border-hover: $dark-input-border-hover,
-    input-placeholder: map-get($lgn-grey, 600),
+  input-placeholder: map-get($lgn-grey, 600),
-    label:             map-get($lgn-grey, 600),// #8795a1,
+  label: map-get($lgn-grey, 600),
-    divider:           $light-dividers,
+  divider: $light-dividers,
-    disabled:          $light-disabled-text,
+  disabled: $light-disabled-text,
-    disabled-button:   rgba(white, 0.3),
+  disabled-button: rgba(white, 0.3),
-    elevation:         black,
+  elevation: black,
-    secondary-text:    $light-secondary-text,
+  secondary-text: $light-secondary-text,
-    icon:              white,
+  icon: white,
-    text:              white,
+  text: white,
-    qrcode:            black,
+  qrcode: black,
-    google-text:       #8b8d8d,
+  google-text: #8b8d8d,
 );

internal/api/ui/login/static/resources/themes/scss/styles/vars.scss

@@ -117,16 +117,16 @@
 }
 
 .lgn-dark-theme {
-  --zitadel-color-primary-50: #ffffff;
+  --zitadel-color-primary-50: #f1f7fd;
-  --zitadel-color-primary-100: #dde6f3;
+  --zitadel-color-primary-100: #afd1f2;
-  --zitadel-color-primary-200: #b4c9e4;
+  --zitadel-color-primary-200: #7fb5ea;
-  --zitadel-color-primary-300: #7fa3d1;
+  --zitadel-color-primary-300: #4192e0;
-  --zitadel-color-primary-400: #6992c9;
+  --zitadel-color-primary-400: #2782dc;
-  --zitadel-color-primary-500: #5282c1;
+  --zitadel-color-primary-500: #2073c4;
-  --zitadel-color-primary-600: #4072b4;
+  --zitadel-color-primary-600: #1c64aa;
-  --zitadel-color-primary-700: #38649d;
+  --zitadel-color-primary-700: #17548f;
-  --zitadel-color-primary-800: #305687;
+  --zitadel-color-primary-800: #134575;
-  --zitadel-color-primary-900: #284770;
+  --zitadel-color-primary-900: #0f355b;
 
   --zitadel-color-warn-50: #ffe7eb;
   --zitadel-color-warn-100: #ffc4ce;

internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css

@@ -102,16 +102,16 @@
 }
 
 .lgn-dark-theme {
-  --zitadel-color-primary-50: #ffffff;
+  --zitadel-color-primary-50: #f1f7fd;
-  --zitadel-color-primary-100: #dde6f3;
+  --zitadel-color-primary-100: #afd1f2;
-  --zitadel-color-primary-200: #b4c9e4;
+  --zitadel-color-primary-200: #7fb5ea;
-  --zitadel-color-primary-300: #7fa3d1;
+  --zitadel-color-primary-300: #4192e0;
-  --zitadel-color-primary-400: #6992c9;
+  --zitadel-color-primary-400: #2782dc;
-  --zitadel-color-primary-500: #5282c1;
+  --zitadel-color-primary-500: #2073c4;
-  --zitadel-color-primary-600: #4072b4;
+  --zitadel-color-primary-600: #1c64aa;
-  --zitadel-color-primary-700: #38649d;
+  --zitadel-color-primary-700: #17548f;
-  --zitadel-color-primary-800: #305687;
+  --zitadel-color-primary-800: #134575;
-  --zitadel-color-primary-900: #284770;
+  --zitadel-color-primary-900: #0f355b;
   --zitadel-color-warn-50: #ffe7eb;
   --zitadel-color-warn-100: #ffc4ce;
   --zitadel-color-warn-200: #ff9dad;