Farbschemata

Ein Theme bestimmt das Aussehen der Anwendung. Es legt die Farben, die Schriftarten, die Form der Bedienelemente, das Gefühl der Seite und die Farben des Terminals fest. Es ist eine kleine JSON-Datei. Collie liefert vier mit. Sie können weitere aus einer Datei importieren, und Sie können jedes Theme exportieren, um es zu kopieren und zu bearbeiten. Ein Theme ist eine Einstellung eines einzelnen Geräts, die in diesem Browser vorgehalten wird, und es ändert nichts auf der Bridge.

Jedes Theme hat zwei Hälften. Die helle Hälfte ist der Farbsatz für den Hellmodus. Die dunkle Hälfte ist der Satz für den Dunkelmodus. Eine Farbe in einem Theme hat einen Namen wie background oder primary, und dieser Name ist ein Token.

Die vier Themes

Collie liefert vier Themes mit, und drei davon nutzen jeden Teil einer Theme-Datei. Jedes Bild zeigt das Dashboard, links hell und rechts dunkel.

• —
  Collie ist das Aussehen, das die Anwendung schon immer hatte. Es ist der Standard, und seine Auswahl setzt jedes Theme wieder zurück. Es nennt keine Form, kein Aussehen und keine Palette, sodass jedes seiner Wörter das Standardwort seiner Liste ist.

  !Das Collie-Theme auf dem Dashboard, hell und dunkel.

• —
  Nightwatch ist für das Bereitschaftstelefon im Bett gedacht. Die dunkle Hälfte ist echtes Schwarz mit einem gedämpften Bernsteinton, und die helle Hälfte ist ein warmes Dämmerungspapier. Es ist eckig und flach, mit kräftigen Linien, fettem Text und einem gedämpften bernsteinfarbenen Band hinter der Kopfzeile und den Leisten. Das Terminal zeichnet eine bernsteinfarbene Palette auf echtem Schwarz.

  !Das Nightwatch-Theme auf dem Dashboard, hell und dunkel.

• —
  Daylight ist für direktes Sonnenlicht und Sehschwächen gedacht. Fließtext hat ein Kontrastverhältnis von 7:1 oder besser, Ränder sind kräftiger, und Blockiert ist orange, während Erledigt blau ist, sodass die beiden ohne Rot und Grün unterscheidbar bleiben. Es hat abgerundete Ecken, Zeilen als hervorgehobene Karten auf einer Seite, die sich zum Fuß hin verschiebt, dunkler im Hellen und heller im Dunklen, sowie großzügigere Abstände. Das Terminal zeichnet eine lebendige, kontrastreiche Palette.

  !Das Daylight-Theme auf dem Dashboard, hell und dunkel.

• —
  Harbour ist für Personen gedacht, die im Terminal leben. Ein kühles Blaugrau mit einem einzelnen blaugrünen Akzent, im Stil von Nord und Solarized, und Codefarben, die sich wie ein Editor lesen. Es hat weiche Ecken, eine feine Körnung unter der Seite und dünne Symbole. Das Terminal zeichnet eine auf Solarized basierende Palette.

  !Das Harbour-Theme auf dem Dashboard, hell und dunkel.

Die Tabelle listet jedes Wort auf, das jedes Theme verwendet. Das erste Wort jeder Liste ist das heutige Aussehen: sharp, default, flat, page, rules und caps. Die Wörter werden unter Form, Aussehen und Terminal-Palette erklärt.

Wählen Sie ein Theme

Wählen Sie ein Theme in Einstellungen → Erscheinungsbild, und die gesamte App ändert sich sofort.

Die Karte Theme ist die erste Karte. Tippen Sie auf einen Namen, und die App ändert sich sofort. Jeder Name übernimmt die Ecken und die Strichstärke seines Themes, sodass Sie die Form vor dem Antippen sehen. Die Karte befindet sich über der Karte Erscheinungsbild, die System, Hell und Dunkel enthält. Dies sind zwei Einstellungen. Das Theme bestimmt die Farben, die Form und das Erscheinungsbild, und System, Hell oder Dunkel bestimmt, welche Hälfte der Farben Sie sehen.

