Temi: scelga un aspetto o ne usi uno personalizzato.

Un tema è un singolo file JSON di piccole dimensioni. Definisce colori, caratteri, forme, aspetto e una tavolozza per il terminale. ColliePWA ne include quattro ed è possibile importarne altri da un file presente sullo smartphone.

01/Che cos'è

Un tema è un file che definisce l'aspetto visivo.

Un tema stabilisce i colori dell'app, separatamente per la modalità chiara e per la modalità scura. Può anche definire un carattere tipografico, un carattere per i titoli, una forma, un aspetto e i colori della replica del terminale. Forma e aspetto sono definiti da dieci parole, come radius, shadow e density. Il layout, le dimensioni delle aree di tocco e il significato degli stati restano invariati, pertanto lo stato bloccato rimane bloccato in ogni tema.

Ciascun valore all'interno del file è un termine prefissato o un colore convalidato. Il file non può eseguire codice e non può caricare file, caratteri o immagini.

Il tema e Aspetto sono due impostazioni distinte. Il tema stabilisce quali colori utilizzare. Aspetto stabilisce quale metà mostrare: Sistema, Chiaro o Scuro.

02/Scegliere

Scelga un tema in Impostazioni.

Apra Impostazioni, poi Aspetto, e tocchi un tema. Viene applicato immediatamente, senza ricaricare la pagina, e alla successiva apertura di ColliePWA il primo fotogramma userà già quel tema. Un tocco su Collie ripristina l'aspetto predefinito.

Un tema che specifica un carattere imposta il Suo carattere una volta sola. Può comunque modificarlo successivamente nella scheda Carattere.

Collie

Carattere: Aldrich

L'aspetto consueto: grigi neutri, con Aldrich per il testo.

Nightwatch

Carattere: IBM Plex Sans

flat · bold · strong · band · heavy

Per reperibilità notturna sullo smartphone. Una modalità scura in nero puro, piatta e squadrata, con linee spesse, un accento ambra tenue e una fascia ambra tenue dietro l'intestazione e le barre.

Tavolozza del terminale

Daylight

Carattere: Geist

Titoli: Atkinson Hyperlegible Next

round · lifted · roomy · gradient · cards · sentence

Per luce intensa e ipovisione. Testo del corpo con contrasto AAA, schede arrotondate e ampie, una pagina che si sposta verso il fondo e colori di stato che vanno dal blu all'arancione, non dal rosso al verde.

Tavolozza del terminale

Harbour

Carattere: Atkinson Hyperlegible Next

Titoli: Space Grotesk

soft · lifted · grain · thin

Per chi usa principalmente il terminale. Grigio-blu freddo con un unico accento verde acqua, angoli smussati, grana fine e icone sottili, oltre a una tavolozza del terminale basata su Solarized su un blu quasi nero.

Tavolozza del terminale

03/Importare

Importi un tema da un file.

1Salvi un file del tema sul telefono. Deve terminare in .json e avere una dimensione inferiore a 64 KiB.
2In Impostazioni, apra la scheda Tema sotto Aspetto, tocchi Importa e scelga il file.
3Legga l'anteprima. Mostra i colori di entrambe le modalità, la forma, i colori del terminale e un rapporto sul contrasto. Un contrasto ridotto mostra un avviso, ma è comunque possibile applicare il tema. Un file che viola le regole viene rifiutato e non viene applicata alcuna modifica.

Un tema modifica esclusivamente l'aspetto dell'app. Non può eseguire codice, caricare file o contattare un server.

Un dispositivo conserva fino a otto temi importati. Non è disponibile l'importazione da collegamento e i temi non si sincronizzano tra dispositivi.

04/Creare

Crei un tema personalizzato.

Il modo più rapido per iniziare è partire da un tema predefinito. Lo esporti, modifichi id e name, personalizzi i colori, i termini relativi alla forma o la tavolozza del terminale, quindi lo importi di nuovo. Un tema importato non può utilizzare l'id di un tema predefinito.

