Vom Ausgangstheme zur eigenen Farbpalette
- 01
Ein Ausgangstheme wählen
Wählen Sie ein kompatibles Theme mit vollständigen Farbdaten. Die Seite zeigt die Anzahl kompatibler Themes getrennt von der Gesamtzahl veröffentlichter Themes.
- 02
Eine Farbrolle auswählen und bearbeiten
Wählen Sie eine Hintergrund-, Text-, Akzent- oder Statusfarbe und ändern Sie ihren Hexadezimalwert. Bearbeiten Sie den hellen und dunklen Modus getrennt. Prüfen Sie Text, Code und Bedienelemente in der daneben angezeigten Gesprächsvorschau.
- 03
Vergleichen und prüfen
Vergleichen Sie die Palette mit dem ursprünglichen Theme und prüfen Sie den niedrigsten Kontrast zwischen Text und den verschiedenen Vorschauhintergründen. Normaler Text benötigt mindestens 4,5:1. Prüfen Sie anschließend auch Fokus und Tastaturbedienung in der tatsächlichen Oberfläche.
- 04
Exportieren und ein Theme erstellen
Laden Sie CSS oder JSON mit beiden Modi herunter. Die exportierte JSON-Datei lässt sich wieder importieren. Kopieren Sie die Anweisungen, damit ein Agent aus der Palette ein separates Theme erstellen, installieren und in der tatsächlichen Anwendung testen kann.
Beispiel: ein ruhigerer Lesearbeitsplatz
Beginnen Sie mit einem Theme, das Ihnen gefällt. Wählen Sie für den Lesehintergrund einen etwas wärmeren neutralen Farbton und prüfen Sie, ob ergänzende Texte lesbar bleiben. Eine gut erkennbare Akzentfarbe hebt wichtige Schaltflächen und ausgewählte Zustände hervor. Passen Sie den dunklen Modus unabhängig an: Das bloße Umkehren der Farben des hellen Modus kann Warnungen oder Code schwer lesbar machen.
Erstellen Sie aus meiner exportierten Token-Lab-JSON-Datei ein separates DSH-Theme für 0.1.3-alpha.1 mit dem Quell-Commit d347e703908d0406b7a7ef80e3a0e594d86b2215. Behalten Sie alle 13 semantischen Tokens im hellen und dunklen Modus bei. Prüfen Sie den Textkontrast, erstellen Sie das Paket und testen Sie Seitenleiste, Nachrichten, Code, Menüs und Eingabefelder im tatsächlichen Harness. Geben Sie die Schritte für Installation, Neustart, Theme-Wechsel und Wiederherstellung an. Bezeichnen Sie das Theme erst nach den tatsächlichen Tests als verifiziert.Weiter
Häufige Fragen
Bevor Sie eine Änderung vornehmen
Antworten zu Formaten, Kompatibilität, Nachweisen und Rücksetzungen.
Was prüft dieser Leitfaden?
Dieser Leitfaden behandelt: Vollständige Bearbeitung des hellen und dunklen Modus; Prüfung des Textkontrasts; Export von CSS, JSON und Anweisungen für einen Agent
Womit sollte ich beginnen?
Sie müssen nicht bei null anfangen. Mit Token Lab passen Sie die Farben eines vorhandenen Themes einzeln an und sehen die Änderungen sofort in einer Gesprächsvorschau.
Welche Grenze ist besonders wichtig?
Token Lab bearbeitet einen Palettenentwurf und ändert das installierte Theme nicht sofort. Erstellen Sie daraus ein Theme für 0.1.3-alpha.1 und prüfen Sie Seitenleiste, Nachrichten, Code, Menüs, Eingabefelder sowie Theme-Wechsel und Wiederherstellung in der tatsächlichen Anwendung. Der Entwurf wird vorübergehend im aktuellen Browser-Tab gespeichert. Exportieren Sie JSON, um eine dauerhafte Kopie zu behalten.
Installiert der CSS-Export das Theme?
Nein. CSS und JSON sind Palettendateien. Erstellen Sie mit den Anweisungen für den Agenten ein separates Paket, installieren Sie es und prüfen Sie die Wirkung in der tatsächlichen Oberfläche.
Kann ich nach bestandener Kontrastprüfung veröffentlichen?
Der Kontrast prüft nur einen Teil der Farbgestaltung. Prüfen Sie zusätzlich die tatsächliche Oberfläche, den Tastaturfokus, verschiedene Bildschirmgrößen und das Laufzeitverhalten.
Lernen fortsetzen
Mit verifizierten Nachweisen fortfahren
Vergleichen Sie veröffentlichte Artefakte oder kehren Sie zur Installationsdokumentation zurück.