VOTRE PALETTE, EN DIRECT
13 × 2Créez une palette dans laquelle vous souhaitez travailler
Partez de 6 thèmes, modifiez 13 couleurs en clair et en sombre, vérifiez l’aperçu et le contraste, puis exportez du CSS, du JSON ou un prompt pour votre agent.
Cet aperçu utilise vos couleurs. Créez et installez le thème pour les appliquer dans DSH.
Choisissez votre point de départ
Choisissez un thème de base, changez le mode d'aperçu, puis choisissez un rôle de couleur à modifier.
D'une première couleur à une palette finie
6
Themes vérifiés compatibles avec les jetons
21
Themes publiés dans le catalogue
D'une première couleur à une palette finie
- 01
Choisissez une base
Commencez avec un thème compatible qui inclut déjà tous les rôles de couleur.
- 02
Modifier et prévisualiser
Ajustez les couleurs claires et sombres et voyez-les appliquées à l'aperçu de la conversation.
- 03
Vérifier et exporter
Vérifiez le contraste du texte, puis enregistrez CSS ou JSON, ou envoyez la palette à votre agent pour créer un thème.
Créez votre palette
Choisissez un rôle et modifiez sa couleur dans chaque mode pour voir le résultat.
Prévisualisez votre palette
Choisissez par où commencer
Carte interactive de 13 jetons
Jeton 01 / 13
Canevas de base
L’arrière-plan de la page derrière toutes les surfaces de travail.
--dsw-alias-bg-base0 couleurs modifiées
Utilisez votre palette dans DSH
Copiez le prompt Agent pour créer un thème. CSS et JSON contiennent les deux modes ; réimportez le JSON pour poursuivre l’édition.
Les couleurs importées remplacent les deux modes de Trace solaire. Le thème de base reste sélectionné ; le nom du thème dans le fichier ne le change pas.
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"
}
}
}