Durchsuchbare Dokumentation aufrufen | Zurück zur Dokumentationsübersicht
Navigation: Dokumentationen agorum core > Übersicht tags > Styles von agorum core anpassen
UI-Theme verwenden
Das Theme von agorum core sorgt dafür, dass Sie die Farbgebung der in agorum core verwendeten Komponenten zentral steuern können. Dazu können Sie eine Liste von zentral verwalteten Farbnamen anpassen.
Das Theme-System erzeugt aus der Liste der Farbnamen die CSS-Variablen und CSS-Klassen, die von agorum core verwendet werden. Zusätzlich benötigte Farben, etwa zur Darstellung von Kontrasten oder Schattierungen, werden automatisch berechnet, ohne dass Sie sie manuell angeben müssen.
Überblick über das Theme
Sie finden das agorum core in der MetaDB unter folgendem Pfad:
MAIN_MODULE_MANAGEMENT/customers/agorum.home/theme
Das Theme ist ein systematisches Gestaltungsschema für das Aussehen und das Verhalten der Bedienoberfläche in agorum core. Es definiert Farben, um eine konsistente und ansprechende Nutzererfahrung zu gewährleisten. Sie können das Theme anpassen, um durchgängig Änderungen an der Darstellung der Bedienoberfläche vorzunehmen.
In der CSS-Farbliste werden Farben über Farbnamen oder Hex-Codes angegeben. Neben den CSS-Farbnamen können Sie auch eigene Farbnamen verweden, siehe Eigene Farbnamen verwenden.
Basisfarben
Das Theme definiert Graustufen und Basisfarben.
Die Graustufen reichen von reinem Weiß (#ffffff, gray-1) bis hin zu tiefem Schwarz (#000000, gray-15) und bilden eine feine Abstufung für neutrale Flächen, Trennlinien und Schriften. Neben den Grautönen kommen vordefinierte Akzentfarben zum Einsatz.
Die Basisfarben können grob in Hauptgestaltungsfarben und Anzeige- und Statusfarben unterteilt werden.
Hauptgestaltungsfarben
Bei diesen Farben handelt es sich um die Farben aus dem agorum® Corporate Design. Die Farben werden für die Anzeige wiederverwendet, d. h. die Anzeige- und Statusfarben verwenden die hier definierten Namen.
| Farbe | Name | Hex-Code | Beschreibung |
|---|---|---|---|
| Brand Primary | #006bff | Haupt-Gestaltungsfarbe | |
| Accent Primary | #c7ff7f | Grüne Akzentfarbe | |
| Accent Secondary | #4ee3ff | Türkisfarbene Akzentfarbe | |
| Accent Tertiary | #eb4d26 | Oranges/rotes Highlight |
Anzeige- und Statusfarben
Die Anzeigefarben und Statusfarben sind die zentrale Liste für die Farbgebung, die in den Bedienoberflächen verwendet wird, etwa für die Anzeige von Buttons, Hinweisboxen und Cards. Die Hauptfarbe dient u. a. als Hintergrundfarbe für die Titelleiste.
| Farbe | Name | Hex-Code | Beschreibung |
|---|---|---|---|
| Primary | #004ba0 | Hauptfarbe – für Hauptaktionen. | |
| Secondary | #4ee3ff | Sekundäre Aktions- und Akzentfarbe. | |
| Tertiary | #eb4d26 | Zusätzliche Akzentfarbe zur Hervorhebung. | |
| Success | #37b34a | Signalfarbe für erfolgreiche Aktionen. | |
| Warning | #ffc300 | Warnfarbe für potenzielle Probleme und Hinweise. | |
| Danger | #d32f2f | Signalfarbe für kritische Probleme. | |
| Dark | #242424 | Sehr dunkler Grauton. | |
| Medium | #929292 | Mittlerer Grauton. | |
| Light | #dbdbdb | Heller Grauton. | |
| Disabled | #ededed | Sehr heller Grauton. |
Um Ihnen die Anpassung bestimmter Farben von wichtigen Bedienelementen zu erlauben, finden Sie im CSS auch folgende Einstellungen:
- Fenster & Panels
- Eingabefelder
- Einstellungen für die Farben der Titel- und Seiteneleiste
Normalerweise wird die Farbgebung dieser Bedienelemente aus den Basisfarben abgeleitet. Sie können aber auch bewusst abweichende Einstellungen vornehmen.
MIt den Standardeinstellungen wird agorum core folgendermaßen angezeigt:
Das Theme hat Auswirkungen auf alle Fenster und Bedienfelder in agorum core.
Die Benutzereinstellungen werden etwa standardmäßig wie folgt angezeigt:
Die Hinweisboxen werden folgendermaßen dargestellt:
Das Theme anpassen
Gehen Sie wie folgt vor, um das Theme anzupassen:
- Erstellen Sie einen neuen Eintrag in der MetaDB mit den angepassten CSS-Farbdefinitionen. Beispiel:
MAIN_MODULE_MANAGEMENT/customers/agorum.home/theme/[ agorum.home ]/0200 agorum.home/colors
- Starten Sie den agorum core Server neu oder führen Sie folgendes Skript aus, damit die Änderungen wirksam werden:
/agorum/roi/customers/agorum.home/js/service/clear-theme-cache.js
- Testen Sie die Farbänderungen.
Eigenes Farbschema verwenden
Sie können das agorum® Farbschema durch ihr eigenes Farbschema ersetzen.
Wenn Sie ein eigenes Farbschema verwenden wollen, ersetzen Sie die Farben, die im CSS im Abschnitt base colors aufgeführt sind, durch die von Ihnen gewünschten Farben. Sie können dafür einfach direkt die Farbangaben im Abschnitt base color ersetzen oder Ihre eigenen Firmenfarbnamen hinterlegen und diese referenzieren.
Beispiel für direkt ersetzte Farbwerte
Das Beispiel zeigt nur die ersetzten Namen, der Rest des CSS wird unverändert beibehalten:
primary: #0052cc secondary: #2684ff tertiary: #eae6ff success: #36b37e # Grüne Akzentfarbe für "erfolgreich" warning: #ffab00 # Gelber Akzent für Warnung danger: #ff5630 # Roter Akzent für "Fehler"
Mit diesen Werten wird agorum core wie folgt angezeigt:
Beispiel für die Einführung eigener Farbnamen
Sie können auch Ihre eigenen Farbnamen bzw. die aus Ihrem Corporate Design direkt verwenden. Tragen Sie dazu Ihre Farbnamen in die CSS-Farbliste ein. Beispiel:
mycompany-deep-pink: #ff00b2 mycompany-gleam-violet: #a400ff mycompany-sunny-yellow: #ffe600 mycompany-forest-moss: #39ff14 mycompany-crystal-blue: #1200ff mycompany-warning-green: #00ff57 mycompany-cherry-blaze: #000000
Sie können dann die von Ihren verwendeten Farbnamen für die Angabe der Farbwerte verwenden. Beispiel:
primary: mycompany-deep-pink secondary: mycompany-gleam-violet tertiary: mycompany-sunny-yellow success: mycompany-gleam-violet warning: mycompany-warning-green danger: mycompany-cherry-blaze
Mit diesem Corporate Design würde agorum core folgendermaßen dargestellt:
Die Hinweisboxen würden wie folgt angezeigt:
Farbe der Titelleiste ändern
Sie können die Farbgebung der Titelleiste direkt in der CSS-Farbliste ändern. Die entsprechenden Einstellungen finden Sie im Abschnitt home header bar.
Die Standardeinstellungen für die Titelleiste sind, dass die von Ihnen angegebene Primärfarbe als Hintergrundfarbe verwendet wird. Zusätzlich wird ein vordefinierter Grauton als Hintergrundfarbe verwendet, wenn man mit der Maus über eine Bedienfläche fährt.
# home header bar home-header-bar: primary home-header-bar-button-hover: gray-12
Die Standarddarstellung ist die folgende:
Die Darstellung der Titelleiste ändert sich also, wenn Sie die Farbwerte der Basisfarben bzw. konkret die Werte von primary und gray-12 ändern. Sie können auch direkt andere Farbwerte verwenden, wenn Sie die Titelleiste unabhängig von den Basisfarben verändern möchten.
Beispiel für eine Titelleiste mit unabhängig von den Basisfarben vergebenen Farbwerten:
# home header bar home-header-bar: darkgreen home-header-bar-button-hover: darkgray
Mit diesen Einstellungen wird die Titelleiste folgendermaßen angezeigt:
Farbe der Seitenleiste ändern
Sie können die Farbgebung der Seitenleiste ändern. Die Standard-CSS-Farbliste enthält bereits die Möglichkeit, zwischen einem Light-Mode und einem Dark-Mode für die Seitenleiste zu wechseln. Der Dark-Mode ist der Standardmodus. In beiden Fällen werden im Standard Basisfarbnamen verwendet. Die Darstellung passt sich also automatisch an, wenn Sie das Basisfarbschema verändern. Die Einstellungen für die Seitenliste finden Sie im Abschnitt home tab bar (light) und home tab bar (dark).
Selbstverständlich können Sie alternativ auch eine komplett abweichende Seitenleiste mit eigenen Farbnamen oder Farbwerten festlegen.
# home tab bar (dark) home-tab-bar-background: gray-12 home-tab-bar: home-tab-bar-background-contrast home-tab-bar-selected: primary home-tab-bar-background-hover: gray-13 home-tab-bar-background-selected: gray-1
Die Seitenleiste wird standardmäßig im Dark-Mode wie folgt angezeigt. In diesem Beispiel ist Administration ausgewählt:
Wechsel in den Light-Mode zur Anzeige der Seitenleiste
Sie können den Light-Mode der Seitenleiste aktivieren, indem Sie die Einträge für den Dark-Mode in der CSS-Farbliste auskommentieren und stattdessen die Einträge für den Light-Mode nutzen, indem Sie die Kommentarzeichen entfernen:
# home tab bar (light) home-tab-bar-background: white home-tab-bar: gray-12 home-tab-bar-selected: primary home-tab-bar-background-hover: gray-3 home-tab-bar-background-selected: gray-1 # home tab bar (dark) #home-tab-bar-background: gray-12 #home-tab-bar: home-tab-bar-background-contrast #home-tab-bar-selected: primary #home-tab-bar-background-hover: gray-13 #home-tab-bar-background-selected: gray-1
Im Standard-Light-Mode wird die Seitenleiste wie folgt angezeigt. Die Farbe für die Anzeige der Schrift des ausgewählten Eintrags ist im Standard die Primärfarbe. Im Beispiel ist Administration ausgewählt:
Farben von Fenstern & Panels ändern
Die Kopfleisten von Fenstern und Panels werden standardmäßig in einer Graustufenfarbe aus den Basisfarben angezeigt. Sie können gezielt eine andere Anzeigefarbe wählen. Die entsprechenden Einstellungen finden Sie im Abschnitt windows, panels der CSS-Farbliste.
# windows, panels window-header-background: gray-12 window-header: window-header-background-contrast panel-header-background: gray-12
Die Standarddarstellung sehen Sie etwa in der Kopfleiste im Fenster Benutzereinstellungen.
Wenn Sie nicht möchten, dass die Anzeige über eine Graustufe aus den Basisfarben erfolgt, können Sie gezielt eine andere Farbe angeben.
Beispiel:
# windows, panels window-header-background: green window-header: window-header-background-contrast panel-header-background: green
Diese Angabe führt dazu, dass die Kopfleiste von Fenstern und Panels mit einem grünen Hintergrund angezeigt wird.
Farben der Eingabefelder ändern
Die Eingabefelder werden standardmäßig in Graustufenfarben aus den Basisfarben angezeigt. Zusätzllich wird das fokussierte Feld umrandet hervorgehoben. Die Farbe für die Umrandung ist standardmäßig ebenfalls eine Basisfarbe. Sie können gezielt andere Farben für die Eingabefelder wählen. Die entsprechenden Einstellungen finden Sie im Abschnitt input fields der CSS-Farbliste.
field-background: gray-2 field-background-hover: gray-3 field-background-disabled: field-background-light field-border-focus: primary
Die Standarddarstellung sehen Sie etwa in der Kopfleiste im Fenster Benutzereinstellungen:
Wenn Sie nicht möchten, dass die Anzeige über die Basisfarben erfolgt, können Sie gezielt andere Farben angeben.
Beispiel:
# input fields field-background: gray field-background-hover: lightgrey field-background-disabled: black field-border-focus: rebeccapurple
Diese Angabe führt dazu, dass die Felder mit einem dunkleren Hintergrund und einer anderen Fokusfarbe angezeigt werden.