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-background-color | Die Haupt-Hintergrundfarbe der Anwendung, weiß | #ffffff |
| darker-background-color | Die Akzent-Hintergrundfarbe der Anwendung, z.B. bei den Eigenschaften im Designer, hellgrau | #FAFAFA |
| 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-font-color | Die Schriftfarbe der Anwendung | #4D4D4D |
| contrast-font-color | Die Schriftfarbe der Anwendung vor dunklen Hintergründen | #FFFFFF |
| main-title-color | Titel innerhalb der Anwendung | var(--main-color) |
| label-font-color | Die Schriftfarbe der Titels in Masken und Ansichten | #5D5D5D |
Beispiel:
--main-color: #ff0000;Rahmenfarben
| Variable | Erklärung | Standard |
|---|---|---|
| default-border-color | Die Hauptfarbe für Rahmen und Linien innerhalb der Anwendung | #c0c0c0 |
| light-border-color | Die Farbe hellerer Rahmen und Linien innerhalb der Anwendung | #e0e0e0 |
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, grau, 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%);