feat(themes): Terrakotta replaces High Contrast; equal header buttons on phones

chore(release): v0.12.0

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

CHANGELOG.md

@@ -6,6 +6,18 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 
 ## [Unreleased]
 
+## [0.12.0] - 2026-10-30
+
+### Added
+- Neues Theme **Terrakotta**: warmes Cremepapier für Notizen, sandfarbene Seitenleiste, tintendunkle Schrift, gebrannter Terrakotta-Akzent mit Salbeigrün und weiche Ecken; Code-Hervorhebung in Erdtönen.
+
+### Removed
+- Theme „High Contrast“. Wer es aktiv hatte, bekommt automatisch „MindSift Dark“.
+
+### Changed
+- Themes: Ob ein Theme hell ist (helle Code-Farben, kein Dunkelmodus), richtet sich nach seiner Hintergrundfarbe statt nur nach „Light“.
+- Kopfzeile am Handy: Such-Knopf und Profilbild sind gleich große Kreise.
+
 ## [0.11.1] - 2026-10-30
 
 ### Changed
@@ -290,7 +302,8 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 - Geteilte Listen (Einkaufs-, Pack- und Checklisten) mit `#Kategorie`-Gruppierung, Mengenangaben und Echtzeit-Abhaken.
 - Benutzer-, Gruppen- und Admin-Verwaltung (Ersteinrichtungs-Assistent, Einladungscodes, Profilbilder, persönliche API-Keys & Webhook-Ingest `/api/v1/webhooks/ingest`, JSON-Datenexport) sowie CSS-Theme-Engine mit 4 Themes (`Dark`, `Light`, `High Contrast`, `Soft`) und PWA-Unterstützung.
 
