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

:root {
  --zitadel-color-primary: var(--zitadel-color-primary-500);
  --zitadel-color-background: var(--zitadel-color-background-500);
  --zitadel-color-secondary: var(--zitadel-color-secondary-500);
  --zitadel-color-warn: var(--zitadel-color-warn-500);
  --zitadel-color-text: var(--zitadel-color-text-500);

  --zitadel-color-primary-50: #eaedfa;
  --zitadel-color-primary-100: #ccd2f2;
  --zitadel-color-primary-200: #aab4ea;
  --zitadel-color-primary-300: #8796e1;
  --zitadel-color-primary-400: #6e80da;
  --zitadel-color-primary-500: #5469d4;
  --zitadel-color-primary-600: #4d61cf;
  --zitadel-color-primary-700: #4356c9;
  --zitadel-color-primary-800: #3a4cc3;
  --zitadel-color-primary-900: #293bb9;
  --zitadel-color-primary-rgb: rgb(84, 105, 212);
  --zitadel-color-primary-contrast: var(--zitadel-color-white);

  --zitadel-color-secondary-50: #eaedfa;
  --zitadel-color-secondary-100: #ccd2f2;
  --zitadel-color-secondary-200: #aab4ea;
  --zitadel-color-secondary-300: #8796e1;
  --zitadel-color-secondary-400: #6e80da;
  --zitadel-color-secondary-500: #5469d4;
  --zitadel-color-secondary-600: #4d61cf;
  --zitadel-color-secondary-700: #4356c9;
  --zitadel-color-secondary-800: #3a4cc3;
  --zitadel-color-secondary-900: #293bb9;
  --zitadel-color-secondary-contrast: var(--zitadel-color-white);

  --zitadel-color-warn-50: #ffebee;
  --zitadel-color-warn-100: #ffcdd2;
  --zitadel-color-warn-200: #ef9a9a;
  --zitadel-color-warn-300: #e57373;
  --zitadel-color-warn-400: #ef5350;
  --zitadel-color-warn-500: #f44336;
  --zitadel-color-warn-600: #e53935;
  --zitadel-color-warn-700: #d32f2f;
  --zitadel-color-warn-800: #c62828;
  --zitadel-color-warn-900: #b71c1c;

  --zitadel-font-family: 'Lato';

  --zitadel-color-background-50: rgb(255, 255, 255);
  --zitadel-color-background-100: rgb(255, 255, 255);
  --zitadel-color-background-200: rgb(255, 255, 255);
  --zitadel-color-background-300: rgb(255, 255, 255);
  --zitadel-color-background-400: rgb(255, 255, 255);
  --zitadel-color-background-500: rgb(250, 250, 250);
  --zitadel-color-background-600: rgb(222, 222, 222);
  --zitadel-color-background-700: rgb(195, 195, 194);
  --zitadel-color-background-800: rgb(168, 168, 168);
  --zitadel-color-background-900: rgb(142, 142, 142);
  --zitadel-color-background-contrast: rgb(0, 0, 0);

  --zitadel-color-footer-line: #e3e8ee;

  --zitadel-color-input-background: #fafafa50;
  --zitadel-color-input-border: #00000040;
  --zitadel-color-input-border-hover: #1a1b1b;
  --zitadel-color-input-placeholder: var(--zitadel-color-grey-600);

  --zitadel-color-font-50: rgb(0, 0, 0);
  --zitadel-color-font-100: rgb(0, 0, 0);
  --zitadel-color-font-200: rgb(0, 0, 0);
  --zitadel-color-font-300: rgb(0, 0, 0);
  --zitadel-color-font-400: rgb(0, 0, 0);
  --zitadel-color-font-500: rgb(0, 0, 0);
  --zitadel-color-font-600: rgb(0, 0, 0);
  --zitadel-color-font-700: rgb(0, 0, 0);
  --zitadel-color-font-800: rgb(0, 0, 0);
  --zitadel-color-font-900: rgb(0, 0, 0);
  --zitadel-color-font-contrast: rgb(255, 255, 255);
  --zitadel-color-label: var(--zitadel-color-grey-600);


  --zitadel-color-account-selector-hover: rgba(0, 0, 0, 0.02);
  --zitadel-color-account-selector-active: rgba(0, 0, 0, 0.05);

  --zitadel-color-success: #0e6245;
  --zitadel-color-success-background: #cbf4c9;

  --zitadel-color-divider: rgba(0, 0, 0, 0.12);

  --zitadel-color-button-disabled: rgba(0, 0, 0, 0.26);
  --zitadel-color-button-disabled-background: rgba(0, 0, 0, 0.12);
  --zitadel-color-button-selected-background: var(--zitadel-color-grey-900);
  --zitadel-color-button-disabled-selected-background: var(--zitadel-color-grey-800);
  --zitadel-color-raised-button-background: var(--zitadel-color-white);


  --zitadel-color-white: #ffffff;
  --zitadel-color-black: #000000;
  --zitadel-color-grey-50: #fafafa;
  --zitadel-color-grey-100: #f5f5f5;
  --zitadel-color-grey-200: #eeeeee;
  --zitadel-color-grey-300: #e0e0e0;
  --zitadel-color-grey-400: #bdbdbd;
  --zitadel-color-grey-500: #9e9e9e;
  --zitadel-color-grey-600: #757575;
  --zitadel-color-grey-700: #616161;
  --zitadel-color-grey-800: #424242;
  --zitadel-color-grey-900: #212121;

  --zitadel-icon-select: url('../select_arrow_light.svg');
  --zitadel-logo-powered-by: url('../logo-dark.svg');

  --zitadel-color-google-text: #8b8d8d;
  --zitadel-color-google-background: #ffffff;

  --zitadel-color-qr: var(--zitadel-color-black);
  --zitadel-color-qr-background: var(--zitadel-color-white);
}

