Themes: Wähle ein Erscheinungsbild oder bring dein eigenes mit.

1. 1Lege eine Theme-Datei auf deinem Telefon ab. Sie endet auf .json und ist kleiner als 64 KiB.
2. 2Öffne in den Einstellungen unter Erscheinungsbild die Theme-Karte, tippe auf Importieren und wähle die Datei aus.
3. 3Lies die Vorschau. Sie zeigt die Farben beider Hälften, die Form, die Terminalfarben und einen Kontrastbericht. Ein schwacher Kontrast zeigt eine Warnung, und du kannst das Theme trotzdem anwenden. Eine Datei, die gegen die Regeln verstößt, wird abgelehnt, und nichts ändert sich.

Ein Theme ändert, wie die App aussieht, und sonst nichts. Es kann keinen Code ausführen, keine Dateien laden und keinen Server erreichen.

Ein Gerät speichert bis zu acht importierte Themes. Es gibt keinen Import über einen Link, und Themes synchronisieren sich nicht zwischen Geräten.

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

Die 43 Token

Eine Theme-Datei darf nur diese Token in vier Gruppen benennen. Eine Datei mit einem anderen Schlüssel wird abgelehnt.

Form und Erscheinungsbild

Der surface-Block enthält zehn Wörter. Jedes stammt aus einer festen Liste, und ein weggelassenes Token behält seinen Standardwert, das erste Wort seiner Liste. Eine freie Zahl wird nie akzeptiert, ein Theme kann also keine Tippfläche beschädigen.

radius

Die Ecke einer Karte, einer Zeile, eines Felds und einer Schaltfläche.

• sharp
• soft
• round

shadow

Der Schatten unter hervorgehobenen Bedienfeldern.

• default
• flat
• lifted

density

Wie viel Platz innerhalb und zwischen Steuerelementen liegt.

• default
• roomy

weight

Wie dick Text in Medium und Semibold dargestellt wird.

• default
• bold

border

Die Breite einer Haarlinie.

• default
• strong

ground

Die Seite hinter allem: flach, ein weicher Verlauf oder eine feine Körnung.

• flat
• gradient
• grain

chrome

Die Kopfzeile und die Leisten: auf der Seitenfarbe oder auf einem eigenen Band.

• page
• band

rows

Eine Liste als eine umrahmte Gruppe mit Trennlinien oder als eine Karte für jede Zeile.

• rules
• cards

icons

Die Strichstärke jedes Symbols.

• default
• thin
• heavy

labels

Kleine Abschnittsbeschriftungen, in Großbuchstaben oder mit großem Anfangsbuchstaben.

• caps
• sentence

Terminalpalette

Der ansi-Block enthält 18 Farben oder keine: die 16 Terminalfarben, ink und ground. Jede ist #rrggbb oder oklch(L C H), und jede durchläuft eine Prüfung.

Werte

Ein Wert ist eine Farbe: #rrggbb, #rrggbbaa oder oklch(L C H), mit / A für die Deckkraft. L reicht von 0 bis 1, C von 0 bis 0.5 und H von 0 bis 360, jeweils als reine Zahlen.

Hälften

Gib light, dark oder beides an. Eine Hälfte, die du auslässt, wird Token für Token aus Collie ergänzt.

Schriftarten

Das optionale fonts.ui benennt eine der Schriftarten, die ColliePWA mitbringt. Das optionale fonts.display benennt eine für Titel. Keine andere Schriftart wird akzeptiert.

Was abgelehnt wird

Ein Schlüssel außerhalb der Liste, eine andere Version als 1 oder 2, ein Wert, der keine Farbe und kein Form-Wort ist, var(), url() oder eine andere Funktion, die ID eines mitgelieferten Themes und eine Datei über 64 KiB. Die Meldung benennt die Ursache, und nichts wird angewendet.

Version

version ist 1 oder 2. Eine Datei mit einem surface-Block, einem fonts.display-Schriftschnitt oder einem ansi-Block gibt 2 an. Eine version-2-Datei erfordert ColliePWA 1.22.0 oder neuer.

Der Export schreibt das aktive Theme als .collie-theme.json-Datei. Sende sie an jemanden oder bewahre sie in einem Repository auf, und die Person importiert sie auf dieselbe Weise wie du.

Details in Farbschemata