Ein Theme, das eine Schriftart definiert, schreibt diese einmalig beim Auswählen des Themes in die Karte Schriftart. Danach hat die Schriftart-Karte Vorrang: Wählen Sie dort eine andere Schriftart, bleibt diese erhalten, bis Sie erneut ein Theme wählen. Die Displayschrift eines Themes ist nicht Teil dieser Karte: Titel behalten sie bei. Die Schriftarten haben einen eigenen Abschnitt.

Die von diesen Themes verwendeten Schriften enthalten nur Lateinisch und Lateinisch-Erweitert-A; kyrillischer und CJK-Text weicht unter diesen Themes auf die Systemschrift aus (das Collie-Theme behält seine kyrillische Ergänzung bei).

Ein Theme importieren

Importieren Sie eine .json-Datei in der Karte Theme, prüfen Sie die Vorschau und tippen Sie auf Anwenden.

1. 01
   Tippen Sie in der Karte Theme auf Importieren und wählen Sie eine .json-Datei aus.
2. 02
   Collie liest die Datei und zeigt eine Vorschau an. Sie zeigt den Namen, den Autor, beide Hälften als Farbfelder, eine kleine Seite für jede Hälfte, die Form anhand eines Musters, die Terminalfarben und einen Kontrastbericht.
3. 03
   Tippen Sie auf Anwenden, um das Theme zu behalten und darauf umzuschalten, oder auf Abbrechen, um nichts zu behalten.

Ein Warnung ist eine Zeile im Kontrastbericht, wie etwa „dark: status-blocked chip on card measures 3.9. The floor is 4.5“. Dies bedeutet, dass das Theme an einer Stelle schwer lesbar ist. Anwenden bleibt aktiv, da die Wahl bei Ihnen liegt.

Ein Ablehnung bedeutet, dass die Datei eine Regel verletzt hat. Collie listet die Ursachen auf, behält nichts und wendet nichts an. Die Liste zeigt höchstens 25 Ursachen an, danach eine Zeile „and N more“. Eine Datei wird aus jedem der folgenden Gründe abgelehnt:

• —
  Sie ist kein JSON-Objekt oder größer als 64 KiB.
• —
  Sie legt keine Farbe fest.
• —
  Sie enthält einen unbekannten Schlüssel, eine Version, die Collie nicht liest, einen Wert, der keine Farbe ist, oder eine Schriftart, die Collie nicht mitliefert.
• —
  Ein Formwort steht nicht auf seiner Liste, oder anstelle eines Wortes steht eine Zahl.
• —
  Sie enthält einen surface-Block, einen fonts.display-Schriftschnitt oder einen ansi-Block und gibt Version 1 an.
• —
  Ihrem ansi-Block fehlt ein Schlüssel, er enthält eine Farbe mit Alphakanal oder er besteht ein Prüfkriterium unter Terminal-Palette nicht.
• —
  Sie hat einen ungültigen id, name oder author, oder der id gehört zu einem mitgelieferten Theme.
• —
  Es wäre ein neuntes importiertes Theme. Collie lehnt bereits beim Antippen von Importieren ab, bevor Sie eine Datei auswählen, und erneut bei Anwenden.

Collie prüft bei Anwenden noch eine weitere Sache. Eine Datei, deren id sich bereits auf dem Gerät befindet, wird mit „already imported“ abgewiesen. Entfernen Sie zuerst das alte Theme oder ändern Sie den id.

Ein Theme ändert nur das Aussehen der App 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. Entfernen funktioniert nur, solange ein importiertes Theme aktiv ist. Es löscht dieses Theme, und die App wechselt zurück zu Collie. Die Schriftart bleibt unverändert.

Der Kontrastbericht

Der Bericht misst die Farben eines Themes in beiden Hälften, und eine nicht bestandene Zeile ist eine Warnung, die Sie akzeptieren können.

Die Terminal-Palette ist die einzige Ausnahme, da ihre Kriterien die Datei ablehnen. Die Tabelle listet die Mindestwerte der anderen Teile auf. Ein Mindestwert ist ein Kontrastverhältnis; ein höherer Wert ist daher leichter zu lesen.

