docs: plain README screenshots, diagonal only for the title and a colour-family grid

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

CHANGELOG.md

@@ -8,6 +8,9 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 
 ## [0.16.1] - 2026-10-31
 
+### Changed
+- README-Screenshots aufgeräumt: Nur noch das Titelbild ist diagonal hell/dunkel geteilt, Handy und übrige Ansichten zeigen jeweils ein Theme. Neu ist ein Raster mit den Farbfamilien Fjord, Terrakotta, Polarized und Suri (je hell/dunkel diagonal, im Kanban-Board).
+
 ### Fixed
 - Einstellungen am Handy: Bei der Tageszusammenfassung ragten die Kanal-Schalter (E-Mail, Discord, Webhook, Push) rechts aus dem Bild. Am Handy stehen sie jetzt zu zweit untereinander.
 

README.md

@@ -6,7 +6,7 @@
 [![Self-Hosted](https://img.shields.io/badge/100%25-Self--Hosted-2563eb?style=flat-square)](#)
 [![Docker](https://img.shields.io/badge/Deployment-Single%20Container-2496ed?style=flat-square&logo=docker&logoColor=white)](#-schnellstart)
 [![SQLite](https://img.shields.io/badge/Daten-SQLite-003b57?style=flat-square&logo=sqlite&logoColor=white)](#-deine-daten-gehören-dir)
-[![Version](https://img.shields.io/badge/Version-v0.15.0-16a34a?style=flat-square)](CHANGELOG.md)
+[![Version](https://img.shields.io/badge/Version-v0.16.1-16a34a?style=flat-square)](CHANGELOG.md)
 
 **MindSift** ist eine selbst gehostete Schaltstelle für spontane Gedanken, Aufgaben mit Kanban-Board, hierarchische Outliner-Notizen, die mehrere Personen gleichzeitig bearbeiten können, und gemeinsame Listen. Alles läuft als ein einzelner Container mit eingebetteter SQLite-Datenbank, auf deinem eigenen Server.
 
@@ -14,7 +14,7 @@
   <img src="screenshots/Triage_desktop.png" alt="MindSift Triage am Desktop, links hell, rechts dunkel" width="85%" />
 </p>
 
-<sub>Alle Screenshots zeigen links das helle und rechts das dunkle Theme.</sub>
+<sub>Links das helle, rechts das dunkle Theme.</sub>
 
 [Philosophie](#-die-philosophie) • [Funktionen](#-funktionen) • [Schnellstart](#-schnellstart) • [Betrieb](#-betrieb--konfiguration) • [Entwicklung](#-entwicklung) • [Dokumentation](#-dokumentation)
 
@@ -43,9 +43,9 @@ Die meisten Notiz- und Aufgaben-Apps verlangen Struktur im falschen Moment: Wenn
 * Papierkorb mit Wiederherstellen.
 
 <p align="center">
-  <img src="screenshots/Mobile_Triage.png" alt="MindSift Triage am Smartphone" width="280px" />
+  <img src="screenshots/Mobile_Triage.png" alt="MindSift Triage am Smartphone, helles Theme" width="280px" />
   &nbsp;&nbsp;
-  <img src="screenshots/Mobile_Workspace.png" alt="MindSift Notiz am Smartphone" width="280px" />
+  <img src="screenshots/Mobile_Workspace.png" alt="MindSift Notiz am Smartphone, dunkles Theme" width="280px" />
 </p>
 
 ### ✅ Aufgaben & Kanban
@@ -115,6 +115,17 @@ Technik dahinter: [Doku/modules/collaboration.md](Doku/modules/collaboration.md)
 * **Fünf Farbfamilien** mit je einer hellen und dunklen Variante: Klassik, Fjord, Terrakotta, Polarized, Suri. Hell/Dunkel auf Wunsch „Wie System“, dazu eine eigene Akzentfarbe, Ecken rund oder eckig und Knöpfe mit oder ohne Rahmen (pro Gerät). Für eigene Themes gibt es einen Theme-Manager (eine CSS-Datei).
 * **Installierbar als App (PWA)** auf Smartphone und Desktop. Sie startet auch ohne Netz mit dem zuletzt geladenen Stand; offline erfasste Gedanken und abgehakte Aufgaben oder Listeneinträge werden nachgereicht, sobald die Verbindung wieder da ist.
 
+<table>
+  <tr>
+    <td align="center"><img src="screenshots/Theme_fjord.png" alt="Farbfamilie Fjord, links hell, rechts dunkel" /><br /><sub><b>Fjord</b></sub></td>
+    <td align="center"><img src="screenshots/Theme_terracotta.png" alt="Farbfamilie Terrakotta, links hell, rechts dunkel" /><br /><sub><b>Terrakotta</b></sub></td>
+  </tr>
+  <tr>
+    <td align="center"><img src="screenshots/Theme_polarized.png" alt="Farbfamilie Polarized, links hell, rechts dunkel" /><br /><sub><b>Polarized</b></sub></td>
+    <td align="center"><img src="screenshots/Theme_suri.png" alt="Farbfamilie Suri, links hell, rechts dunkel" /><br /><sub><b>Suri</b></sub></td>
+  </tr>
+</table>
+
 ### 🔌 Integrationen
 
 * **Eingehend (API-Key):** `POST /api/v1/webhooks/ingest` legt Gedanken, Aufgaben oder Listeneinträge aus Smarthome, Skripten oder Automationen an.

e2e/screenshots.mjs

@@ -1,6 +1,7 @@
 // Takes the README screenshots from a fresh server in demo mode (sample data of admin/admin).
-// Every picture is taken twice in the same state – light and dark theme – and the two halves are
-// joined along a slanted diagonal (light left, dark right).
+// The title picture and the colour-family grid are taken twice in the same state – light and dark
+// theme – and joined along a slanted diagonal (light left, dark right); the others are plain light
+// or dark pictures.
 // Usage: e2e/screenshots.sh (builds the image) or MINDSIFT_URL=… SHOTS_DIR=… node screenshots.mjs
 // Theme pair: SHOT_LIGHT / SHOT_DARK (default: light / dark, the "Klassik" family)
 import fs from 'node:fs';
@@ -13,6 +14,13 @@ const DARK = process.env.SHOT_DARK || 'dark';
 const DESKTOP = { viewport: { width: 1518, height: 886 }, deviceScaleFactor: 2 };
 const MOBILE = { viewport: { width: 390, height: 844 }, deviceScaleFactor: 2, isMobile: true, hasTouch: true };
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+// Colour families for the theme grid in the README (Klassik is the title picture)
+const FAMILIES = [
+  ['fjord', 'fjord', 'fjord-night'],
+  ['terracotta', 'terracotta', 'terracotta-night'],
+  ['polarized', 'polarized-light', 'polarized'],
+  ['suri', 'suri-light', 'suri'],
+];
 
 async function login(user) {
   const res = await fetch(`${BASE}/api/v1/auth/login`, {
@@ -57,10 +65,11 @@ async function setTheme(page, id, dark) {
 }
 
 let composer;
-// Light picture on the left of the diagonal, dark on the right, a thin line between them
-async function compose(lightPng, darkPng, file) {
+// Light picture on the left of the diagonal, dark on the right, a thin line between them;
+// scale < 1 shrinks the result (small pictures of the theme grid)
+async function compose(lightPng, darkPng, file, scale = 1) {
   const dataUrl = await composer.evaluate(
-    async ([light, dark]) => {
+    async ([light, dark, scale]) => {
       const load = (b64) =>
         new Promise((resolve) => {
           const img = new Image();
@@ -68,13 +77,14 @@ async function compose(lightPng, darkPng, file) {
           img.src = 'data:image/png;base64,' + b64;
         });
       const [a, b] = await Promise.all([load(light), load(dark)]);
-      const w = a.naturalWidth;
-      const h = a.naturalHeight;
+      const w = Math.round(a.naturalWidth * scale);
+      const h = Math.round(a.naturalHeight * scale);
       const canvas = document.createElement('canvas');
       canvas.width = w;
       canvas.height = h;
       const ctx = canvas.getContext('2d');
-      ctx.drawImage(b, 0, 0);
+      ctx.imageSmoothingQuality = 'high';
+      ctx.drawImage(b, 0, 0, w, h);
       const top = w * 0.58;
       const bottom = w * 0.42;
       ctx.save();
@@ -85,7 +95,7 @@ async function compose(lightPng, darkPng, file) {
       ctx.lineTo(0, h);
       ctx.closePath();
       ctx.clip();
-      ctx.drawImage(a, 0, 0);
+      ctx.drawImage(a, 0, 0, w, h);
       ctx.restore();
       ctx.strokeStyle = 'rgba(255, 255, 255, 0.9)';
       ctx.lineWidth = Math.max(2, w / 600);
@@ -97,19 +107,30 @@ async function compose(lightPng, darkPng, file) {
       ctx.stroke();
       return canvas.toDataURL('image/png');
     },
-    [lightPng.toString('base64'), darkPng.toString('base64')]
+    [lightPng.toString('base64'), darkPng.toString('base64'), scale]
   );
   fs.writeFileSync(`${OUT}/${file}`, Buffer.from(dataUrl.split(',')[1], 'base64'));
 }
 
-async function shot(page, file) {
+// Diagonal light/dark picture
+async function shot(page, file, { light = LIGHT, dark = DARK, scale = 1 } = {}) {
   await sleep(800); // animations
   await page.mouse.move(0, 0);
-  await setTheme(page, LIGHT, false);
-  const light = await page.screenshot();
-  await setTheme(page, DARK, true);
-  const dark = await page.screenshot();
-  await compose(light, dark, file);
+  await setTheme(page, light, false);
+  const lightPng = await page.screenshot();
+  await setTheme(page, dark, true);
+  const darkPng = await page.screenshot();
+  await compose(lightPng, darkPng, file, scale);
+  console.log(`OK   ${file}`);
+}
+
+// Plain picture in one theme ('light' or 'dark' of the chosen pair)
+async function plain(page, file, mode) {
+  await sleep(800);
+  await page.mouse.move(0, 0);
+  if (mode === 'light') await setTheme(page, LIGHT, false);
+  else await setTheme(page, DARK, true);
+  await page.screenshot({ path: `${OUT}/${file}` });
   console.log(`OK   ${file}`);
 }
 
@@ -126,7 +147,11 @@ const main = async () => {
   await tab(page, 'Aufgaben');
   await page.getByText('Homelab', { exact: true }).first().click().catch(() => {});
   await page.getByRole('button', { name: /Kanban|Board/ }).first().click().catch(() => {});
-  await shot(page, 'aufgaben_desktop.png');
+  await plain(page, 'aufgaben_desktop.png', 'dark');
+  // Colour families: the board fills the width, so both halves of the diagonal show content
+  for (const [family, light, dark] of FAMILIES) {
+    await shot(page, `Theme_${family}.png`, { light, dark, scale: 0.5 });
+  }
 
   // The demo user edits a bullet of the shared note, so the screenshot shows lock and presence
   const other = await open(browser, user, DESKTOP);
@@ -142,7 +167,7 @@ const main = async () => {
   await page.waitForFunction(() => document.querySelectorAll('textarea').length > 5, null, { timeout: 10000 });
   await page.getByText('User', { exact: false }).first().waitFor({ timeout: 15000 }).catch(() => {});
   await sleep(2000);
-  await shot(page, 'workspace_desktop.png');
+  await plain(page, 'workspace_desktop.png', 'light');
 
   // Journal: a few days with entries, the calendar in the sidebar
   const H = { Authorization: `Bearer ${admin}`, 'Content-Type': 'application/json' };
@@ -171,22 +196,22 @@ const main = async () => {
   await page.getByRole('button', { name: 'Heute' }).click().catch(() => {});
   await page.mouse.click(1000, 860);
   await sleep(2500);
-  await shot(page, 'journal_desktop.png');
+  await plain(page, 'journal_desktop.png', 'dark');
   await page.getByRole('button', { name: 'Journal', exact: true }).click(); // close it again
 
   await tab(page, 'Listen');
   await page.getByText('Wocheneinkauf', { exact: true }).first().click().catch(() => {});
-  await shot(page, 'Listen_desktop.png');
+  await plain(page, 'Listen_desktop.png', 'light');
 
   const mobile = await open(browser, admin, MOBILE);
   await mobile.getByText('Später im Browser weiter nutzen').click({ timeout: 5000 }).catch(() => {}); // install prompt
-  await shot(mobile, 'Mobile_Triage.png');
+  await plain(mobile, 'Mobile_Triage.png', 'light');
 
   await tab(mobile, 'Workspace');
   await sleep(600);
   await mobile.getByText(/^Homelab 2\.0/).first().click();
   await sleep(1500);
-  await shot(mobile, 'Mobile_Workspace.png');
+  await plain(mobile, 'Mobile_Workspace.png', 'dark');
 
   await browser.close();
 };

e2e/screenshots.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 # Builds MindSift, starts it in demo mode with a fresh database and renews the README screenshots
-# in screenshots/ (light and dark theme joined along a diagonal). Requires podman (or docker via
-# ENGINE=docker). Usage: e2e/screenshots.sh, other theme pair: SHOT_LIGHT=fjord SHOT_DARK=fjord-night
+# in screenshots/ (title picture and colour-family grid: light and dark joined along a diagonal).
+# Requires podman (or docker via ENGINE=docker). Usage: e2e/screenshots.sh, other theme pair: SHOT_LIGHT=fjord SHOT_DARK=fjord-night
 set -euo pipefail
 ENGINE="${ENGINE:-podman}"
 ROOT="$(cd "$(dirname "$0")/.." && pwd)"