Temas

Un tema es el aspecto visual de la aplicación. Define los colores, las tipografías, la forma de los controles, la textura de la página y los colores del terminal. Es un archivo JSON pequeño. Collie incluye cuatro. Se pueden importar más desde un archivo y se puede exportar cualquier tema para copiarlo y editarlo. Un tema es un ajuste de un solo dispositivo, conservado en ese navegador, y no modifica nada en el puente.

Cada tema tiene dos mitades. La mitad clara es el conjunto de colores para el modo claro. La mitad oscura es el conjunto para el modo oscuro. Un color en un tema tiene un nombre, como background o primary, y ese nombre es un token.

Los cuatro temas

Collie incluye cuatro temas, y tres de ellos utilizan cada sección de un archivo de tema. Cada imagen muestra el Dashboard: claro a la izquierda y oscuro a la derecha.

• —
  Collie es el aspecto que la aplicación siempre ha tenido. Es la opción predeterminada, y seleccionarla desactiva cualquier otro tema. No especifica ninguna forma, ningún aspecto ni ninguna paleta, por lo que cada uno de sus términos es el valor predeterminado de su lista.

  !El tema Collie en el Dashboard, claro y oscuro.

• —
  Nightwatch está pensado para el teléfono de guardia en la cama. La mitad oscura es negro puro con un único ámbar tenue, y la mitad clara es un papel cálido de atardecer. Es cuadrado y plano, con líneas gruesas, texto en negrita y una franja ámbar tenue tras el encabezado y las barras. El terminal muestra una paleta ámbar sobre negro puro.

  !El tema Nightwatch en el Dashboard, claro y oscuro.

• —
  Daylight está pensado para luz solar directa y baja visión. El texto del cuerpo tiene un contraste de 7:1 o superior, los bordes son más marcados, y el estado bloqueado es naranja mientras que completado es azul, para que ambos permanezcan diferenciados sin usar rojo y verde. Presenta esquinas redondeadas, filas como tarjetas elevadas en una página que cambia gradualmente hacia el pie (más oscura en modo claro y más clara en modo oscuro) y pasos más espaciados. El terminal muestra una paleta vívida y de alto contraste.

  !El tema Daylight en el Dashboard, claro y oscuro.

• —
  Harbour está pensado para quienes viven en un terminal. Un gris azulado frío con un acento verde azulado, en la línea de Nord y Solarized, y colores de código que se leen como en un editor. Presenta esquinas suaves, un grano fino bajo la página e iconos delgados. El terminal muestra una paleta basada en Solarized.

  !El tema Harbour en el Dashboard, claro y oscuro.

La tabla enumera cada término que utiliza cada tema. El primer término de cada lista corresponde al aspecto actual: sharp, default, flat, page, rules y caps. Los términos se explican en Forma, Aspecto y Paleta del terminal.

Seleccionar un tema

Seleccione un tema en Configuración → Apariencia y toda la aplicación cambiará al instante.

La tarjeta Tema es la primera. Toque un nombre y la aplicación cambiará al instante. Cada nombre adopta las esquinas y el grosor de su propio tema, lo que permite observar la forma antes de pulsar. La tarjeta se sitúa sobre la tarjeta Apariencia, que contiene Sistema, Claro y Oscuro. Son dos ajustes distintos. El tema define los colores, la forma y la apariencia; Sistema, Claro u Oscuro determina qué mitad de los colores se visualiza.

Un tema que define una tipografía la escribe en la tarjeta Tipografía una sola vez, en el momento de seleccionarlo. A partir de ahí, la tarjeta Tipografía prevalece: elija otra fuente allí y se mantendrá hasta que vuelva a elegir un tema. La tipografía de visualización de un tema no forma parte de esa tarjeta: los títulos la conservan. Los tipografías disponen de su propia sección.

Las fuentes utilizadas por estos temas solo incluyen caracteres del alfabeto latino y Latin Extended-A; por tanto, el texto en cirílico y CJK recurre a la tipografía del sistema bajo dichos temas (el tema Collie conserva su variante cirílica complementaria).

Importar un tema

Importe un archivo .json en la tarjeta Tema, revise la vista previa y pulse Aplicar.

1. 01
   En la tarjeta Tema, pulse Importar y elija un archivo .json.
2. 02
   Collie lee el archivo y muestra una vista previa. Muestra el nombre, el autor, ambas mitades como muestras de color, una página pequeña para cada mitad, la forma en una muestra, los colores del terminal y un informe de contraste.