• —
  Destruktiver Text wird an den Wert gebunden, den Collie misst, wenn Sie dessen Farben beibehalten. Collies eigenes Hellrot auf seiner Seite misst 4,38. Ein Theme, das beide Farben des Paares beibehält, wird an diesen Wert gebunden und fällt nie unter 3. Ein Theme, das eine der beiden Farben ändert, wird an 4,5 gebunden.
• —
  Ein Verlauf oder eine Körnung wird am äußersten Ende gemessen. Der Bericht misst den Seitentext, die Chips, destructive-Text, status-blocked-Text und rule erneut am Fuß des Verlaufs oder auf der Linienfarbe der Körnung, mit denselben Untergrenzen.
• —
  Ein Streifen wird ebenfalls gemessen. Unter chrome: band werden foreground, muted-foreground und status-blocked auf secondary, der Farbe des Streifens, bei 4,5 gemessen.

Ein Theme exportieren und teilen

Wählen Sie das Theme aus und tippen Sie dann auf Exportieren. Collie speichert <id>.collie-theme.json. Ein Browser, der keine Datei speichern kann, zeigt den Text in einem Dialogfeld mit einer Kopierschaltfläche an. So erstellen Sie Ihr eigenes Theme aus einem mitgelieferten Theme:

1. 01
   Exportieren Sie Nightwatch, Daylight, Harbour oder Collie.
2. 02
   Ändern Sie id und name. Eine ID eines mitgelieferten Themes wird abgelehnt.
3. 03
   Bearbeiten Sie die Farben und die Wörter, und löschen Sie jedes Token, das Sie nicht ändern möchten.
4. 04
   Senden Sie die Datei an Ihr Smartphone und importieren Sie sie anschließend.

Ein Export schreibt die niedrigste Version, die den Inhalt des Themes aufnehmen kann.

Ein Theme schreiben

Eine Datei enthält diese Schlüssel und keine weiteren. Ein unbekannter Schlüssel wird an beliebiger Stelle mit seinem Namen abgewiesen. Dies ist eine vollständige Datei der Version 2: Sie entspricht Daylight mit einer kürzeren Farbliste und der vollständigen Palette.

