Der Skin-Vertrag definiert, wie die Shell und ihre Add-ins visuell gestaltet werden. Er besteht aus einer Farbpalette, semantischen Tokens, einer Zustandsabbildung, Grafik-Elementen und Größen-Properties. Jedes Skin-Paket implementiert diesen Vertrag, und der Host wendet ihn auf alle Controls an — sowohl die eigenen als auch die der Add-ins.

Für Add-in-Entwickler bedeutet das: Wenn ein Add-in Standard-LCL-Controls verwendet, wird es automatisch korrekt geskinnt. Nur Add-ins mit eigener Zeichenlogik müssen den Skin-Vertrag aktiv abfragen und die richtigen Tokens verwenden.

Die Shell liefert zwei Skins aus: WShell (kühles Blau-Grau, Light + Dark) und Meadow (warme Cremetöne mit Terracotta-Akzent, nur Light). Beide implementieren denselben Vertrag mit identischer Token-Struktur — nur die Palettenwerte unterscheiden sich. Alle Beispiele auf dieser Seite zeigen beide Skins im Vergleich.

Zurück zur Übersicht.

Die Shell enthält zwei vorgefertigte Skins, die im Skin-Picker unter der Kategorie WShell nebeneinander stehen.

WShell ist das Standard-Skin mit einer kühlen Blau-Grau-Palette, inspiriert von modernen IDE-Oberflächen. Es bietet eine Light- und eine Dark-Variante. Die Akzentfarbe ist ein sattes Blau (#005FB8), das für Links, aktive Tabs und Fokus-Indikatoren verwendet wird.

Meadow ist ein warmes Skin mit cremefarbenen Hintergründen, sanften Beige-Borders und einem Terracotta-Akzent (#C15F3C). Es bietet ausschließlich eine Light-Variante. Die Farbgebung orientiert sich an natürlichen, erdigen Tönen und erzeugt eine augenschonende Arbeitsumgebung, die sich bewusst vom kühlen Standard abhebt.

Die folgende Tabelle vergleicht die wichtigsten Palettenwerte beider Skins:

Beide Skins teilen dieselben SVG-Elemente, dieselbe Token-Struktur und dieselbe StateMap. Nur die Palette unterscheidet sich. Add-ins, die den Skin-Vertrag korrekt einhalten, funktionieren in beiden Skins automatisch.

Ein Skin besteht aus einer manifest.json-Datei und einem Verzeichnis mit Grafik-Elementen. Die Manifest-Datei folgt dem Schema WvdS.SkinPackage/1.0 und enthält fünf Abschnitte:

1. Palette — Basis-Farbdefinitionen
2. Tokens — Semantische Zuordnung von UI-Elementen zu Palettenfarben
3. StateMap — Farbzuordnung für visuelle Zustände (Normal, Hover, Pressed, …)
4. Elements — SVG- und PNG-Grafiken für UI-Bauteile (Scrollbars, Tabs, Buttons, …)
5. Properties — Abstände, Schriftgrößen, Rahmenbreiten und Rendering-Optionen

Die Palette definiert die Grundfarben als Hex-Werte. Alle anderen Teile des Skins referenzieren ausschließlich Palettennamen, niemals rohe Hex-Werte. Dadurch kann ein Dark-Theme die gesamte Farbgebung ändern, indem es nur die Palette überschreibt.

Die Namenskonvention folgt einem Intensitätssystem: 0 ist der Basiswert, positive Zahlen (100, 200) werden heller, negative (-100, -200) werden dunkler. In der Dark-Variante kehrt sich die Richtung um — 100 wird dunkler und -100 heller.

Die Zahlen 100, 50, 25 stehen für die relative Kontrastwirkung. Foreground100 hat den höchsten Kontrast zum Hintergrund, Foreground25 den niedrigsten. Dieses System macht es einfach, Texthierarchien zu gestalten, ohne über konkrete Farbwerte nachdenken zu müssen.

Die Primärfarbe ist die Hauptakzentfarbe der Anwendung. Sie wird für interaktive Elemente verwendet: Links, aktive Tabs, ausgewählte Baumknoten und Fokus-Indikatoren. In der Dark-Variante wechselt der Basiswert von #005FB8 zu #0078D4.

Das Brush/Paint-System ist die interne Farbmaschine für SVG-Elemente. Es trennt Vordergrund (Brush) und Hintergrund (Paint) konsequent:

Neben den generischen Palettenfarben definiert das Skin auch Farben für spezifische Shell-Bereiche:

Tokens bilden die Brücke zwischen einem UI-Element und seiner Palettenfarbe. Ein Token sagt: „Dieses UI-Element verwendet diese Palettenfarbe.“ Wenn sich die Palette ändert (weil der Benutzer das Theme wechselt), ändern sich automatisch alle UI-Elemente, die auf die betroffenen Palettenfarben verweisen.

Auszug aus den wichtigsten Tokens:

Die StateMap definiert, wie Farben sich mit dem visuellen Zustand eines Controls ändern. Jeder Zustand hat zwei Farbkanäle: Mask (Strichfarbe/Vordergrund) und Element (Füllfarbe/Hintergrund).

Die StateMap ist zentral für die SVG-Farbersetzung. SVG-Grafiken verwenden die Platzhalterfarben #707070 (wird zu Mask ersetzt) und #000000 (wird zu Element ersetzt). Der Host rendert dasselbe SVG in verschiedenen Zuständen, indem er die Platzhalter durch die Zustandsfarben ersetzt.

Das Skin liefert über 70 SVG- und PNG-Grafiken für UI-Bauteile. Jedes Element hat einen Namen, einen Dateipfad und Metadaten:

Jedes Element kann mehrere Zustands-Varianten enthalten. Die Varianten sind vertikal gestapelt (jeder Zustand hat eine feste Höhe), und der Host wählt anhand der StateMap den passenden Ausschnitt.

Properties steuern Abstände, Schriftgrößen, Rahmenbreiten und Rendering-Verhalten. Sie sind die dritte Dimension des Skins neben Farbe und Grafik.

Das WShell-Skin enthält eine vollständige Dark-Variante. Der Host wechselt zwischen Light und Dark, indem er die Palette austauscht. Die Token-Zuordnungen, die StateMap und die Properties bleiben identisch — nur die Farbwerte ändern sich.

Wesentliche Unterschiede in der Dark-Palette:

Die Inversion ist konsistent: Was in Light hell ist, ist in Dark dunkel, und umgekehrt. Die Intensitätsstufen bleiben relativ erhalten — Foreground100 ist immer der kontrastreichste Text, Foreground25 immer der dezenteste.

Add-ins, die Standard-LCL-Controls verwenden (TButton, TEdit, TListView, etc.), werden automatisch geskinnt. Der Host wendet die Palette und die StateMap auf alle Controls an, ohne dass das Add-in etwas tun muss.

Wenn ein Add-in eigene Zeichenlogik verwendet (Canvas.Brush.Color := …), muss es die Skin-Farben über IThemeService abfragen und auf Theme-Wechsel reagieren:

procedure TMyCustomControl.Paint;
begin
  // Nicht: Canvas.Brush.Color := clWhite;
  // Stattdessen: Skin-Token verwenden
  Canvas.Brush.Color := FHost.Theme.GetColor('EditBackground0');
  Canvas.Font.Color := FHost.Theme.GetColor('EditForeground100');
  Canvas.FillRect(ClientRect);
end;

// Auf Theme-Wechsel reagieren
AContext.Subscribe(
  FHost.Theme.OnDidChangeTheme(
    TThemeChangeHandler.Create(
      procedure(const AEventName, APayload: string)
      begin
        Invalidate;  // Neuzeichnen mit neuen Farben
      end
    )
  )
);

Add-ins, die eigene Themes als Contribution bereitstellen, legen eine Theme-Datei an, die die Palette überschreibt. Das Kapitel Manifest beschreibt die Deklaration, und das Paketformat erklärt, wo die Datei im Paket liegt.

Weiter zu Sicherheit oder zurück zur Übersicht.