From 2f0369f7a24430352367d21f9be0f400f005a3cc Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Fri, 30 Oct 2026 22:30:04 +0100
Subject: [PATCH] style: lighter inline code, black system bars for the
 installed app

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                  | 2 ++
 frontend/index.html           | 2 +-
 frontend/public/manifest.json | 4 ++--
 frontend/src/lib/markdown.tsx | 2 +-
 frontend/src/lib/theme.ts     | 4 ++--
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3e817ed..b004b21 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,8 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V
 - PWA Web Share Target: Text, Links und Bilder können über den nativen Teilen-Dialog des Smartphones direkt in den MindSift-Posteingang geteilt werden (`share_target` im Manifest, Abfangen im Service Worker via IndexedDB und Übernahme beim App-Start; Fallback-Route `POST /share-target` im Server).
 
 ### Changed
+- Inline-Code mit dezentem hellen Schimmer im dunklen Theme (Textfarbe mit geringer Deckkraft als Hintergrund) statt dunklem Code-Hintergrund, in hellen Themes entsprechend leicht grau.
+- Installierte App: Statusleiste beim Start und Android-Navigationsleiste schwarz statt blau (die Navigationsleiste kann der Browser nur aus dem Manifest färben, nicht pro Theme); die Statusleiste folgt danach wie bisher dem Theme.
 - Notizen-Seitenleiste: Die ausgewählte Notiz ist nur noch hinterlegt (ohne Rahmen); das Journal-Panel und die Monats-/Jahresauswahl im Kalender kommen ebenfalls ohne Rahmen aus.
 - Code-Blöcke ohne Rahmen und Kopfleiste: oben links nur die Sprache, Kopieren als runder Symbol-Knopf unten rechts (erscheint beim Überfahren, am Handy immer). „In normalen Text umwandeln“ steht für Code-Blöcke (und nummerierte Punkte) in der Aktionsblase des Punkts.
 - Code-, Audio- und Diktat-Blöcke haben unabhängig vom Theme runde Ecken; Callouts bleiben eckig.
diff --git a/frontend/index.html b/frontend/index.html
index 3198e68..3a81e97 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <!-- Blue while loading (matches the splash screen); the app switches it to the theme background -->
-    <meta name="theme-color" content="#2563eb" />
+    <meta name="theme-color" content="#000000" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="MindSift" />
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
index 31af9ac..45f3b94 100644
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -6,8 +6,8 @@
   "start_url": "/",
   "scope": "/",
   "display": "standalone",
-  "background_color": "#2563eb",
-  "theme_color": "#2563eb",
+  "background_color": "#000000",
+  "theme_color": "#000000",
   "orientation": "portrait-primary",
   "icons": [
     {
diff --git a/frontend/src/lib/markdown.tsx b/frontend/src/lib/markdown.tsx
index 4564b34..a78dce0 100644
--- a/frontend/src/lib/markdown.tsx
+++ b/frontend/src/lib/markdown.tsx
@@ -86,7 +86,7 @@ function renderInlineTokens(text: string, options?: InlineMarkdownOptions): Reac
       }
     } else if (token.startsWith('`') && token.endsWith('`')) {
       elements.push(
-        <code key={key} className="px-1.5 py-0.5 rounded bg-code text-main font-mono text-[0.9em] border border-border/50">
+        <code key={key} className="px-1.5 py-0.5 rounded bg-main/[0.12] text-main font-mono text-[0.9em]">
           {token.slice(1, -1)}
         </code>
       );
diff --git a/frontend/src/lib/theme.ts b/frontend/src/lib/theme.ts
index 2a36c78..697a9f4 100644
--- a/frontend/src/lib/theme.ts
+++ b/frontend/src/lib/theme.ts
@@ -157,8 +157,8 @@ function applyToDocument(themeId: ThemeId, customCss: string | null): void {
   syncThemeColorMeta();
 }
 
-// The status bar (theme-color) starts blue for the splash screen; once the app runs it follows the
-// active theme's background so it blends with the header.
+// The status bar (theme-color) starts black (like the Android navigation bar of the installed app,
+// which only takes the manifest colour); once the app runs it follows the theme's background.
 function syncThemeColorMeta(): void {
   const meta = document.querySelector('meta[name="theme-color"]');
   if (!meta || typeof requestAnimationFrame === 'undefined') return;