From 2542e0e7b840110812894e2bfb42d1e0622ab220 Mon Sep 17 00:00:00 2001 From: Sandro Date: Fri, 30 Oct 2026 18:03:46 +0100 Subject: [PATCH] fix(themes): white editor and grey sidebar in light theme Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 3 +++ frontend/src/features/workspace/DocumentEditor.tsx | 4 ++-- frontend/src/features/workspace/WorkspaceView.tsx | 8 ++++---- frontend/src/index.css | 7 +++++++ frontend/src/themes/theme-light.css | 2 ++ frontend/src/themes/theme-template.css | 1 + frontend/tailwind.config.js | 2 ++ 7 files changed, 21 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 37cc979..881f22a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,9 @@ Das Format folgt [Keep a Changelog](https://keepachangelog.com/de/1.1.0/), die V ## [Unreleased] +### Fixed +- Light-Theme: Notizen stehen auf einem weißen Blatt, die Ordnerleiste ist dezent grau abgesetzt (bisher umgekehrt). Themes können das über die neuen Variablen `--bg-editor` und `--bg-sidebar` selbst festlegen. + ## [0.9.0] - 2026-10-30 ### Added diff --git a/frontend/src/features/workspace/DocumentEditor.tsx b/frontend/src/features/workspace/DocumentEditor.tsx index ef1d52d..54398cf 100644 --- a/frontend/src/features/workspace/DocumentEditor.tsx +++ b/frontend/src/features/workspace/DocumentEditor.tsx @@ -763,9 +763,9 @@ export const DocumentEditor: React.FC = ({ } return ( -
+
{/* Top Document Action Bar */} -
+
{onBackMobile && (
{/* Main Workspace Split Pane */} -
+
{/* LEFT MASTER SIDEBAR */}
) : ( -
+

Keine Notiz ausgewählt diff --git a/frontend/src/index.css b/frontend/src/index.css index 75839b8..9e4555d 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -550,6 +550,13 @@ fieldset:disabled :is(button, input, select, textarea) { cursor: not-allowed; } +/* Workspace surfaces: the note editor and the folder sidebar. Themes may override them (the light theme + uses a white sheet next to a grey sidebar); by default they follow the page and panel colours. */ +:root { + --bg-editor: var(--bg-app); + --bg-sidebar: var(--bg-panel); +} + /* Outliner: indent per level and the width a row keeps for its text. Phones indent less and let very deep rows run wider than the screen (the note then scrolls sideways) instead of squeezing the text. */ :root { diff --git a/frontend/src/themes/theme-light.css b/frontend/src/themes/theme-light.css index a1539aa..4f6f641 100644 --- a/frontend/src/themes/theme-light.css +++ b/frontend/src/themes/theme-light.css @@ -19,6 +19,8 @@ --bg-input: #ffffff; --bg-overlay: rgba(15, 23, 42, 0.45); --bg-code: #e2e8f0; + --bg-editor: #ffffff; + --bg-sidebar: #f3f4f6; /* --- 3. TEXT & KONTRASTE --- */ --text-main: #111827; diff --git a/frontend/src/themes/theme-template.css b/frontend/src/themes/theme-template.css index 6830ea1..1b2e884 100644 --- a/frontend/src/themes/theme-template.css +++ b/frontend/src/themes/theme-template.css @@ -21,6 +21,7 @@ --bg-input: #121316; /* Textfelder, Selects, Textareas */ --bg-overlay: rgba(0, 0, 0, 0.72); /* Hintergrund bei Modals/Dialogen */ --bg-code: #0d0e11; /* Code-Blöcke & Terminal-Boxen */ + /* Optional: --bg-editor (Notiz-Editor, Standard --bg-app) und --bg-sidebar (Ordnerleiste, Standard --bg-panel) */ /* --- 3. TEXT & KONTRASTE --- */ --text-main: #f4f4f5; /* Haupttext & Überschriften */ diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index e34d886..754c556 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -14,6 +14,8 @@ export default { extend: { colors: { canvas: v('--bg-app'), + editor: v('--bg-editor'), + sidebar: v('--bg-sidebar'), panel: { DEFAULT: v('--bg-panel'), elevated: v('--bg-panel-elevated'),