3. 03
   Pulse Aplicar para conservar el tema y cambiar a él, o Cancelar para no conservar nada.

Un advertencia es una línea del informe de contraste, como "dark: status-blocked chip on card measures 3.9. The floor is 4.5". Significa que el tema resulta difícil de leer en un punto. Aplicar permanece activo, ya que la decisión es suya.

Un rechazo significa que el archivo ha infringido una regla. Collie enumera las causas, no conserva nada y no aplica nada. La lista muestra como máximo 25 causas y, a continuación, una línea "and N more". Se rechaza un archivo por cualquiera de estos motivos:

• —
  No es un objeto JSON o supera los 64 KiB.
• —
  No define ningún color.
• —
  Contiene una clave desconocida, una versión que Collie no lee, un valor que no es un color o una tipografía que Collie no incluye.
• —
  Una palabra de forma no está en su lista, o hay un número donde va una palabra.
• —
  Tiene un bloque surface, una fuente fonts.display o un bloque ansi, e indica la versión 1.
• —
  A su bloque ansi le falta una clave, tiene un color con canal alfa o no supera una comprobación bajo Paleta del terminal.
• —
  Tiene un id, name o author incorrecto, o el id pertenece a un tema predeterminado.
• —
  Sería un noveno tema importado. Collie lo rechaza al pulsar Importar, antes de elegir un archivo, y de nuevo en Aplicar.

Collie comprueba una cosa más en Aplicar. Un archivo cuyo id ya está en el dispositivo se rechaza con "already imported". Elimine primero el tema anterior o cambie el id.

Un tema solo cambia la apariencia visual de la aplicación. No puede ejecutar código, cargar archivos ni conectarse a un servidor.

Un dispositivo admite hasta ocho temas importados. Eliminar solo funciona mientras haya un tema importado activo. Elimina ese tema y la aplicación vuelve a Collie. La tipografía permanece sin cambios.

El informe de contraste

El informe mide los colores de un tema en ambas mitades; una línea con fallo es una advertencia que se puede aceptar.

La paleta del terminal es la única excepción, ya que sus comprobaciones rechazan el archivo. La tabla enumera los valores mínimos de las demás partes. Un valor mínimo es una relación de contraste, por lo que un número más alto resulta más legible.

• —
  El texto destructivo se mantiene en lo que Collie mide cuando se conservan sus colores. El rojo claro propio de Collie en su página mide 4.38. Un tema que conserve ambos colores del par se mantiene en ese valor y nunca por debajo de 3. Un tema que modifique cualquiera de los dos colores se mantiene en 4.5.
• —
  Un degradado o un granulado se mide en su extremo final. El informe mide el texto de la página, los chips, el texto de destructive, el texto de status-blocked y rule de nuevo en la base del degradado o sobre el color de línea del granulado, con los mismos límites mínimos.
• —
  Una banda también se mide. Bajo chrome: band, foreground, muted-foreground y status-blocked se miden sobre secondary, el color de la banda, a 4.5.

Exportar y compartir un tema

Seleccione el tema y pulse Exportar. Collie guarda <id>.collie-theme.json. Un navegador que no pueda guardar un archivo muestra el texto en una hoja, con un botón para copiar. Para crear un tema propio a partir de uno integrado:

1. 01
   Exporte Nightwatch, Daylight, Harbour o Collie.
2. 02
   Cambie id y name. Se rechaza el id de un tema integrado.
3. 03
   Edite los colores y las palabras, y elimine cualquier token que no desee cambiar.
4. 04
   Envíe el archivo a su teléfono y luego impórtelo.

Una exportación escribe la versión version más baja que admita el contenido del tema.

Escribir un tema

Un archivo contiene estas claves y ninguna otra. Se rechaza cualquier clave desconocida indicando su nombre. Este es un archivo completo de la versión 2: es Daylight con una lista de colores más corta y la paleta completa.

{
  "version": 2,
  "id": "my-day",
  "name": "My day",
  "author": "Sam",
  "light": { "background": "oklch(0.985 0 0)", "primary": "oklch(0.18 0 0)" },
  "dark": { "background": "oklch(0.12 0 0)", "status-blocked": "oklch(0.81 0.13 60)" },
  "fonts": { "ui": "geist", "display": "atkinson" },
  "surface": {
    "radius": "round", "shadow": "lifted", "density": "roomy",
    "weight": "default", "border": "default", "ground": "gradient",
    "chrome": "page", "rows": "cards", "icons": "default", "labels": "sentence"
  },
  "ansi": {
    "0": "#3a332c", "1": "#ff5f56", "2": "#5fd068", "3": "#ffd84a",
    "4": "#5aa9ff", "5": "#e07ce8", "6": "#3fd6d0", "7": "#f2efe9",
    "8": "#8a827a", "9": "#ff8a80", "10": "#7ad683", "11": "#ffeb8a",
    "12": "#8cc4ff", "13": "#f0a6f5", "14": "#6ad8d2", "15": "#ffffff",
    "ink": "#f5f0e8", "ground": "#1a1612"
  }
}

