Zum Hauptinhalt springen
DSH Themes

Sprache wechseln

Navigation öffnen

IHRE PALETTE, LIVE

13 × 2

Erstellen Sie eine Palette, mit der Sie arbeiten möchten

Wählen Sie aus 6 Themes, bearbeiten Sie 13 Farben für Hell und Dunkel, prüfen Sie Vorschau und Kontrast und exportieren Sie CSS, JSON oder einen Agenten-Prompt.

Gestalten Sie Ihre Farbpalette

Die Vorschau zeigt Ihre Farben. Erstellen und installieren Sie das Theme, um sie in DSH zu verwenden.

Wählen Sie Ihren Startpunkt

Wählen Sie ein Basisthema aus, wechseln Sie den Vorschaumodus und wählen Sie dann eine Farbrolle zum Bearbeiten aus.

Verifiziertes Thema

Tiefer OzeanGraphit-RelaisPapierkonsoleSonnenspurJade-SchaltkreisStarkes Signal

Vorschaumodus

HellDunkel
Von der ersten Farbe bis zur fertigen Palette

6

Token-kompatible verifizierte Themes

21

Veröffentlichte Themes im Verzeichnis

Von der ersten Farbe bis zur fertigen Palette

  1. 01

    Wählen Sie eine Basis

    Beginnen Sie mit einem kompatiblen Theme, das bereits alle Farbrollen enthält.

  2. 02

    Bearbeiten und Vorschau

    Passen Sie helle und dunkle Farben an und sehen Sie, wie sie auf die Konversationsvorschau angewendet werden.

  3. 03

    Prüfen und exportieren

    Überprüfen Sie den Textkontrast, speichern Sie dann CSS oder JSON oder senden Sie die Palette an Ihren Agenten, um ein Design zu erstellen.

Gestalten Sie Ihre Farbpalette

Wählen Sie eine Rolle und ändern Sie die Farbe für beide Modi. Die Vorschau reagiert sofort.

Vorschau Ihrer Palette

UnterhaltungStarke GrenzeSenden

Wählen Sie, wo Sie beginnen möchten

Bearbeiten Sie den LesehintergrundWählen Sie eine AkzentfarbePassen Sie die Statusfarben an

Interaktive Karte mit 13 Tokens

01020304050607080910111213

Token 06 / 13

Starke Grenze

Betonte Grenzen für Eingaben, aktive Bereiche und wichtige Trennungen.

--dsw-alias-border-l2

0 Farben geändert

Palette in DSH verwenden

Kopieren Sie den Agent-Prompt, um ein Theme zu erstellen. CSS und JSON enthalten beide Modi. JSON lässt sich zur weiteren Bearbeitung importieren.

Die importierten Farben ersetzen beide Modi von Sonnenspur. Das ausgewählte Ausgangstheme bleibt erhalten; der Theme-Name in der Datei löst keinen Wechsel aus.

JSON · 13 × 2
{
  "format": "dsh-token-lab",
  "version": 1,
  "baseTheme": "solar-trace",
  "tokens": {
    "--dsw-alias-bg-base": {
      "light": "#FFF7F1",
      "dark": "#1A100D"
    },
    "--dsw-alias-bg-layer-1": {
      "light": "#FFFFFF",
      "dark": "#241612"
    },
    "--dsw-alias-bg-layer-2": {
      "light": "#FCE9DC",
      "dark": "#312019"
    },
    "--dsw-alias-bg-overlay": {
      "light": "#FFFCF9",
      "dark": "#3A261E"
    },
    "--dsw-alias-border-l1": {
      "light": "#E9D4C6",
      "dark": "#53382C"
    },
    "--dsw-alias-border-l2": {
      "light": "#CFAE99",
      "dark": "#76513F"
    },
    "--dsw-alias-brand-primary": {
      "light": "#C84F24",
      "dark": "#FF956B"
    },
    "--dsw-alias-label-primary": {
      "light": "#48291D",
      "dark": "#FFF1E9"
    },
    "--dsw-alias-label-secondary": {
      "light": "#765B4E",
      "dark": "#CEB3A6"
    },
    "--dsw-alias-state-error-primary": {
      "light": "#B72F3D",
      "dark": "#FF7680"
    },
    "--dsw-alias-state-success-primary": {
      "light": "#39734E",
      "dark": "#72D19A"
    },
    "--dsw-alias-state-warn-primary": {
      "light": "#9B5807",
      "dark": "#FFC062"
    },
    "--dsw-specific-sidebar-fill": {
      "light": "#F9E6D9",
      "dark": "#1E120F"
    }
  }
}