Tokens del tema

Cuando el panel avisa que está listo, y otra vez cada vez que la persona cambia el tema o el acento, el SDK escribe el tema de Deska en document.documentElement como propiedades CSS personalizadas y ajusta color-scheme. Usa esas propiedades y el panel se ve bien en oscuro, en claro y con cualquier acento, sin escuchar nada:

:root { color-scheme: dark light; }

body {
  margin: 0;
  background: var(--deska-bg);
  color: var(--deska-text);
  font: 13px/1.45 var(--deska-font-ui);
}

.card {
  background: var(--deska-surface);
  border: 1px solid var(--deska-border);
  border-radius: var(--deska-radius);
}

.hint { color: var(--deska-text-secondary); }

button.primary {
  background: var(--deska-accent);
  color: var(--deska-on-accent);
  border-radius: var(--deska-radius-small);
}

:focus-visible { outline: 2px solid var(--deska-focus); }

.error { color: var(--deska-danger); }
code { font-family: var(--deska-font-mono); }

Los valores llegan resueltos: un color es un rgb() sólido, nunca un var() ni un color-mix(). Donde el color propio de la app es translúcido, Deska lo pinta primero sobre el fondo del panel, así que recibes justo lo que ve la persona, y puedes calcular el contraste con él.

La lista puede crecer, así que usa los nombres que conoces e ignora el resto. El acento sigue lo que elige la persona, así que nunca supongas que es coral. Theme Inspector muestra cada token en vivo con su valor y su contraste, y copia el var() de un token con un clic.

mode dice hacia dónde se inclina el fondo. Deska llama claro a un tema cuando la luminancia relativa de --deska-bg pasa de alrededor de 0.18 (0.179 exacto), el punto donde el texto oscuro empieza a leerse mejor que el blanco. Los temas claros con fondo de papel tintado quedan cerca de 0.48, así que un punto medio de 0.5 los habría llamado oscuros.

const { mode, tokens } = deska.theme
const chartPalette = mode === 'light' ? LIGHT_SERIES : DARK_SERIES
const ground = tokens['--deska-bg']

Lee mode para lo que los tokens no pueden llevar, como los colores de las series de un gráfico o una imagen con versión oscura y clara. Para todo lo demás, los tokens ya son la respuesta correcta.

Un canvas, una escena WebGL o un SVG armado con script no pueden usar var(). Lee el valor resuelto del documento y vuelve a dibujar con el evento theme:

function draw() {
  const css = getComputedStyle(document.documentElement)
  ctx.fillStyle = css.getPropertyValue('--deska-accent')
  ctx.strokeStyle = css.getPropertyValue('--deska-border')
  // ...
}

await deska.ready()
draw()
deska.on('theme', draw)

• Pon en --deska-text el texto que la gente tiene que leer. --deska-text-secondary es para etiquetas, y --deska-text-tertiary solo para pistas: en los temas claros no alcanza el contraste de un texto principal sobre el fondo.
• Usa el acento como relleno o marca, con --deska-on-accent encima. Como texto sobre el fondo, el acento de un tema claro también puede quedarse corto.
• No desvanezcas una fila entera para hacerla secundaria: sus acciones y su anillo de foco se desvanecen con ella. Usa un token de texto más tenue.
• Revisa los dos: cambia el tema de Deska con el panel abierto, o cambia el tema en la herramienta de vista previa.