Accéder au contenu principal
DSH Themes

Changer de langue

Ouvrir la navigation

VOTRE PALETTE, EN DIRECT

13 × 2

Cré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.

Créez votre palette

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.

Thème vérifié

Océan profondRelais graphiteConsole papierTrace solaireCircuit de jadeSignal fort

Mode de prévisualisation

ClairSombre
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

  1. 01

    Choisissez une base

    Commencez avec un thème compatible qui inclut déjà tous les rôles de couleur.

  2. 02

    Modifier et prévisualiser

    Ajustez les couleurs claires et sombres et voyez-les appliquées à l'aperçu de la conversation.

  3. 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

ConversationTexte principalEnvoyer

Choisissez par où commencer

Modifier le fond de lectureChoisissez une couleur d'accentAjuster les couleurs d'état

Carte interactive de 13 jetons

01020304050607080910111213

Jeton 08 / 13

Texte principal

Les titres, libellés et contenus prioritaires qui doivent être les plus lisibles.

--dsw-alias-label-primary

0 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 Océan profond. 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": "deep-ocean",
  "tokens": {
    "--dsw-alias-bg-base": {
      "light": "#F4F8FD",
      "dark": "#07121F"
    },
    "--dsw-alias-bg-layer-1": {
      "light": "#FFFFFF",
      "dark": "#0C1B2B"
    },
    "--dsw-alias-bg-layer-2": {
      "light": "#E9F2FC",
      "dark": "#11263C"
    },
    "--dsw-alias-bg-overlay": {
      "light": "#FFFFFF",
      "dark": "#142B43"
    },
    "--dsw-alias-border-l1": {
      "light": "#D6E3F1",
      "dark": "#24415E"
    },
    "--dsw-alias-border-l2": {
      "light": "#B7CCE2",
      "dark": "#37617E"
    },
    "--dsw-alias-brand-primary": {
      "light": "#1769E0",
      "dark": "#62A8FF"
    },
    "--dsw-alias-label-primary": {
      "light": "#132D46",
      "dark": "#EFF6FF"
    },
    "--dsw-alias-label-secondary": {
      "light": "#526C81",
      "dark": "#A9BDD0"
    },
    "--dsw-alias-state-error-primary": {
      "light": "#B93445",
      "dark": "#FF7A86"
    },
    "--dsw-alias-state-success-primary": {
      "light": "#167656",
      "dark": "#55D6A6"
    },
    "--dsw-alias-state-warn-primary": {
      "light": "#9B5E07",
      "dark": "#FFC666"
    },
    "--dsw-specific-sidebar-fill": {
      "light": "#E6F0FB",
      "dark": "#091827"
    }
  }
}