Saltar al contenido
DSH Themes

Cambiar idioma

Abrir navegación

TU PALETA, EN VIVO

13 × 2

Crea una paleta en la que quieras trabajar

Parte de 6 temas y edita 13 colores en claro y oscuro. Revisa el resultado y el contraste, y exporta CSS, JSON o un prompt para tu agente.

Crea tu propia paleta

Esta vista usa tus colores. Crea e instala el tema para aplicarlos en DSH.

Elige tu punto de partida

Elige un tema base, cambia el modo de vista previa y selecciona una función de color para editar.

Tema verificado

Océano profundoEnlace de grafitoConsola de papelRastro solarCircuito de jadeSeñal nítida

Modo de vista previa

ClaroOscuro
Desde un primer color hasta una paleta terminada

6

Temas verificados compatibles con tokens

21

Temas publicados en el directorio

Desde un primer color hasta una paleta terminada

  1. 01

    Elige una base

    Empieza con un tema compatible que ya incluya todas las funciones de color.

  2. 02

    Edita y previsualiza

    Ajusta los colores claros y oscuros y observa el resultado en la vista previa de la conversación.

  3. 03

    Comprueba y exporta

    Comprueba el contraste del texto y guarda CSS o JSON, o envía la paleta a tu agente para crear un tema.

Crea tu propia paleta

Elige una función y modifica su color en cada modo para ver el resultado.

Vista previa de tu paleta

ConversaciónAcción de marcaEnviar

Elige por dónde empezar

Editar el fondo de lecturaElige un color de acentoAjustar colores de estado

Mapa interactivo de 13 tokens

01020304050607080910111213

Token 07 / 13

Acción de marca

Acciones principales, controles seleccionados, enlaces y acentos de marca.

--dsw-alias-brand-primary

0 colores modificados

Usa tu paleta en DSH

Copia el prompt para crear un tema con tu Agent. CSS y JSON incluyen ambos modos; puedes importar el JSON para seguir editando.

Los colores importados sustituyen ambos modos de Océano profundo. El tema base sigue seleccionado; el nombre del tema en el archivo no lo cambia.

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"
    }
  }
}