Anpassung
Die WebUI Runtime unterstützt benutzerdefiniertes Branding, Theming, Navigationslayout und Anwendungskonfiguration.
Anwendungskonfiguration
Globale Anwendungseinstellungen werden in
apps/dashboard-wc/config/appconfig.jsonc definiert,
einschließlich des Header-Logo-Pfads (headerLogo), des
Anwendungstitels (appTitle) und des Browser-Tab-Titels
(documentTitle). Alle Textfelder unterstützen
mehrsprachige Objekte mit Gebietsschema-Schlüsseln (z. B.
en_US.utf8, de_AT.utf8) oder
Dashboard-Übersetzungsschlüssel.
Logo-Anpassung
So ersetzen Sie das Logo:
- Erstellen Sie ein SVG-Logo (empfohlene viewBox: ca. 520x120).
- Kopieren Sie das Logo an beide Asset-Speicherorte: libs/default-components/src/assets/ (Quelle, von Vite gebündelt) und apps/dashboard-wc/public/assets/ (öffentliche Kopie für den Laufzeitzugriff).
- Aktualisieren Sie den Pfad
headerLogoin appconfig.jsonc. - Führen Sie den Build aus.
CSS-Variablen
Die Anwendung definiert benutzerdefinierte CSS-Eigenschaften
(--neo-*), die auf allen Seiten verfügbar sind.
| Variable | Standard (dunkler Modus) | Beschreibung |
|---|---|---|
--neo-accent |
#00bde3 |
Primäre Akzentfarbe (Cyan) |
--neo-accent-dim |
rgba(0, 189, 227, 0.15) |
Dezenter Akzenthintergrund |
--neo-accent-glow |
rgba(0, 189, 227, 0.4) |
Leuchteffekt bei aktiven Elementen |
--neo-header-bg |
var(--theme-color-2) |
Header-Hintergrund |
--neo-nav-bg |
var(--theme-color-1) |
Navigationshintergrund |
Um die Akzentfarbe zu ändern, passen Sie die Variable
--neo-accent in der Shell-Komponente
demo-app-ix.ts an.
Dunkler und heller Modus
Das Erscheinungsbild wird durch zwei Attribute gesteuert:
data-ix-color-schema auf dem
html-Element (für das
Siemens IX-Framework) und
data-theme auf der App-Komponente (für
benutzerdefinierte --neo-*-Variablen). Eine
Umschalttaste (Sonnen-/Mondsymbol) ist in den Header integriert. Im
hellen Modus ändern sich nur Overlay-, Rahmen- und Schattenwerte; die
Akzentfarbe bleibt gleich.
Anpassung des Anmeldebildschirms
Der Hintergrund des Anmeldebildschirms ist eine SVG-Datei unter libs/default-components/src/assets/loginscreen.svg. Bearbeiten Sie diese SVG-Datei, kopieren Sie sie an beide Asset-Speicherorte und führen Sie den Build erneut aus.