Questo è un file harbour.json abbreviato, in versione 2. Le righe con ... rappresentano le parti omesse.

{
  "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",
    "...": "..."
  }
}

I 43 token

Un file di tema può specificare solo questi token, suddivisi in quattro gruppi. Un file contenente qualsiasi altra chiave viene rifiutato.

Gruppo	Elementi interessati	Token
Superfici e colori del testo21	La pagina, le schede, gli elementi dell'interfaccia, il testo, i pulsanti, i bordi e l'anello di focus.	`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`
Stato6	Gli stati dell'agente e il colore delle informazioni.	`status-blocked` `status-working` `status-done` `status-idle` `status-unknown` `status-info`
Sintassi6	I colori del testo nei diff e nel codice.	`syntax-keyword` `syntax-string` `syntax-constant` `syntax-property` `syntax-entity` `syntax-comment`
Identità dell'host10	I colori che distinguono le Sue macchine.	`host-0` `host-1` `host-2` `host-3` `host-4` `host-5` `host-6` `host-7` `host-8` `host-9`

Forma e aspetto

Il blocco surface contiene dieci parole. Ciascuna proviene da un elenco prefissato, e un parametro omesso mantiene il proprio valore predefinito, ossia la prima parola del rispettivo elenco. Non sono mai accettati valori numerici arbitrari, pertanto un tema non può alterare le dimensioni delle aree di tocco.

radius: L'angolo di una scheda, di una riga, di un campo e di un pulsante.
sharp
soft
round
shadow: L'ombra sotto i pannelli in rilievo.
default
flat
lifted
density: Lo spazio disponibile all'interno e tra i controlli.
default
roomy
weight: Lo spessore del testo con cui vengono tracciati medium e semibold.
default
bold
border: Lo spessore di una linea sottile.
default
strong
ground: Lo sfondo dell'intera pagina: uniforme, con una sfumatura leggera o con una grana fine.
flat
gradient
grain
chrome: L'intestazione e le barre: sul colore della pagina o su una fascia dedicata.
page
band
rows: Un elenco come singolo gruppo incorniciato con linee di separazione, oppure come scheda per ciascuna riga.
rules
cards
icons: Lo spessore del tratto di ciascuna icona.
default
thin
heavy
labels: Piccole etichette di sezione, in lettere maiuscole o con iniziale maiuscola.
caps
sentence

Tavolozza del terminale

Il blocco ansi contiene 18 colori oppure nessuno: i 16 colori del terminale, ink e ground. Ciascun colore è in formato #rrggbb o oklch(L C H) e ciascuno deve superare una convalida.

Valori: Un valore è un colore: #rrggbb, #rrggbbaa o oklch(L C H), con / A per l'opacità. L va da 0 a 1, C da 0 a 0.5 e H da 0 a 360, tutti come numeri semplici.
Metà: Specifichi light, dark o entrambe. La metà omessa viene completata a partire da Collie, token per token.
Caratteri tipografici: Il campo opzionale fonts.ui definisce uno dei caratteri tipografici inclusi in ColliePWA. Il campo opzionale fonts.display ne definisce uno per i titoli. Non sono accettati altri caratteri.
Cosa viene rifiutato: Una chiave non presente nell'elenco, una versione diversa da 1 o 2, un valore che non sia un colore o un termine relativo alla forma, var(), url() o qualsiasi altra funzione, l'id di un tema predefinito e un file superiore a 64 KiB. Il messaggio indica la causa e non viene applicata alcuna modifica.
Versione: version è 1 o 2. Un file con un blocco surface, un carattere fonts.display o un blocco ansi indica 2. Un file version 2 richiede ColliePWA 1.22.0 o più recente.

05/Condivisione

Esportare e condividere.

L'esportazione scrive il tema attivo come file .collie-theme.json. Lo invii a qualcuno, o lo conservi in un repository: potrà essere importato nello stesso modo in cui lo ha fatto Lei.

Dettagli in Temi