.lgn-dark-theme {
  --zitadel-color-primary-50: #ffffff;
  --zitadel-color-primary-100: #dde6f3;
  --zitadel-color-primary-200: #b4c9e4;
  --zitadel-color-primary-300: #7fa3d1;
  --zitadel-color-primary-400: #6992c9;
  --zitadel-color-primary-500: #5282c1;
  --zitadel-color-primary-600: #4072b4;
  --zitadel-color-primary-700: #38649d;
  --zitadel-color-primary-800: #305687;
  --zitadel-color-primary-900: #284770;

  --zitadel-color-secondary-50: #ffffff;
  --zitadel-color-secondary-100: #dde6f3;
  --zitadel-color-secondary-200: #b4c9e4;
  --zitadel-color-secondary-300: #7fa3d1;
  --zitadel-color-secondary-400: #6992c9;
  --zitadel-color-secondary-500: #5282c1;
  --zitadel-color-secondary-600: #4072b4;
  --zitadel-color-secondary-700: #38649d;
  --zitadel-color-secondary-800: #305687;
  --zitadel-color-secondary-900: #284770;

  --zitadel-color-warn-50: #ffebee;
  --zitadel-color-warn-100: #ffcdd2;
  --zitadel-color-warn-200: #ef9a9a;
  --zitadel-color-warn-300: #e57373;
  --zitadel-color-warn-400: #ef5350;
  --zitadel-color-warn-500: #f44336;
  --zitadel-color-warn-600: #e53935;
  --zitadel-color-warn-700: #d32f2f;
  --zitadel-color-warn-800: #c62828;
  --zitadel-color-warn-900: #b71c1c;

  --zitadel-font-family: 'Lato';

  --zitadel-color-background-50: rgb(60, 60, 60);
  --zitadel-color-background-100: rgb(55, 55, 55);
  --zitadel-color-background-200: rgb(49, 49, 49);
  --zitadel-color-background-300: rgb(44, 44, 44);
  --zitadel-color-background-400: rgb(36, 36, 36);
  --zitadel-color-background-500: rgb(33, 33, 33);
  --zitadel-color-background-600: rgb(30, 30, 30);
  --zitadel-color-background-700: rgb(28, 28, 28);
  --zitadel-color-background-800: rgb(25, 25, 25);
  --zitadel-color-background-900: rgb(23, 23, 23);
  --zitadel-color-background-contrast: rgb(255, 255, 255);

  --zitadel-color-footer-line: #303131;

  --zitadel-color-input-background: rgba(0, 0, 0, 0.2);
  --zitadel-color-input-border: #403e3e;
  --zitadel-color-input-border-hover: #aeafb1;
  --zitadel-color-input-placeholder: var(--zitadel-color-grey-600);

  --zitadel-color-text-50: rgb(255, 255, 255);
  --zitadel-color-text-100: rgb(255, 255, 255);
  --zitadel-color-text-200: rgb(255, 255, 255);
  --zitadel-color-text-300: rgb(255, 255, 255);
  --zitadel-color-text-400: rgb(255, 255, 255);
  --zitadel-color-text-500: rgb(255, 255, 255);
  --zitadel-color-text-600: rgb(221, 222, 223);
  --zitadel-color-text-700: rgb(194, 195, 195);
  --zitadel-color-text-800: rgb(167, 168, 169);
  --zitadel-color-text-900: rgb(141, 142, 143);
  --zitadel-color-text-contrast: rgb(0, 0, 0);
  --zitadel-color-label: var(--zitadel-color-grey-600);

  --zitadel-color-account-selector-hover: rgba(255, 255, 255, 0.02);
  --zitadel-color-account-selector-active: rgba(255, 255, 255, 0.05);


  --zitadel-color-success: #cbf4c9;
  --zitadel-color-success-background: #4f566b;

  --zitadel-color-divider: rgba(255, 255, 255, 0.12);

  --zitadel-color-button-disabled: rgba(0, 0, 0, 0.26);
  --zitadel-color-button-disabled-background: rgba(255, 255, 255, 0.12);
  --zitadel-color-button-selected-background: var(--zitadel-color-grey-900);
  --zitadel-color-button-disabled-selected-background: var(--zitadel-color-grey-800);
  --zitadel-color-raised-button-background: var(--zitadel-color-grey-800);


  /*--zitadel-color-label: var(--zitadel-color-grey-600); same */
  --zitadel-icon-select: url('../select_arrow_dark.svg');
  --zitadel-logo-powered-by: url('../logo-light.svg');


  --zitadel-color-google-text: #8b8d8d;
  --zitadel-color-google-background: #ffffff;
}