Temas: elija un aspecto o traiga el suyo propio.

Un tema es un único archivo JSON pequeño. Contiene colores, tipografía, forma, aspecto y una paleta de terminal. ColliePWA incluye cuatro de ellos, y se pueden importar más desde un archivo en el teléfono.

01/Qué es

Un tema es un archivo de aspectos visuales.

Un tema define los colores de la aplicación, una vez para la mitad clara y otra para la mitad oscura. También puede definir una tipografía, una fuente para títulos, una forma, un aspecto y los colores del reflejo del terminal. Forma y aspecto son diez palabras, como radius, shadow y density. El diseño, los tamaños de pulsación y el significado de los estados permanecen intactos, de modo que bloqueado sigue siendo bloqueado en cada tema.

Cada valor en un archivo es una palabra cerrada o un color validado. El archivo no puede ejecutar código, y no puede cargar un archivo, una fuente ni una imagen.

Un tema y Apariencia son dos ajustes distintos. El tema indica qué colores usar. Apariencia indica qué mitad mostrar: Sistema, Claro u Oscuro.

02/Elegir

Elija un tema en Ajustes.

Abra Ajustes, luego Apariencia y pulse un tema. Se aplica de inmediato, sin recargar, y la próxima vez que abra ColliePWA el primer fotograma ya estará en ese tema. Un toque en Collie restablece el valor predeterminado.

Un tema que define una tipografía la establece una sola vez. Aún es posible cambiarla después en la tarjeta Tipografía.

Collie

Tipografía: Aldrich

El aspecto conocido: grises neutros, con Aldrich para el texto.

Nightwatch

Tipografía: IBM Plex Sans

flat · bold · strong · band · heavy

Para el teléfono de guardia por la noche. Una mitad oscura en negro puro, plana y cuadrada, con líneas gruesas, un acento ámbar tenue y una franja ámbar tenue detrás de la cabecera y las barras.

Paleta de terminal

Daylight

Tipografía: Geist

Títulos: Atkinson Hyperlegible Next

round · lifted · roomy · gradient · cards · sentence

Para sol brillante y baja visión. Texto del cuerpo con contraste AAA, tarjetas redondeadas y amplias, una página que se desplaza hacia el pie, y colores de estado que van del azul al naranja, no del rojo al verde.

Paleta de terminal

Harbour

Tipografía: Atkinson Hyperlegible Next

Títulos: Space Grotesk

soft · lifted · grain · thin

Para quienes vienen de la terminal. Gris azulado frío con un único acento verde azulado, esquinas suaves, grano fino e iconos delgados, y una paleta de terminal basada en Solarized sobre un azul casi negro.

Paleta de terminal

03/Importar

Importe un tema desde un archivo.

1Guarde un archivo de tema en su teléfono. Debe terminar en .json y tener un tamaño inferior a 64 KiB.
2En Ajustes, abra la tarjeta Tema bajo Apariencia, pulse Importar y elija el archivo.
3Revise la vista previa. Muestra los colores de ambas mitades, la forma, los colores de terminal y un informe de contraste. Un contraste débil muestra una advertencia, y aún así se puede aplicar el tema. Un archivo que incumple las reglas se rechaza, y nada cambia.

Un tema cambia el aspecto de la aplicación y nada más. No puede ejecutar código, cargar archivos ni conectarse a un servidor.

Un dispositivo almacena hasta ocho temas importados. No es posible importar desde un enlace y los temas no se sincronizan entre dispositivos.

04/Escribir

Escriba el suyo propio.

El inicio más rápido es un tema incluido. Expórtelo, cambie id y name, edite los colores, las palabras de forma o la paleta de terminal, e impórtelo de nuevo. Un tema importado no puede usar el id de un tema incluido.

Este es un harbour.json simplificado, un archivo de version 2. Las líneas ... representan las partes omitidas.