• —
  version es 1 o 2. Consulte Versiones. Se rechaza cualquier otro número.
• —
  id tiene entre 1 y 32 caracteres: letras minúsculas, dígitos y guiones, comenzando por una letra o un dígito.
• —
  name tiene entre 1 y 40 caracteres, y author tiene hasta 60. Ninguno de los dos puede contener caracteres de control.
• —
  light y dark son objetos de tokens. Especifique una mitad o ambas. La mitad que se omita, y cualquier token que se omita, toma el valor del tema Collie. Si solo una mitad define un token, la otra mitad recibe el valor del tema Collie para dicho token.
• —
  fonts.ui es opcional: system, grotesk, aldrich, plex, geist o atkinson.
• —
  fonts.display es opcional y admite los mismos seis nombres. Consulte Aspecto.
• —
  surface es opcional. Cada clave dentro de él también es opcional, y la clave que se omita toma la palabra predeterminada de su lista. Consulte Forma y Aspecto.
• —
  ansi es opcional y contiene las 18 claves o ninguna. Consulte Paleta del terminal.
• —
  $schema se permite y se ignora. El archivo tiene como maximo 64 KiB.

Un valor es #rrggbb, #rrggbbaa o oklch(L C H) y oklch(L C H / A) en numeros simples. L va de 0 a 1, C va de 0 a 0.5, H va de 0 a 360 y A va de 0 a 1 o un porcentaje. Nada mas funciona: ningun color con nombre, ni rgb(), ni var(), ni url(). Un color en ansi no tiene alfa.

Versiones

Un archivo indica que version es, y Collie escribe la version mas baja que admita el contenido del archivo.

• —
  Un archivo con un bloque surface, una variante tipografica fonts.display o un bloque ansi debe indicar 2. Se rechaza un archivo que indique 1 y contenga alguno de ellos.
• —
  Un archivo sin esos bloques puede indicar cualquiera de las dos. Collie lee ambas versiones, y una exportacion de un tema solo con colores y fonts.ui indica 1.
• —
  Un archivo de version 2 requiere Collie 1.22.0 o posterior.
• —
  Un archivo de version 1 implica la palabra por defecto de cada lista para cada token de surface.

Los 43 tokens

Cada mitad admite cualquiera de estos, en cuatro grupos.

Forma

Cinco palabras en el bloque surface definen la forma de los controles, y cada clave admite una palabra de una lista cerrada.

Una palabra es un nombre, nunca un número. Un radio libre o un paso de espaciado libre podría romper el área mínima de pulsación o transformar un control cuadrado en un estadio. La primera palabra de cada lista corresponde a la apariencia previa a la versión 2.

• —
  Los círculos se mantienen como círculos. Una figura cuya anchura es igual a su altura, como un punto de estado, no constituye un paso de esquina, por lo que radius no la modifica.
• —
  Una fila marcada adopta el radio. Con sharp, una fila seleccionada o bloqueada muestra una barra de 2px en el borde izquierdo. Con soft y round muestra un borde de 2px en los cuatro lados y una sombra suave, ya que una barra izquierda no se combina con esquinas redondeadas.
• —
  roomy nunca desciende por debajo del valor predeterminado. Los elementos táctiles mantienen un tamaño mínimo de 44px. Los iconos y el perro de la cabecera conservan sus dimensiones, por lo que solo aumenta el espacio circundante.

Aspecto

Otras cinco claves del bloque surface y una clave de fuente definen la apariencia de la página. Siguen la misma regla de palabras cerradas.

fonts.display define una de las seis fuentes para los títulos de página y el nombre en el encabezado. Un tema que no define ninguna dibuja sus títulos en la fuente habitual, como antes. Collie obtiene una fuente de visualización solo cuando el tema la define.

• —
  Un fondo no dibuja ningún archivo de imagen. El degradado y el grano se generan a partir de los colores del propio tema. Los paneles de la aplicación son opacos, por lo que el fondo se muestra en los espacios entre ellos.
