fix(themes): white editor and grey sidebar in light theme

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

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

frontend/src/features/workspace/DocumentEditor.tsx

@@ -763,9 +763,9 @@ export const DocumentEditor: React.FC<DocumentEditorProps> = ({
   }
 
   return (
-    <div className="flex-1 flex flex-col h-full min-h-0 bg-canvas overflow-y-auto" data-sync-channel={engineState?.channel}>
+    <div className="flex-1 flex flex-col h-full min-h-0 bg-editor overflow-y-auto" data-sync-channel={engineState?.channel}>
       {/* Top Document Action Bar */}
-      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-2 px-4 sm:px-6 py-2 bg-canvas border-b border-border">
+      <div className="sticky top-0 z-20 flex flex-wrap items-center justify-between gap-2 px-4 sm:px-6 py-2 bg-editor border-b border-border">
         <div className="flex items-center gap-2 min-w-0">
           {onBackMobile && (
             <button

frontend/src/features/workspace/WorkspaceView.tsx

@@ -1436,7 +1436,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       </div>
 
       {/* Main Workspace Split Pane */}
-      <div className="flex h-[calc(100vh-7.5rem)] bg-canvas rounded-card border border-border overflow-hidden">
+      <div className="flex h-[calc(100vh-7.5rem)] bg-editor rounded-card border border-border overflow-hidden">
         {/* LEFT MASTER SIDEBAR */}
         <aside
           className={`${
@@ -1445,7 +1445,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
               : mobileShowDetail
               ? 'hidden lg:flex'
               : 'flex'
-          } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-panel border-r border-border transition-all duration-200`}
+          } w-full lg:w-72 xl:w-80 shrink-0 flex-col bg-sidebar border-r border-border transition-all duration-200`}
         >
           {/* Sidebar Header & Actions */}
           <div className="p-3 border-b border-border space-y-2">
@@ -1667,7 +1667,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       <main
         className={`${
           subView !== 'editor' || mobileShowDetail || isSidebarCollapsed ? 'flex' : 'hidden lg:flex'
-        } flex-1 flex-col min-w-0 h-full overflow-hidden bg-canvas`}
+        } flex-1 flex-col min-w-0 h-full overflow-hidden bg-editor`}
       >
         {subView === 'trash' ? (
           <TrashView
@@ -2386,7 +2386,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
             </div>
           </div>
         ) : (
-          <div className="flex-1 flex flex-col items-center justify-center p-12 text-center bg-canvas">
+          <div className="flex-1 flex flex-col items-center justify-center p-12 text-center bg-editor">
             <FileText className="w-10 h-10 text-faint mb-2" />
             <h3 className="text-sm font-semibold text-main mb-1">
               Keine Notiz ausgewählt

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 {

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;

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 */

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'),