{
  "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 ist 1 oder 2. Siehe Versionen. Jede andere Zahl wird abgewiesen.
• —
  id umfasst 1 bis 32 Zeichen: Kleinbuchstaben, Ziffern und Bindestriche, beginnend mit einem Buchstaben oder einer Ziffer.
• —
  name umfasst 1 bis 40 Zeichen, und author umfasst bis zu 60 Zeichen. Keines von beiden darf ein Steuerzeichen enthalten.
• —
  light und dark sind Token-Objekte. Geben Sie eine Hälfte oder beide an. Eine Hälfte, die Sie weglassen, und jedes Token, das Sie weglassen, übernimmt den Wert des Themes Collie. Wenn nur eine Hälfte ein Token setzt, erhält die andere Hälfte den Wert des Themes Collie für dieses Token.
• —
  fonts.ui ist optional: system, grotesk, aldrich, plex, geist oder atkinson.
• —
  fonts.display ist optional und akzeptiert dieselben sechs Namen. Siehe Aussehen.
• —
  surface ist optional. Jeder Schlüssel darin ist ebenfalls optional, und ein weggelassener Schlüssel übernimmt das Standardwort seiner Liste. Siehe Form und Aussehen.
• —
  ansi ist optional und enthält entweder alle 18 Schlüssel oder keinen. Siehe Terminal-Palette.
• —
  $schema ist zulässig und wird ignoriert. Die Datei ist maximal 64 KiB groß.

Ein Wert ist #rrggbb, #rrggbbaa oder oklch(L C H) und oklch(L C H / A) als einfache Zahlen. L reicht von 0 bis 1, C von 0 bis 0,5, H von 0 bis 360 und A von 0 bis 1 oder eine Prozentangabe. Nichts anderes funktioniert: keine benannte Farbe, kein rgb(), kein var(), kein url(). Eine Farbe in ansi hat kein Alpha.

Versionen

Eine Datei gibt an, welche Version sie ist, und Collie schreibt die niedrigste Version, die den Inhalt der Datei unterstützt.

• —
  Eine Datei mit einem surface-Block, einem fonts.display-Schriftschnitt oder einem ansi-Block muss 2 angeben. Eine Datei, die 1 angibt und eines davon enthält, wird abgewiesen.
• —
  Eine Datei ohne diese Blöcke darf beides angeben. Collie liest beide Versionen, und der Export eines Designs mit Farben und nur fonts.ui gibt 1 an.
• —
  Eine Version-2-Datei erfordert Collie 1.22.0 oder neuer.
• —
  Eine Version-1-Datei bedeutet das Standardwort jeder Liste für jedes Token von surface.

Die 43 Token

Jede Hälfte akzeptiert jedes dieser Elemente, unterteilt in vier Gruppen.

Form

Fünf Wörter im surface-Block legen die Form von Bedienelementen fest, und jeder Schlüssel akzeptiert genau ein Wort aus einer geschlossenen Liste.

Ein Wort ist ein Name, niemals eine Zahl. Ein freier Radius oder ein freier Abstandsschritt könnte die Mindest-Tippfläche verletzen oder aus einem quadratischen Steuerelement ein Stadion machen. Das erste Wort jeder Liste entspricht dem Aussehen der App vor Version 2.

• —
  Kreise bleiben Kreise. Eine Form, deren Breite der Höhe entspricht, wie etwa ein Statuspunkt, ist keine Eckenstufe; radius verändert sie daher nicht.
• —
  Eine markierte Zeile folgt dem Radius. Unter sharp hat eine ausgewählte oder blockierte Zeile einen 2px breiten Balken am linken Rand. Unter soft und round hat sie einen 2px breiten Rahmen an allen vier Seiten und einen weichen Schatten, da ein linker Balken nicht zu abgerundeten Ecken passt.
• —
  roomy unterschreitet niemals den Standardwert. Tippflächen bleiben bei mindestens 44px. Die Symbole und der Hund in der Kopfzeile behalten ihre Größe, sodass nur der Leerraum um sie herum anwächst.

Aussehen

Fünf weitere Schlüssel des surface-Blocks und ein Schriftartenschlüssel bestimmen das Aussehen der Seite. Sie folgen derselben Regel geschlossener Wörter.

fonts.display benennt eine der sechs Schriftarten für Seitentitel und den Namen in der Kopfzeile. Ein Design, das keine benennt, stellt seine Titel wie bisher in der Schriftart dar. Collie ruft eine Anzeigeschriftart nur ab, wenn das Design sie benennt.

• —
  Ein Hintergrund zeichnet keine Bilddatei. Der Farbverlauf und die Körnung werden aus den Farben des Designs selbst erzeugt. Die Bedienfelder der App sind undurchsichtig, sodass der Hintergrund in den Lücken dazwischen sichtbar ist.
• —
  Der Seitentext wird auf dem Hintergrund gemessen. Der Kontrastbericht prüft das hintere Ende eines Verlaufs und die Linienfarbe der Körnung, damit ein Hintergrund Text nicht verdecken kann.
• —
  Unter einem Farbverlauf behalten die Leisten die flache Seitenfarbe. Auf einem Tablet können Kopfzeile und Leisten wie ein Kasten am oberen Rand einer Seite wirken, die sich nach unten hin abdunkelt. Ein Wort kann das nicht ändern.
• —
  Die Statusleiste folgt einem Streifen. Unter chrome: band übernimmt die Statusleiste des Browsers die Streifenfarbe und unter page die Seitenfarbe.
• —
  rows erreicht jede Listengruppe. Das schließt die Liste innerhalb des Einstellungsindex ein.

Terminal-Palette

Der Block ansi weist dem Terminalspiegel seine eigenen 16 Farben, seine Schriftfarbe und seinen Hintergrund zu.

Der Block enthält alle 18 Schlüssel oder keinen: "0" bis "15" für die 16 Plätze, ink für den Text und ground für den Hintergrund. Eine halbe Palette würde zwei Paletten in einen Bereich legen. Jede Farbe ist #rrggbb oder oklch(), ohne Alpha.

Hinweis. Schreiben Sie die Palette für den Dunkelmodus. Der Spiegel zeichnet immer auf einem dunklen Hintergrund, und im Hellmodus kehrt Collie den gesamten Spiegel um, anstatt ihn neu einzufärben (warum). Hell zeigt das Spiegelbild Ihrer Farben. Wählen Sie ein ground, das zum hellen background Ihres Designs wird, und der Spiegel fügt sich in beiden Modi in die Seite ein.

Eine Farbe, die eine Prüfung nicht besteht, wird unter Nennung ihres Schlüssels abgewiesen. Dies ist keine Warnung, da Sie das Terminal am meisten lesen.

Der helle Satz ist eine feste Liste: Der Muse-Spiegel behandelt diese vier Slots als helle Vordergründe. Die anderen 12 Slots bleiben unter demselben Wert, damit diese Liste für Ihre Palette gültig bleibt.

Was ein Theme nicht ändern kann

Ein Theme ändert den Wert einer Farbe, deren Schriftarten, die Form von Steuerelementen, das Erscheinungsbild der Seite und die Palette des Terminals. Es kann nichts anderes ändern.

• —
  Layout- und Tippgrößen. Ein Smartphone-Layout wird leicht beschädigt. Radius, Schatten, Dichte, Schriftschnitt und Rahmen sind feste Bezeichner, keine freien Werte, und roomy unterschreitet niemals den Standardwert.
• —
  Schriftgrößen und Bewegung. Ein Theme wählt eine Schriftart und einen Schriftschnitt, keine Schriftgröße, und es kann Bewegungen von Elementen nicht ändern.
• —
  Der Collie-Hund. Die Kopfzeile, das Startbildschirmsymbol und der Startbildschirm sehen unter jedem Theme gleich aus.
• —
  Bedeutung eines Status. Dessen Symbol und dessen Bezeichnung bleiben unverändert, damit ein von Ihnen gewähltes Rot oder Orange den Status „blockiert“ niemals wie „erledigt“ aussehen lässt.
• —
  Ein freier Wert, reines CSS, externe Schriftarten. Jeder Schlüssel nimmt eine Farbe oder einen Begriff aus einer Liste an, und Schriftarten stammen aus der von Collie mitgelieferten Liste.

Erster Bildaufbau und die Statusleiste

Ihre Auswahl wird ab dem ersten Bild angezeigt. Ein kleines Skript liest sie aus, bevor die Anwendung lädt, sodass ein mitgeliefertes Theme nicht zuerst kurz das Standard-Theme anzeigt. Ein importiertes Theme verhält sich genauso, mit einer Ausnahme. Wenn ein Token nur in einer Hälfte definiert ist, zeigt dieses Token für ein Bild die Standardfarbe. Die Anwendung prüft das Theme beim Laden erneut. Ein gespeichertes Theme, das die Prüfung nicht besteht, wird verworfen, das Gerät zeigt Collie an und die Browserkonsole nennt den Grund. Die Statusleiste folgt den zwei Seitenfarben des Themes oder dessen zwei Bandfarben, wenn das Theme chrome: band angibt.

Fehlerbehebung

Dies sind die häufigsten Probleme samt Ursache und Behebung.

• —
  Ein Theme zeigt bei einem Token die Standardfarbe. Die Datei hat dieses Token oder die Hälfte ausgelassen. Fehlende Token stammen aus dem Theme Collie. Fügen Sie das Token der gewünschten Hälfte hinzu.
• —
  Die Schriftart hat sich nicht geändert. Ein Theme wendet seine Schriftart einmal an, wenn Sie es auswählen. Wenn Sie danach in Schriftart eine andere Schriftart ausgewählt haben, gilt diese Auswahl. Wählen Sie die Schriftart oder das Theme erneut aus.
• —
  Ein Formbegriff bewirkt nichts. Der Begriff ist möglicherweise der Standardbegriff seiner Liste, oder der Schlüssel fehlt. Ein ausgelassener Schlüssel nimmt den Standardbegriff an. Prüfen Sie die Schreibweise anhand der Tabellen unter Form und Aussehen.
• —
  Die Datei wird abgelehnt und nennt ansi. Eine Palette enthält alle 18 Schlüssel im Dunkelbereich, und jede Farbe muss ihre Prüfung bestehen. Die Ablehnung nennt den Schlüssel und den gemessenen Wert.
• —
  Das Theme ist nach dem Leeren der Browserdaten verschwunden. Importierte Themes existieren nur in diesem Browser. Importieren Sie die Datei erneut.