• —
  El texto de la página se mide sobre el fondo. El informe de contraste comprueba el extremo final de un degradado y el color de línea del grano, de modo que un fondo no pueda ocultar el texto.
• —
  Bajo un degradado, las barras mantienen el color plano de la página. En una tableta, el encabezado y las barras pueden verse como un recuadro en la parte superior de una página que se oscurece más abajo. Una palabra no puede cambiar eso.
• —
  La barra de estado sigue a una franja. Bajo chrome: band, la barra de estado del navegador adopta el color de la franja, y bajo page adopta el color de la página.
• —
  rows alcanza a cada grupo de lista. Eso incluye la lista dentro del índice de Settings.

Paleta del terminal

El bloque ansi proporciona al reflejo de la terminal sus propios 16 colores, su tinta y su fondo.

El bloque contiene las 18 claves o ninguna: de "0" a "15" para las 16 ranuras, ink para el texto y ground para el fondo. Media paleta colocaría dos paletas en un solo panel. Cada color es #rrggbb o oklch(), sin alfa.

Nota. Escriba la paleta para modo oscuro. El reflejo siempre se dibuja sobre un fondo oscuro, y en modo claro Collie invierte todo el reflejo en lugar de volver a colorearlo (por qué). El modo claro muestra la imagen invertida de sus colores. Elija un ground que se convierta en el background claro de su tema, y el reflejo se integrará con la página en ambos modos.

Un color que no supera una comprobación se rechaza indicando su clave. No es una advertencia, porque la terminal es lo que más se lee.

El conjunto brillante es una lista fija: el espejo de Muse trata esas cuatro ranuras como los primeros planos brillantes. Las otras 12 ranuras permanecen bajo la misma línea, por lo que esa lista se mantiene válida bajo su paleta.

Lo que un tema no puede cambiar

Un tema cambia el valor de un color, sus tipografías, la forma de los controles, la apariencia de la página y la paleta del terminal. No puede cambiar nada más.

• —
  Disposición y tamaños táctiles. La disposición en un teléfono se rompe con facilidad. Radius, shadow, density, weight y border son palabras cerradas, nunca valores libres, y roomy nunca baja del valor predeterminado.
• —
  Tamaños de fuente y movimiento. Un tema elige una tipografía y un peso, no un tamaño, y no puede cambiar cómo se mueve nada.
• —
  El perro de Collie. El encabezado, el icono de la pantalla de inicio y la pantalla de inicio lucen igual en todos los temas.
• —
  El significado de un estado. Su icono y su palabra se mantienen tal cual, por lo que un rojo o naranja seleccionado nunca hace que un estado bloqueado parezca completado.
• —
  Un valor libre, CSS sin procesar, fuentes remotas. Cada clave toma un color o una palabra de una lista, y las fuentes provienen de la lista que Collie incluye.

El primer renderizado y la barra de estado

La selección aparece en pantalla desde el primer cuadro. Un pequeño script la lee antes de que la aplicación cargue, por lo que un tema incluido no muestra primero el valor predeterminado. Un tema importado hace lo mismo, con una excepción. Si un token se define solo en una mitad, ese token muestra el color predeterminado durante un cuadro. La aplicación comprueba el tema de nuevo cuando carga. Un tema almacenado que falla la comprobación se descarta, el dispositivo muestra Collie y la consola del navegador explica el motivo. La barra de estado sigue los dos colores de página del tema, o sus dos colores de banda cuando el tema indica chrome: band.

Resolución de problemas

Estos son los problemas más habituales, junto con la causa y la solución para cada uno.

• —
  Un tema muestra el color predeterminado en un token. El archivo omitió ese token, o la mitad. Los tokens faltantes proceden del tema Collie. Añada el token a la mitad deseada.
• —
  La tipografía no cambió. Un tema escribe su tipografía una vez, al seleccionarlo. Si después se eligió otra tipografía en Tipografía, esa elección prevalece. Seleccione la tipografía de nuevo o seleccione el tema de nuevo.
• —
  Una palabra de forma no hace nada. La palabra puede ser la predeterminada de su lista, o puede faltar la clave. Una clave que se omita toma la palabra predeterminada. Compruebe la ortografía frente a las tablas en Forma y Aspecto.
• —
  El archivo se rechaza e indica ansi. Una paleta contiene las 18 claves, en espacio oscuro, y cada color debe pasar su umbral. El rechazo indica la clave y el número medido.
• —
  El tema desaparece tras borrar los datos del navegador. Los temas importados residen únicamente en este navegador. Importe el archivo de nuevo.