Themes und Farben
Farben wählst du im Designer nicht einzeln. Jeder Screen hat ein Theme, und jede Farbe eines Objekts ist eine Rolle in diesem Theme: Text, Hintergrund, Akzent. Wechselt ein Screen das Theme, bekommen alle seine Objekte neue Farben, die zueinander passen. So sehen Screens verschieden aus, ohne dass du Farben aussuchen musst.
Die Themes
Der Designer bringt acht farbige Themes mit: Lavender, Schaltli, Slate, Forest, Ocean, Amber, Terracotta und Garden. Jedes gibt es hell und dunkel. Dazu kommt Paper, schwarz auf weiss, gemacht für die 16 Graustufen des PaperS3. Die Themes lassen sich nicht bearbeiten.
Welche Themes du siehst, hängt vom Gerät ab. Ein Gerät mit Farbdisplay und das schwarzweisse E-Paper bekommen die acht farbigen, neue Master fangen dort mit Lavender an. Der PaperS3 bekommt nur Paper: In Graustufen sähen die farbigen Themes fast gleich aus, und ihre Balken wären ein blasses Grau. Ein Screen, der schon ein anderes Theme hat, etwa nach einem Gerätewechsel, behält es, bis du ein anderes wählst.
Master und Screen
Jeder Master hat ein Theme. Ein Screen übernimmt das seines Masters, bis du ihm ein eigenes gibst. Deshalb hat auch jeder Screen einen Master: Ohne Master gäbe es kein Theme, von dem er ausgeht. Ein neuer Screen bekommt den Master, den du gerade vor dir hast, siehe Screens und Master.
Das Theme stellst du in den Eigenschaften des Screens oder Masters ein, unter Look › Theme. Offen zeigt die Liste jedes Theme als zwei kleine Screens, hell und dunkel, mit einem Dial, einem Slider und einem Icon. Zu ist nur noch der Name zu sehen und ein Punkt in der Akzentfarbe.
Bei einem Screen steht oben in der Liste Inherit from Master mit dem Namen des Themes, das er dann übernimmt. Solange er keines selbst gewählt hat, zeigt das Feld Inherited from Master und das Theme des Masters.
Objekte, die auf dem Master liegen, erscheinen auf jedem Screen in dessen Theme. Dieselbe Beschriftung ist auf einem dunklen Screen hell und auf einem hellen dunkel.
Rollen
Unter Colour wählt jedes Objekt für jede seiner Farben eine Rolle. Das Farbfeld daneben zeigt, wie die Rolle auf diesem Screen aussieht.
| Rolle | wofür |
|---|---|
| Surface | der Hintergrund des Screens |
| Panel | Flächen auf dem Screen: Boxen, Felder |
| Outline | Ränder und ruhige Linien |
| Text | Text, Linien, Icons |
| Muted text | Nebentext, Untertitel |
| Accent | Füllung von Bar, Slider, Gauge und Dial, Schalter und Buttons |
| Text on accent | Text auf einer Fläche in der Akzentfarbe |
| Second accent | eine zweite Hervorhebung, etwa ein Button, der sich vom Rest abheben soll |
| Gradient end | das Ende des Verlaufs in Bar, Slider, Gauge und Dial |
| Track | der leere Teil von Bar, Slider, Gauge und Dial |
| Track edge | ein Rand um diesen leeren Teil, 2 Pixel breit. Die farbigen Themes haben keinen, Paper einen schwarzen |
Dazu gibt es Transparent, wo ein Objekt durchsichtig sein darf, und beim Icon Icon's own color für die Farben, die das Icon selbst hat. Neue Objekte bekommen die Rolle, die zu ihnen passt: Text die Rolle Text, eine Bar den Akzent. Eine neue Beschriftung hat keinen Hintergrund und keinen Rahmen.
Verlauf
Hat ein Bar, Slider, Gauge oder Dial als Füllung die Rolle Accent, läuft die Füllung auf einem Farbdisplay von Accent zu Gradient end, vom Anfang der Skala bis zu ihrem Ende. Der Anfasser von Slider und Dial hat die Farbe, die die Füllung an seiner Stelle hat.
Jedes Theme hat ein eigenes Gradient end, das zu seinem Akzent passt. Wählst du für die Füllung eine andere Rolle, bleibt sie einfarbig. Auf dem PaperS3 und auf E-Paper-Displays ist die Füllung immer einfarbig.
Knob, 4.3B und die Android-App brauchen dafür eine Firmware oder App ab dem 28. September 2026. Ältere zeigen die Füllung einfarbig.
Hell und dunkel
Der Schalter Dark unten rechts neben Adornment zeigt im Designer die dunkle Variante der Themes: im Screen, in den Vorschaubildern und in der Vorschau. Er ändert nichts am Projekt und ist kein Schritt, den Undo zurücknimmt.
Auf den Geräten wechselt eine ganze Anlage auf einmal zwischen hell und dunkel, über das Topic schaltli/state/theme mit light oder dark. Umschalten kannst du mit einem Befehl an schaltli/cmnd/theme, etwa mit einem Switch mit den Zuständen light und dark, aus Node-RED oder einer anderen Steuerung. Den Zustand hält die VanPi-Brücke. Fehlt er, gilt hell.
Knob, 4.3B und die Android-App wechseln sofort, sobald sich der Wert ändert, ohne neues Deploy. Dafür brauchen sie eine Firmware oder App ab dem 26. September 2026, ältere zeigen immer hell. Wie du ein Gerät aktualisierst, steht unter Firmware-Updates.
Graustufen und Schwarzweiss
Der PaperS3 und E-Paper-Displays haben nur eine Variante, die helle, auf die Farben gerundet, die das Display zeigen kann. Dark ist dort ausgegraut. Zwei Themes, die gleich hell sind, sehen auf einem solchen Gerät gleich aus. In der Liste der Themes siehst du das schon beim Auswählen.
Ältere Projekte
Ein Projekt aus der Zeit vor den Themes öffnet der Designer mit dem Theme Lavender. Jede Farbe darin wird zu der Rolle, die ihr am nächsten kommt. Objekte mit den früheren Standardfarben sehen danach aus wie vorher, eine selbst gewählte Farbe wird zur nächsten Rolle. Screens ohne Master bekommen einen, mit ausgeschaltetem Show master, damit sich an ihnen sonst nichts ändert. Beim nächsten Speichern ist das Projekt umgestellt.