-[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.11.1...dev
+[Unreleased]: https://git.dsit.me/sandrodach/MindSift/compare/v0.12.0...dev
+[0.12.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.11.1...v0.12.0
 [0.11.1]: https://git.dsit.me/sandrodach/MindSift/compare/v0.11.0...v0.11.1
 [0.11.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.10.0...v0.11.0
 [0.10.0]: https://git.dsit.me/sandrodach/MindSift/compare/v0.9.0...v0.10.0

Doku/theming.md

@@ -80,7 +80,7 @@ Jede Theme-Datei gliedert sich in sechs exakt definierte Bereiche:
 | :--- | :--- | :--- | :--- |
 | `dark` | [`theme-dark.css`](../frontend/src/themes/theme-dark.css) | Standard Dark Slate / Monochrom | Streng eckig (`0px` Cards, `2px` Buttons) |
 | `light` | [`theme-light.css`](../frontend/src/themes/theme-light.css) | Daylight Clean White / Minimalistisch | Modern dezent (`4px` Cards, `4px` Buttons) |
-| `high-contrast` | [`theme-high-contrast.css`](../frontend/src/themes/theme-high-contrast.css) | Reines Schwarz/Weiß mit AAA-Kontrast | Streng eckig (`0px`, kräftige Rahmen) |
+| `terracotta` | [`theme-terracotta.css`](../frontend/src/themes/theme-terracotta.css) | Warmes Cremepapier, Tinte, Terrakotta-Akzent, eigene Code-Farben in Erdtönen | Weich (`12px`) |
 | `soft` | [`theme-soft.css`](../frontend/src/themes/theme-soft.css) | Warmes Soft Slate mit Indigo-Akzent | Weich gerundet (`12px` Cards, `8px` Buttons) |
 | `polarized` | [`theme-polarized.css`](../frontend/src/themes/theme-polarized.css) | Tiefdunkles Obsidian mit elektrischem Grün/Türkis | Streng eckig (`0px` Cards, `2px` Buttons) |
 | `suri` | [`theme-suri.css`](../frontend/src/themes/theme-suri.css) | Warmes Mitternachts-Pflaume mit samtiger Orchidee | Weich gerundet (`10px` Cards, `6px` Buttons) |

README.md

@@ -100,7 +100,7 @@ Technik dahinter: [Doku/modules/collaboration.md](Doku/modules/collaboration.md)
 * Geführte Ersteinrichtung, Rollen *Admin* und *Mitglied*, Einladungscodes, optional offene Registrierung.
 * Gruppen mit Gruppen-Admins für Freigaben.
 * Admin-Bereich: Benutzer, Einladungen, Instanzname, SMTP, Freigabe-Modus.
-* Sechs Themes (Dark, Light, High-Contrast, Soft, Polarized, Suri) plus Theme-Manager für eigene CSS-Themes, installierbar als PWA. Die App 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.
+* Sechs Themes (Dark, Light, Terrakotta, Soft, Polarized, Suri) plus Theme-Manager für eigene CSS-Themes, installierbar als PWA. Die App 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.
 
 ### 🔌 Integrationen
 

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mindsift-frontend",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mindsift-frontend",
-      "version": "0.11.1",
+      "version": "0.12.0",
       "license": "Unlicense",
       "dependencies": {
         "@fontsource-variable/inter": "5.3.0",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mindsift-frontend",
   "private": true,
-  "version": "0.11.1",
+  "version": "0.12.0",
   "license": "Unlicense",
   "type": "module",
   "scripts": {

frontend/src/App.tsx

@@ -864,11 +864,14 @@ export const App: React.FC = () => {
                 triggerHaptic(10);
                 setShowCommandPalette(true);
               }}
-              className="w-11 h-11 rounded-full flex items-center justify-center text-muted hover:text-main bg-panel border border-border transition-transform active:scale-95 cursor-pointer"
+              className="w-11 h-11 rounded-full flex items-center justify-center text-muted hover:text-main transition-transform active:scale-95 cursor-pointer"
               title="Globale Suche"
               aria-label="Globale Suche öffnen"
             >
+              {/* Same visible size as the avatar next to it; the 44px button stays the touch target */}
+              <span className="w-9 h-9 rounded-full flex items-center justify-center bg-panel border border-border">
                 <Search className="w-4 h-4" />
+              </span>
             </button>
 
             <button
@@ -884,7 +887,7 @@ export const App: React.FC = () => {
               }`}
               title="Profil & Einstellungen"
             >
-              <UserAvatar user={user} size="sm" className="shadow-sm" />
+              <UserAvatar user={user} size="md" className="shadow-sm" />
             </button>
           </div>
         </div>

frontend/src/index.css

@@ -11,7 +11,7 @@
 
 @import './themes/theme-dark.css';
 @import './themes/theme-light.css';
-@import './themes/theme-high-contrast.css';
+@import './themes/theme-terracotta.css';
 @import './themes/theme-soft.css';
 @import './themes/theme-polarized.css';
 @import './themes/theme-suri.css';
@@ -426,7 +426,7 @@ body {
     --code-variable: #9cdcfe;
   }
 
-  :root:not(.dark),
+  :root:not(.dark):not([data-theme="terracotta"]),
   :root[data-theme="light"] {
     --code-keyword: #0000ff;
     --code-string: #a31515;

frontend/src/lib/theme.ts

@@ -47,15 +47,15 @@ export const AVAILABLE_THEMES: ThemeOption[] = [
     isRounded: false,
   },
   {
-    id: 'high-contrast',
+    id: 'terracotta',
-    name: 'High Contrast (Scharf)',
+    name: 'Terrakotta (Warmes Papier)',
-    subtitle: 'Tiefschwarz (#000) & weiße Konturen',
+    subtitle: 'Cremepapier, Tinte & gebrannte Terrakotta (12px)',
-    file: 'src/themes/theme-high-contrast.css',
+    file: 'src/themes/theme-terracotta.css',
-    previewBg: '#000000',
+    previewBg: '#efe6d8',
-    previewPanel: '#09090b',
+    previewPanel: '#fbf6ee',
-    previewAccent: '#38bdf8',
+    previewAccent: '#c2410c',
-    previewText: '#ffffff',
+    previewText: '#2b2118',
-    isRounded: false,
+    isRounded: true,
   },
   {
     id: 'soft',
@@ -152,7 +152,10 @@ function applyToDocument(themeId: ThemeId, customCss: string | null): void {
   const root = document.documentElement;
   const attr = customCss !== null ? themeAttribute(customCss) : themeId;
   root.setAttribute('data-theme', attr);
-  const light = customCss !== null ? isLightColor(readCssVar(customCss, 'bg-app')) : themeId === 'light';
+  const light =
+    customCss !== null
+      ? isLightColor(readCssVar(customCss, 'bg-app'))
+      : isLightColor(AVAILABLE_THEMES.find((t) => t.id === themeId)?.previewBg);
   root.classList.toggle('dark', !light);
   syncThemeColorMeta();
 }

frontend/src/themes/theme-high-contrast.css

@@ -1,66 +0,0 @@
-/* ==========================================================================
-   MINDSIFT THEME: HIGH CONTRAST (Maximaler Kontrast & Schärfe)
-   Alle Farben, Kontraste und Rundungen zentral in einer einzigen Datei.
-   ========================================================================== */
-
-:root[data-theme="high-contrast"] {
-  /* --- 1. AKZENTFARBE --- */
-  --accent-primary: #38bdf8;
-  --accent-hover: #7dd3fc;
-  --accent-dim: rgba(56, 189, 248, 0.22);
-  --accent-border: #38bdf8;
-  --text-on-accent: #000000;
-
-  /* --- 2. OBERFLÄCHEN & HINTERGRÜNDE --- */
-  --bg-app: #000000;
-  --bg-panel: #09090b;
-  --bg-panel-elevated: #18181b;
-  --bg-panel-hover: #27272a;
-  --bg-input: #000000;
-  --bg-overlay: rgba(0, 0, 0, 0.88);
-  --bg-code: #000000;
-
-  /* --- 3. TEXT & KONTRASTE --- */
-  --text-main: #ffffff;
-  --text-muted: #e4e4e7;
-  --text-faint: #a1a1aa;
-
-  /* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
-  --border-color: rgba(255, 255, 255, 0.38);
-  --border-subtle: rgba(255, 255, 255, 0.20);
-  --border-strong: #ffffff;
-  --shadow-panel: 0 0 0 1px #ffffff;
-  --scrollbar-thumb: rgba(255, 255, 255, 0.45);
-  --scrollbar-thumb-hover: #ffffff;
-
-  /* --- 5. STATUS- & SIGNALFARBEN --- */
-  --color-success: #4ade80;
-  --bg-success: rgba(74, 222, 128, 0.20);
-  --border-success: #4ade80;
-
-  --color-danger: #f87171;
-  --bg-danger: rgba(248, 113, 113, 0.20);
-  --border-danger: #f87171;
-
-  --color-warning: #fbbf24;
-  --bg-warning: rgba(251, 191, 36, 0.20);
-  --border-warning: #fbbf24;
-
-  /* --- 6. RUNDUNGEN (Geometrie: Komplett scharfkantig) --- */
-  --radius-card: 0px;
-  --radius-btn: 0px;
-  --radius-input: 0px;
-  --radius-checkbox: 0px;
-  --radius-pill: 0px;
-
-  /* --- 7. CODE-SYNTAX-HIGHLIGHTING (VS Code Dark+) --- */
-  --code-keyword: #569cd6;
-  --code-string: #ce9178;
-  --code-number: #b5cea8;
-  --code-comment: #6a9955;
-  --code-property: #9cdcfe;
-  --code-function: #dcdcaa;
-  --code-type: #4ec9b0;
-  --code-punctuation: #ffffff;
-  --code-variable: #9cdcfe;
-}

frontend/src/themes/theme-terracotta.css

@@ -0,0 +1,69 @@
+/* ==========================================================================
+   MINDSIFT THEME: TERRAKOTTA (Warmes Papier & Tinte)
+   Cremefarbenes Notizpapier, sandfarbene Seitenleiste, tintendunkle Schrift,
+   gebrannter Terrakotta-Akzent mit Salbeigrün und weiche Ecken.
+   ========================================================================== */
+
+:root[data-theme="terracotta"] {
+  /* --- 1. AKZENTFARBE (Gebrannte Terrakotta) --- */
+  --accent-primary: #c2410c;
+  --accent-hover: #9a3412;
+  --accent-dim: rgba(194, 65, 12, 0.10);
+  --accent-border: rgba(194, 65, 12, 0.34);
+  --text-on-accent: #fffaf3;
+
+  /* --- 2. OBERFLÄCHEN & HINTERGRÜNDE (Papier, Sand, Leinen) --- */
+  --bg-app: #efe6d8;
+  --bg-panel: #fbf6ee;
+  --bg-panel-elevated: #eadfcd;
+  --bg-panel-hover: #e0d2bb;
+  --bg-input: #fffbf5;
+  --bg-overlay: rgba(46, 33, 22, 0.45);
+  --bg-code: #f1e8da;
+  --bg-editor: #fdf9f2;
+  --bg-sidebar: #f2eadc;
+
+  /* --- 3. TEXT & KONTRASTE (Tinte) --- */
+  --text-main: #2b2118;
+  --text-muted: #5c4b3c;
+  --text-faint: #8a7764;
+
+  /* --- 4. RAHMEN, LINIEN & SCHATTEN --- */
+  --border-color: rgba(92, 64, 40, 0.18);
+  --border-subtle: rgba(92, 64, 40, 0.09);
+  --border-strong: rgba(92, 64, 40, 0.32);
+  --shadow-panel: 0 10px 28px rgba(74, 50, 28, 0.10);
+  --scrollbar-thumb: rgba(92, 64, 40, 0.22);
+  --scrollbar-thumb-hover: rgba(92, 64, 40, 0.38);
+
+  /* --- 5. STATUS- & SIGNALFARBEN (Salbei, Ziegel, Ocker) --- */
+  --color-success: #4d7c4f;
+  --bg-success: rgba(77, 124, 79, 0.12);
+  --border-success: rgba(77, 124, 79, 0.36);
+
+  --color-danger: #b42318;
+  --bg-danger: rgba(180, 35, 24, 0.09);
+  --border-danger: rgba(180, 35, 24, 0.34);
+
+  --color-warning: #a16207;
+  --bg-warning: rgba(161, 98, 7, 0.11);
+  --border-warning: rgba(161, 98, 7, 0.34);
+
+  /* --- 6. RUNDUNGEN (Weich wie Papierkarten) --- */
+  --radius-card: 12px;
+  --radius-btn: 8px;
+  --radius-input: 8px;
+  --radius-checkbox: 4px;
+  --radius-pill: 9999px;
+
+  /* --- 7. CODE-SYNTAX-HIGHLIGHTING (warme Erdtöne, gut lesbar auf Papier) --- */
+  --code-keyword: #9a3412;
+  --code-string: #4d7c4f;
+  --code-number: #b45309;
+  --code-comment: #8a7764;
+  --code-property: #7c2d12;
+  --code-function: #6b4f9e;
+  --code-type: #0f766e;
+  --code-punctuation: #5c4b3c;
+  --code-variable: #7c2d12;
+}