Repository navigation
Tema Puelche
Un tema oscuro pensado para sesiones largas. La idea central es que la identidad de la extensión vive en el chrome de la interfaz — el cursor, la pestaña activa, los badges — y no en el resaltado de sintaxis.
Actívalo con Cmd/Ctrl + K seguido de Cmd/Ctrl + T y elige Puelche en la lista.
La paleta anterior venía prestada de un tema de terceros, y eso era una dependencia de identidad dentro de un producto de inmmerce. El motivo del cambio no fue estético, fue ése.
Parte de cinco colores ancla, con el hex intacto:
#FF6E61 |
coral |
#FFB84D |
ámbar |
#FCE2A1 |
crema |
#4EB7AC |
teal |
#3C9CD7 |
azul |
Todo lo que falta se deriva de ellas en LCh, dentro de los dos arcos de tono que las cinco dejan vacíos: 96° de verde y 136° de morado y rosa, con la luminosidad y el croma en la franja de las anclas. Cada color derivado tiene coordenada; ninguno se eligió a ojo.
El fondo también se deriva: el ancla azul llevada a croma bajo da el azul nocturno
#131F29. Quedan fuera del arco dos neutros a propósito, papel y dim, con la razón
escrita en la spec de dibujo.
El acento de chrome es el dorado #F6C92D de inmmerce, y ése no es derivado:
es identidad de marca, no un tono de sintaxis.
Hay 9 papeles semánticos y todos los lenguajes se mapean sobre esos mismos 9. Una etiqueta HTML, un componente JSX, un selector de elemento CSS, un decorador de Python, un atributo de Prisma, una directiva de GraphQL y un título de Markdown reciben el mismo color, porque todos son «estructura con nombre». Aprendes el mapa una vez y te sirve para todos los archivos.
| papel | color | contraste sobre el fondo |
|---|---|---|
| Palabras clave | #FF6E61 |
6.10:1 |
| Funciones y campos | #4EB7AC |
6.92:1 |
| Tipos y propiedades | #3C9CD7 |
5.52:1 |
| Strings | #FCE2A1 |
13.17:1 |
| Números y constantes | #AA91E0 |
6.24:1 |
| Estructura con nombre | #FFB84D |
9.73:1 |
| Variables y prosa | #F4F0E9 |
14.72:1 |
| Puntuación | #9C9890 |
5.82:1 |
| Comentarios | #91A3B1 |
6.43:1 |
Al final de tokenColors viven siete reglas específicas de lenguaje. No inventan color:
todas usan la paleta de papeles. Lo que hacen es dar más resolución dentro del
lenguaje — un componente de React en color de tipo contra una etiqueta en color de
estructura, la llave del JSX marcando la frontera, la $variable de GraphQL dejando de
verse como función, this / super / self en un mismo papel.
Están al final del archivo a propósito: en VS Code gana la última regla que casa.
- Los comentarios no están apagados. Quedan en 6.43:1, por encima del mínimo de accesibilidad. Un comentario que no se lee es un comentario que no se escribe.
- El cuerpo de Markdown se queda sin color ni estilo, para que un README siga leyéndose como prosa y no como código.
-
La cursiva sustituye a los colores extra. Comentarios, parámetros,
self/cls, atributos HTML y JSX,import/fromy blockquote. Un matiz más, no un color más. - El acento sólo aparece en el chrome, en 12 claves: el borde activo de la barra de actividad, el badge, el fondo del botón, el cursor del editor y el del terminal, el borde del título de panel, el borde del peek, la barra de progreso, el borde superior de la pestaña activa y el realce de coincidencia en la lista y en el widget de sugerencias. Ninguna de ellas es texto de código.
Nada de lo anterior es una intención: test/theme.test.js lo cobra en cada corrida, porque
todas estas reglas fallan de forma silenciosa, sólo «visual». Lo que se comprueba:
- Ningún hex fuera de la paleta declarada.
- El acento en las 12 claves de chrome, y en ninguna de texto.
- Los 9 papeles por encima de 4.5:1 sobre el fondo del editor, y el comentario por encima de 5.7:1.
-
Ningún par de colores que comparten pantalla por debajo de ΔE76 10, con las exenciones
declaradas en el propio test:
fgcontrafg-paramycommentcontrafg-punctlos separa la cursiva, no el color. - Los tres
CompletionItemKindque esta extensión de verdad emite, distinguibles entre sí. -
symbolIcon.*entero dentro de la paleta. - El cuerpo de Markdown sin color ni estilo.
- Cursiva y negrita sólo en las reglas que la spec autoriza.
- El tema registrado en
contributes.themes.
La spec vive escrita en el encabezado de ese test. El test es el documento; el JSON es sólo el artefacto.
Marketplace · Repositorio · Issues · MIT