VergeOS-Theme-Funktionalität

Wie man benutzerdefinierte UI-Themes in VergeOS erstellt und verwaltet, einschließlich Farbanpassung für Diagramme, Navigation, Header, Ladeelemente, benutzerdefinierte Logos, Favicons und Theme-Hierarchie.

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.