De un tema base a tu propia paleta
- 01
Elige un tema base
Selecciona un tema compatible con todos los datos de color. La página muestra por separado el número de temas compatibles y el total de temas publicados.
- 02
Elige una función de color y edítala
Selecciona un color de fondo, texto, acento o estado y cambia su valor hexadecimal. Ajusta los modos claro y oscuro por separado y revisa el texto, el código y los controles en la vista previa de conversación que aparece al lado.
- 03
Compara y comprueba
Compara la paleta con el tema original y comprueba la relación de contraste más baja entre el texto y los distintos fondos de la vista previa. El texto normal necesita al menos 4,5:1. Después, revisa también el foco y la navegación con el teclado en la interfaz real.
- 04
Exporta y crea un tema
Descarga CSS o JSON con ambos modos. Puedes volver a importar el JSON exportado. Copia las instrucciones para que un agente cree, instale y pruebe un tema independiente a partir de esta paleta.
Ejemplo: un espacio de trabajo de lectura más tranquilo
Parte de un tema que te guste, da al fondo de lectura un tono neutro ligeramente más cálido y comprueba que el texto secundario siga siendo legible. Elige un color de acento que permita reconocer los botones principales y los estados seleccionados. Ajusta el modo oscuro por separado: invertir sin más los colores del modo claro puede dificultar la lectura de las advertencias o del código.
Crea un tema DSH independiente a partir del JSON que he exportado de Token Lab, para la versión 0.1.3-alpha.1 y el commit del código fuente d347e703908d0406b7a7ef80e3a0e594d86b2215. Conserva los 13 tokens semánticos en los modos claro y oscuro. Comprueba el contraste del texto, crea el paquete y prueba la barra lateral, los mensajes, el código, los menús y los campos de entrada en Harness. Proporciona los pasos de instalación, reinicio, cambio de tema y restauración. No afirmes que el tema está verificado antes de probarlo realmente.Continuar
Preguntas comunes
Antes de realizar un cambio
Respuestas sobre formatos, compatibilidad, evidencia y reversión.
¿Qué cubre esta guía?
Esta guía cubre: Edición completa de los modos claro y oscuro; Comprobación del contraste del texto; Exportación de CSS, JSON e instrucciones para un agente
¿Por dónde debo empezar?
No necesitas diseñar una paleta desde cero. Token Lab permite ajustar los colores de un tema existente uno a uno y ver los cambios al instante en una vista previa de conversación.
¿Qué límite debo tener presente?
Token Lab edita un borrador de la paleta y no cambia de inmediato el tema instalado. Debes crear un tema para 0.1.3-alpha.1 y comprobar la barra lateral, los mensajes, el código, los menús, los campos de entrada, el cambio de tema y la restauración en la interfaz real. El borrador se guarda temporalmente en la pestaña actual del navegador; exporta el JSON para conservar una copia duradera.
¿Exportar CSS instala el tema?
No. CSS y JSON son archivos de paleta. Utilice las instrucciones para el agente para crear un paquete independiente; después, instálelo y compruebe su efecto en la interfaz real.
¿Puedo publicar cuando el contraste supera la comprobación?
El contraste solo verifica una parte de la paleta. También debe comprobar la interfaz real, el foco del teclado, los distintos tamaños de pantalla y el comportamiento en ejecución.
Continuar aprendiendo
Continuar a partir de la evidencia verificada
Compare los artefactos publicados o regrese a la documentación de instalación.