> For the complete documentation index, see [llms.txt](https://docs.verge.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.verge.io/run-the-platform/de/systemadministration/themes.md). # VergeOS-Designfunktionalität VergeOS bietet ein umfassendes Themesystem, das es Administratoren ermöglicht, das visuelle Erscheinungsbild der Benutzeroberfläche anzupassen. Die Theme-Funktionalität bietet eine detaillierte Kontrolle über Farben in verschiedenen UI-Komponenten, darunter Diagramme, Navigationselemente, Kopfzeilen, Ladeanzeigen und allgemeine Interface-Elemente. ## Übersicht Das VergeOS-Themesystem ermöglicht es Organisationen, benutzerdefinierte visuelle Themes zu erstellen, die Interface-Farben und Branding-Elemente anpassen. Diese Funktionalität geht über ein grundlegendes UI-Branding hinaus, indem sie eine detaillierte Kontrolle über bestimmte Gruppen von UI-Komponenten bietet und so eine umfassende visuelle Anpassung ermöglicht, die mit dem Corporate Branding übereinstimmen oder die Benutzererfahrung verbessern kann. ## Was Sie lernen werden Dieser Leitfaden erklärt die VergeOS-Theme-Funktionalität, einschließlich wo die Theme-Funktionen zu finden sind, welche Anpassungsoptionen verfügbar sind und wie die verschiedenen Theme-Komponenten zusammenarbeiten, um ein einheitliches Erscheinungsbild der Benutzeroberfläche zu schaffen. Sie werden verstehen: * Wo Sie die Theme-Verwaltung in VergeOS finden * Welche Theme-Property-Gruppen zur Anpassung verfügbar sind * Wie das Erstellen und Verwalten von Themes funktioniert * Welche Dateiformate und Assets unterstützt werden * Wie Themes in das vorhandene UI-Branding-System integriert werden ## Voraussetzungen **Umgebungseinrichtung:** * Administratorzugriff (Berechtigungen für Cluster-Admin oder Tenant-Admin) **Hintergrundwissen:** * Grundlegende VergeOS-Navigation und Zugriff auf Systemeinstellungen ## Zeitaufwand **Zeitaufwand:** 10–15 Minuten, um alle Theme-Optionen und Funktionen zu verstehen ## Aufrufen der Theme-Verwaltung ### Navigationspfad Das Themesystem befindet sich in den VergeOS-Systemeinstellungen und ist über die Verwaltungsoberfläche zugänglich. 1. **Systemeinstellungen aufrufen**: Navigieren Sie zu **System** > **Einstellungen** um den Bereich für die Systemkonfiguration aufzurufen 2. **Ort der Theme-Verwaltung**: * Im linken Navigationsmenü der Systemeinstellungen finden Sie **Designs** als eigenen Bereich * Der Bereich „Themes“ zeigt vorhandene Themes in Tabellenform mit den Spalten Name, Beschreibung und Änderungsdatum an ### Theme-Verwaltungsoberfläche Die Seite „Systemeinstellungen“ zeigt vorhandene Themes im **Designs** Bereich an und zeigt Folgendes: * **Namen**: Die Theme-Kennung (z. B. „light“) * **Beschreibung**: Theme-Beschreibung (z. B. „Light theme pack for Verge.io“) * **Geändert**: Datum und Uhrzeit der letzten Änderung ## Theme-Erstellung und -Verwaltung ### Neue Themes erstellen **Zugriff auf neues Theme**: Klicken Sie auf **Neues Theme** im linken Navigationsmenü, um die Oberfläche zur Theme-Erstellung aufzurufen. **Komponenten der Theme-Erstellungsoberfläche**: #### Grundlegende Theme-Konfiguration * **Namensfeld**: Erforderliches Feld zur Identifizierung des Themes * **Beschreibungsfeld**: Optionaler Beschreibungstext für die Theme-Dokumentation * **Aktiviert-Schalter**: Aktiviert oder deaktiviert das Theme * **Dropdown „Basierend auf“**: Wählen Sie als Grundlage zwischen „Light system theme“ und „Dark system theme“ #### Farb-Property-Gruppen Der Abschnitt „Farben“ organisiert anpassbare UI-Elemente in logische Gruppen: **Diagramme**: * Sechs einzelne Farb-Properties für Diagramme (Diagramm 1–6) * Jede Property steuert Farben für verschiedene Datenreihen in Diagrammen und Visualisierungen * Enthält Farbwähler, Hexwert-Eingabe, Transparenzregler und individuelle Zurücksetzen-Funktion **Ladeanzeige**: * **Property „Ladeanzeige“**: Steuert das Erscheinungsbild des Haupt-Ladeindikators * **Ladekreis-Animation**: Konfiguriert die Farben der animierten Ladeelemente * Echtzeitvorschau von Ladeanimationen **Linke Navigation**: * **Hintergrund**: Hintergrundfarbe des Navigationsbereichs * **Text**: Standardtextfarbe der Navigation * **Hover**: Hintergrundfarbe für Hover-Zustände * **Hover-Text**: Textfarbe bei Hover-Interaktionen * **Text deaktiviert**: Farbe für inaktive Navigationselemente **Kopfzeile**: * **Hintergrund**: Hintergrund der Haupt-Kopfzeile * **Aktiver Button**: Hervorhebung aktiver Schaltflächen * **Button-Text**: Standardtextfarbe von Schaltflächen * **Button-Hover-Text**: Textfarbe beim Überfahren von Schaltflächen * **Hintergrund der Navigationsleiste**: Farbe des Navigationsbereichs in der Unterkopfzeile **Allgemein**: * **Hintergrund**: Gesamter Anwendungs-Hintergrund * **Kartenhintergrund**: Hintergrund für Komponenten im Kartenstil * **Kartenrahmen**: Rahmenfarben für Panels und Karten * **Text**: Primäre Textfarbe in der gesamten Oberfläche #### Asset-Verwaltung **Optionen für benutzerdefinierte Logos**: * **Benutzerdefiniertes Logo (groß)**: Bilder mit 144x36 Pixeln für die standardmäßige Logoanzeige * **Benutzerdefiniertes Logo (klein)**: Bilder mit 44x44 Pixeln für kompakte Bereiche * Unterstützte Formate: JPG, PNG, SVG **Benutzerdefiniertes Favicon**: * ICO-Dateiformat-Unterstützung für die Anpassung des Browser-Tabs * Link zum Bereich „Dateien“ für die Verwaltung des Asset-Uploads #### Werkzeuge zur Farbanpassung **Steuerung einzelner Properties**: * **Farbwähler**: Visuelle Oberfläche zur Farbauswahl * **Hexwert-Eingabe**: Direkte Eingabe eines hexadezimalen Farbcodewerts * **Transparenzregler**: Transparenzsteuerung für jede Farb-Property * **Zurücksetzen-Schaltfläche**: Setzt eine einzelne Property auf die Standardwerte zurück * **Globales Zurücksetzen**: Link „Zurücksetzen“, um alle Properties in einer Gruppe wiederherzustellen #### Vorschaufunktion **Echtzeitvorschau**: * **Vorschaubereich**: Zeigt eine Live-Darstellung der Theme-Änderungen * **Kontextsensitive Vorschauen**: Unterschiedliche Visualisierungen je nach ausgewählter Property-Gruppe * **Interaktive Elemente**: Die Vorschau enthält Hover-Zustände und interaktive Komponenten ## Erklärung der Theme-Property-Gruppen ### Property-Gruppe „Diagramme“ Steuert die Farbpalette für Diagramme, Grafiken und Datenvisualisierungen in ganz VergeOS. Jede Diagramm-Property (1–6) steht für unterschiedliche Farben von Datenreihen und ermöglicht so ein konsistentes Branding der Datenvisualisierung über Dashboards und Berichtoberflächen hinweg. ### Property-Gruppe „Ladeanzeige“ Verwaltet das Erscheinungsbild von Ladeanzeigen und Fortschrittselementen. Die Property „Ladeanzeige“ steuert die Farbe des Haupt-Spinners oder der Fortschrittsleiste, während „Ladekreis-Animation“ animierte Elemente innerhalb der Ladeoberflächen verarbeitet. ### Property-Gruppe „Linke Navigation“ Passt das Haupt-Navigationspanel an, das auf der linken Seite der VergeOS-Oberfläche angezeigt wird. Die Properties steuern Hintergrundfarben, Textfarben und interaktive Zustände, damit die Navigation funktional und visuell konsistent bleibt. ### Property-Gruppe „Kopfzeile“ Verwaltet die obere Kopfzeile und ihre Komponenten, einschließlich Schaltflächen, Navigationselementen und Hintergrundfarben. Diese Einstellungen wirken sich auf die primäre Kopfzeile der Benutzeroberfläche aus, die die Systemnavigation und Benutzersteuerungen enthält. ### Property-Gruppe „Allgemein“ Steuert grundlegende Interface-Elemente, darunter allgemeine Hintergründe, Kartenkomponenten, Rahmen und primäre Textfarben. Diese Properties bilden die visuelle Grundlage, auf der andere Komponenten aufbauen. ## Integration mit bestehendem Branding ### Asset-Integration Benutzerdefinierte Logos und Favicons, die über das Themesystem hochgeladen werden, werden in die Farbschemata integriert, um eine vollständige visuelle Anpassung zu ermöglichen. Assets behalten ihre Qualität und Positionierung bei und passen sich gleichzeitig an die gewählte Farbpalette an. ## Anwendung und Verwaltung von Themes ### Theme-Aktivierung Themes werden unmittelbar nach dem Speichern mit der Schaltfläche „Submit“ angewendet. Mit dem Aktiviert-Schalter können Themes erstellt und gespeichert werden, ohne sofort aktiviert zu werden. ### Theme-Hierarchie In Multi-Tenant-Umgebungen gelten Themes für die aktuelle Mandantenebene und werden an darunterliegende Ebenen vererbt, sofern sie nicht überschrieben werden. Dadurch ist ein konsistentes Branding über organisatorische Hierarchien hinweg möglich, während bei Bedarf Anpassungen erlaubt sind. ### Persistenz von Themes Theme-Einstellungen werden als Teil der VergeOS-Systemkonfiguration gespeichert und bleiben über Systemaktualisierungen und Neustarts hinweg erhalten. Theme-Konfigurationen können im Rahmen von System-Backup- und Wiederherstellungsprozessen exportiert und importiert werden. ## Unterstützte Dateiformate und Spezifikationen ### Anforderungen an Logos * **Großes Logo**: 144x36 Pixel, Formate JPG/PNG/SVG * **Kleines Logo**: 44x44 Pixel, Formate JPG/PNG/SVG * Empfohlene Dateigröße: unter 1 MB für optimale Leistung ### Favicon-Spezifikationen * **Formatieren**: ICO-Dateiformat erforderlich * **Empfohlene Größen**: 16x16, 32x32, 48x48 Pixel in einer einzelnen ICO-Datei * Unterstützung für PNG als Fallback in modernen Browsern ### Unterstützung für Farbformate * **Hex-Werte**: Standardmäßige 6-stellige hexadezimale Farbcodes (#RRGGBB) * **Transparenz**: Prozentbasierte Transparenz (0–100 %) * **Farbwähler**: Visuelle Oberfläche zur RGB/HSV-Auswahl * **Zurücksetzen-Funktion**: Sofortige Rückkehr zu den Systemstandards Die VergeOS-Theme-Funktionalität bietet umfassende Möglichkeiten zur visuellen Anpassung, mit denen Organisationen ein einheitliches, gebrandetes Erscheinungsbild erstellen können, während gleichzeitig Benutzerfreundlichkeit und Zugänglichkeitsstandards über ihre Virtualisierungsplattform hinweg erhalten bleiben. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.verge.io/run-the-platform/de/systemadministration/themes.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.