Die im Standard-Theme der Anwendung verwendeten Blautöne können zentral durch eigene Farben ersetzt werden. Hierzu dienen die folgenden Variablen.

Allgemeine Farben

Variable Erklärung Standard
main-color Die Hauptfarbe der Anwendung, dunkelblau, Verwendung z.B. im Maskentitel oder als Hover-Effekt auf Hyperlinks #004177
secondary-color Das in Business App primär verwendete Mittelblau, Verwendung beispielsweise in Haupttabs, Formtabs, Rahmenfarbe aktiver inputs und Buttons #3282C8
secondary-color-light Der nächsthellere Blauton, derzeit keine Verwendung innerhalb der Anwendung #9DCEFF
secondary-color-lighter Der hellste Blauton, Verwendung z.B. Hover-Effekt innerhalb von Menüs aller Art, Hintergrundfarbe der Inputs und der Tokens #E0EFFF
main-title-color Titel innerhalb der Anwendung var(--main-color)

Beispiel:

--main-color: #ff0000;

Allgemeine Icons

Variable Erklärung Standard
icon-color-idle Die Hauptfarbe der Icons, grau, Verwendung z.B.: Kopfzeile, Menüwidget, Ansicht invert(30%) sepia(0%) saturate(1173%) hue-rotate(189deg) brightness(84%) contrast(80%)
icon-color-highlight Highlightfarbe der Icons, blau, Verwendung z.B.: aktiver Tab, aktives Navigationselement, Ribbon invert(44%) sepia(41%) saturate(1082%) hue-rotate(169deg) brightness(93%) contrast(81%)
icon-color-contrast Kontrastfarbe der Icons, weiß, Verwendung z.B. aktive Ribbon-Items invert(100%) sepia(13%) saturate(7448%) hue-rotate(220deg) brightness(115%) contrast(113%)
icon-color-disable Farbe der Icons an nicht-verwendbaren und inaktiven Elementen, z.B. Ribbon, Haupttab invert(58%) sepia(9%) saturate(0%) hue-rotate(143deg) brightness(99%) contrast(98%)

Beispiel:

--main-icon-color: brightness(0) saturate(100%) invert(24%) sepia(81%) saturate(6822%) hue-rotate(355deg) brightness(107%) contrast(129%);