{
  "version": 2,
  "id": "harbour",
  "name": "Harbour",
  "author": "Collie",
  "light": {
    "background": "oklch(0.95 0.01 235)",
    "foreground": "oklch(0.26 0.025 250)",
    "card": "oklch(0.985 0.004 235)",
    "...": "..."
  },
  "dark": {
    "background": "oklch(0.21 0.018 250)",
    "foreground": "oklch(0.93 0.012 240)",
    "card": "oklch(0.255 0.02 252)",
    "...": "..."
  },
  "fonts": { "ui": "atkinson", "display": "grotesk" },
  "surface": {
    "radius": "soft",
    "shadow": "lifted",
    "density": "default",
    "weight": "default",
    "border": "default",
    "ground": "grain",
    "chrome": "page",
    "rows": "rules",
    "icons": "thin",
    "labels": "caps"
  },
  "ansi": {
    "0": "#073642",
    "1": "#f0504a",
    "2": "#859900",
    "...": "..."
  }
}

Los 43 tokens

Un archivo de tema solo puede nombrar estos tokens, divididos en cuatro grupos. Se rechazará cualquier archivo que contenga otra clave.

Grupo	Qué pinta	Tokens
Superficies y colores de texto21	La página, las tarjetas, los elementos de la interfaz, el texto, los botones, los bordes y el anillo de enfoque.	`background` `foreground` `card` `card-foreground` `chrome` `primary` `primary-foreground` `secondary` `secondary-foreground` `muted` `muted-foreground` `accent` `accent-foreground` `control-on` `control-on-foreground` `destructive` `destructive-foreground` `border` `input` `rule` `ring`
Estado6	Los estados del agente y el color informativo.	`status-blocked` `status-working` `status-done` `status-idle` `status-unknown` `status-info`
Sintaxis6	Los colores de texto en diffs y código.	`syntax-keyword` `syntax-string` `syntax-constant` `syntax-property` `syntax-entity` `syntax-comment`
Identidad del host10	Los colores que diferencian sus máquinas.	`host-0` `host-1` `host-2` `host-3` `host-4` `host-5` `host-6` `host-7` `host-8` `host-9`

Forma y aspecto

El bloque surface contiene diez palabras. Cada una procede de una lista cerrada, y un token omitido conserva su valor predeterminado, la primera palabra de su lista. Nunca se acepta un número libre, por lo que un tema no puede alterar un tamaño de pulsación.

radius: La esquina de una tarjeta, una fila, un campo y un botón.
sharp
soft
round
shadow: La sombra bajo los paneles elevados.
default
flat
lifted
density: El espacio dentro de los controles y entre ellos.
default
roomy
weight: El grosor con el que se dibuja el texto en estilo medium y semibold.
default
bold
border: El grosor de una línea fina.
default
strong
ground: La página detrás de todo: plana, un degradado suave o un grano fino.
flat
gradient
grain
chrome: La cabecera y las barras: sobre el color de la página, o sobre una franja propia.
page
band
rows: Una lista como un único grupo enmarcado con líneas divisorias, o como una tarjeta para cada fila.
rules
cards
icons: El grosor del trazo de cada icono.
default
thin
heavy
labels: Etiquetas pequeñas de sección, en mayúsculas o con mayúscula inicial.
caps
sentence

Paleta de terminal

El bloque ansi contiene 18 colores o ninguno: los 16 colores de terminal, ink y ground. Cada uno es #rrggbb o oklch(L C H), y cada uno supera una validación.

Valores: Un valor es un color: #rrggbb, #rrggbbaa o oklch(L C H), con / A para la opacidad. L va de 0 a 1, C de 0 a 0.5 y H de 0 a 360, todos como números simples.
Mitades: Indique light, dark o ambos. La mitad que se omita se completará a partir de Collie, token por token.
Tipografías: El campo opcional fonts.ui define una de las fuentes tipográficas incluidas en ColliePWA. El campo opcional fonts.display define una para los títulos. No se acepta ninguna otra fuente.
Qué se rechaza: Una clave fuera de la lista, una version distinta de 1 o 2, un valor que no sea un color o una palabra de forma, var(), url() o cualquier otra función, el id de un tema incluido, y un archivo de más de 64 KiB. El mensaje indica la causa, y no se aplica nada.
Versión: version es 1 o 2. Un archivo con un bloque surface, una fuente fonts.display o un bloque ansi indica 2. Un archivo con version 2 requiere ColliePWA 1.22.0 o superior.

05/Compartir

Exportar y compartir.

Exportar escribe el tema activo como un archivo .collie-theme.json. Envíelo a otra persona o consérvelo en un repositorio, y se podrá importar de la misma forma.

Detalles en Temas