From df020676877da32fa164af63663154c691bd33ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Fri, 6 Mar 2026 18:21:35 +0100
Subject: [PATCH] fix(ui): theme WorkflowEditor for dark mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace all hardcoded gray-*/white Tailwind classes with semantic CSS
variable tokens (bg-surface, text-content, border-border-default, etc.)
so the page respects dark/light mode correctly.

- Sidebar, header bar, toolbar: bg-surface + border-border-default
- Node cards: bg-surface + border-accent (selected) / border-border-default
- ConfigSidepanel: bg-surface, text-content-secondary labels
- NewWorkflowModal: bg-surface, border-border-default inputs, accent buttons
- Workflow list items: bg-accent-light highlight for selected, hover:bg-surface-hover
- Empty state icon: text-content-muted
- ReactFlow: colorMode prop tied to useThemeStore (dark/light)
- Background: removed hardcoded #e5e7eb dot color (uses ReactFlow colorMode)
- All blue-600 buttons → bg-accent / hover:bg-accent-hover

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/WorkflowEditor.tsx | 133 +++++++++++++-------------
 1 file changed, 69 insertions(+), 64 deletions(-)

diff --git a/frontend/src/pages/WorkflowEditor.tsx b/frontend/src/pages/WorkflowEditor.tsx
index 47d36f9..77d71a2 100644
--- a/frontend/src/pages/WorkflowEditor.tsx
+++ b/frontend/src/pages/WorkflowEditor.tsx
@@ -15,6 +15,7 @@ import {
   type NodeTypes,
 } from '@xyflow/react'
 import '@xyflow/react/dist/style.css'
+import { useThemeStore, resolveTheme } from '../store/theme'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import {
   getWorkflows,
@@ -55,8 +56,8 @@ interface BaseNodeProps {
 function BaseNode({ label, icon, color, description, selected, hasSource = true, hasTarget = true }: BaseNodeProps) {
   return (
     <div
-      className={`rounded-lg border-2 p-3 min-w-[140px] bg-white shadow-sm transition-colors ${
-        selected ? 'border-blue-500' : 'border-gray-200'
+      className={`rounded-lg border-2 p-3 min-w-[140px] bg-surface shadow-sm transition-colors ${
+        selected ? 'border-accent' : 'border-border-default'
       }`}
     >
       {hasTarget && (
@@ -236,12 +237,12 @@ function ConfigSidepanel({
   onChange: (p: WorkflowParams) => void
 }) {
   return (
-    <div className="w-72 border-l border-gray-200 bg-white p-4 space-y-5 overflow-y-auto">
-      <h3 className="font-semibold text-gray-800">Node-Konfiguration</h3>
+    <div className="w-72 border-l border-border-default bg-surface p-4 space-y-5 overflow-y-auto">
+      <h3 className="font-semibold text-content">Node-Konfiguration</h3>
 
       {/* Render Engine */}
       <div>
-        <label className="text-sm text-gray-600 mb-2 block">Render Engine</label>
+        <label className="text-sm text-content-secondary mb-2 block">Render Engine</label>
         <div className="flex gap-2">
           {(['cycles', 'eevee'] as const).map(eng => (
             <button
@@ -249,8 +250,8 @@ function ConfigSidepanel({
               onClick={() => onChange({ ...params, render_engine: eng })}
               className={`px-3 py-1.5 rounded text-sm font-medium transition-colors ${
                 (params.render_engine ?? 'cycles') === eng
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  ? 'bg-accent text-white'
+                  : 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
               }`}
             >
               {eng === 'cycles' ? 'Cycles' : 'EEVEE'}
@@ -261,8 +262,8 @@ function ConfigSidepanel({
 
       {/* Samples */}
       <div>
-        <label className="text-sm text-gray-600 mb-2 block">
-          Samples: <span className="font-semibold text-gray-800">{params.samples ?? 256}</span>
+        <label className="text-sm text-content-secondary mb-2 block">
+          Samples: <span className="font-semibold text-content">{params.samples ?? 256}</span>
         </label>
         <input
           type="range"
@@ -271,9 +272,9 @@ function ConfigSidepanel({
           step={1}
           value={params.samples ?? 256}
           onChange={e => onChange({ ...params, samples: Number(e.target.value) })}
-          className="w-full accent-blue-600"
+          className="w-full accent-accent"
         />
-        <div className="flex justify-between text-xs text-gray-400 mt-1">
+        <div className="flex justify-between text-xs text-content-muted mt-1">
           <span>1</span>
           <span>4096</span>
         </div>
@@ -281,16 +282,16 @@ function ConfigSidepanel({
 
       {/* Resolution */}
       <div>
-        <label className="text-sm text-gray-600 mb-2 block">Auflösung</label>
+        <label className="text-sm text-content-secondary mb-2 block">Auflösung</label>
         <div className="flex gap-2">
-          {([[1024, 1024], [2048, 2048], [4096, 4096]] as [number, number][]).map(([w, h]) => (
+          {([[1024, 1024], [2048, 2048], [4096, 4096]] as [number, number][]).map(([w]) => (
             <button
               key={w}
-              onClick={() => onChange({ ...params, resolution: [w, h] })}
+              onClick={() => onChange({ ...params, resolution: [w, w] })}
               className={`px-2 py-1.5 rounded text-xs font-medium transition-colors ${
                 (params.resolution?.[0] ?? 2048) === w
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  ? 'bg-accent text-white'
+                  : 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
               }`}
             >
               {w}px
@@ -301,8 +302,8 @@ function ConfigSidepanel({
 
       {/* FPS (only relevant for animation nodes) */}
       <div>
-        <label className="text-sm text-gray-600 mb-2 block">
-          FPS: <span className="font-semibold text-gray-800">{params.fps ?? 24}</span>
+        <label className="text-sm text-content-secondary mb-2 block">
+          FPS: <span className="font-semibold text-content">{params.fps ?? 24}</span>
         </label>
         <div className="flex gap-2">
           {[12, 24, 30, 60].map(fps => (
@@ -311,8 +312,8 @@ function ConfigSidepanel({
               onClick={() => onChange({ ...params, fps })}
               className={`px-2 py-1.5 rounded text-xs font-medium transition-colors ${
                 (params.fps ?? 24) === fps
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                  ? 'bg-accent text-white'
+                  : 'bg-surface-hover text-content-secondary hover:bg-surface-muted'
               }`}
             >
               {fps}
@@ -323,8 +324,8 @@ function ConfigSidepanel({
 
       {/* Duration */}
       <div>
-        <label className="text-sm text-gray-600 mb-2 block">
-          Dauer (s): <span className="font-semibold text-gray-800">{params.duration_s ?? 5}</span>
+        <label className="text-sm text-content-secondary mb-2 block">
+          Dauer (s): <span className="font-semibold text-content">{params.duration_s ?? 5}</span>
         </label>
         <input
           type="range"
@@ -333,7 +334,7 @@ function ConfigSidepanel({
           step={1}
           value={params.duration_s ?? 5}
           onChange={e => onChange({ ...params, duration_s: Number(e.target.value) })}
-          className="w-full accent-blue-600"
+          className="w-full accent-accent"
         />
       </div>
     </div>
@@ -364,19 +365,19 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
 
   return (
     <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
-      <div className="bg-white rounded-xl shadow-xl w-full max-w-md p-6">
+      <div className="bg-surface rounded-xl shadow-xl w-full max-w-md p-6">
         <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold">Neuer Workflow</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+          <h2 className="text-lg font-semibold text-content">Neuer Workflow</h2>
+          <button onClick={onClose} className="text-content-muted hover:text-content">
             <X size={20} />
           </button>
         </div>
 
         <div className="space-y-4">
           <div>
-            <label className="block text-sm text-gray-600 mb-1">Name</label>
+            <label className="block text-sm text-content-secondary mb-1">Name</label>
             <input
-              className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full border border-border-default rounded-lg px-3 py-2 text-sm bg-surface text-content focus:outline-none focus:ring-2 focus:ring-accent"
               placeholder="z.B. Still Render Standard"
               value={name}
               onChange={e => setName(e.target.value)}
@@ -385,7 +386,7 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
           </div>
 
           <div>
-            <label className="block text-sm text-gray-600 mb-1">Typ</label>
+            <label className="block text-sm text-content-secondary mb-1">Typ</label>
             <div className="grid grid-cols-2 gap-2">
               {([
                 { value: 'still', label: 'Still', desc: 'Einzelbild PNG' },
@@ -398,12 +399,12 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
                   onClick={() => setType(opt.value)}
                   className={`p-3 rounded-lg border-2 text-left transition-colors ${
                     type === opt.value
-                      ? 'border-blue-500 bg-blue-50'
-                      : 'border-gray-200 hover:border-gray-300'
+                      ? 'border-accent bg-accent-light'
+                      : 'border-border-default hover:border-border-light'
                   }`}
                 >
-                  <p className="text-sm font-medium">{opt.label}</p>
-                  <p className="text-xs text-gray-500 mt-0.5">{opt.desc}</p>
+                  <p className="text-sm font-medium text-content">{opt.label}</p>
+                  <p className="text-xs text-content-muted mt-0.5">{opt.desc}</p>
                 </button>
               ))}
             </div>
@@ -413,14 +414,14 @@ function NewWorkflowModal({ onClose, onCreate, isLoading }: NewWorkflowModalProp
         <div className="flex justify-end gap-2 mt-6">
           <button
             onClick={onClose}
-            className="px-4 py-2 text-sm rounded-lg border border-gray-300 hover:bg-gray-50"
+            className="px-4 py-2 text-sm rounded-lg border border-border-default text-content-secondary hover:bg-surface-hover"
           >
             Abbrechen
           </button>
           <button
             disabled={!name.trim() || isLoading}
             onClick={() => onCreate(name.trim(), type)}
-            className="px-4 py-2 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="px-4 py-2 text-sm rounded-lg bg-accent text-white hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
           >
             {isLoading ? 'Erstelle…' : 'Erstellen'}
           </button>
@@ -520,11 +521,14 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
 
   const selectedNode = nodes.find(n => n.id === selectedNodeId)
 
+  const { mode } = useThemeStore()
+  const isDark = resolveTheme(mode) === 'dark'
+
   return (
     <div className="flex flex-col flex-1 min-h-0">
       {/* Canvas Toolbar */}
-      <div className="flex items-center gap-2 px-4 py-2 border-b border-gray-200 bg-white">
-        <span className="text-sm font-medium text-gray-600 mr-2">Nodes:</span>
+      <div className="flex items-center gap-2 px-4 py-2 border-b border-border-default bg-surface">
+        <span className="text-sm font-medium text-content-secondary mr-2">Nodes:</span>
         {NODE_PALETTE.map(item => (
           <div
             key={item.type}
@@ -533,7 +537,7 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
               e.dataTransfer.setData('application/reactflow', item.type)
               e.dataTransfer.effectAllowed = 'move'
             }}
-            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded border border-gray-200 bg-gray-50 text-xs text-gray-700 cursor-grab hover:bg-gray-100 select-none"
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded border border-border-default bg-surface-hover text-xs text-content-secondary cursor-grab hover:bg-surface-muted select-none"
           >
             {item.icon}
             {item.label}
@@ -543,7 +547,7 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
           <button
             onClick={handleSave}
             disabled={isSaving}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-lg bg-accent text-white hover:bg-accent-hover disabled:opacity-50"
           >
             <Save size={14} />
             {isSaving ? 'Speichere…' : 'Speichern'}
@@ -564,10 +568,11 @@ function FlowCanvas({ workflow, onSave, isSaving }: FlowCanvasProps) {
             onPaneClick={onPaneClick}
             onInit={setReactFlowInstance}
             nodeTypes={nodeTypes}
+            colorMode={isDark ? 'dark' : 'light'}
             fitView
             fitViewOptions={{ padding: 0.2 }}
           >
-            <Background gap={16} color="#e5e7eb" />
+            <Background gap={16} />
             <Controls />
             <MiniMap nodeStrokeWidth={3} zoomable pannable />
           </ReactFlow>
@@ -649,24 +654,24 @@ export default function WorkflowEditor() {
   }
 
   const typeBadgeColor: Record<WorkflowConfig['type'], string> = {
-    still: 'bg-orange-100 text-orange-700',
-    turntable: 'bg-purple-100 text-purple-700',
-    multi_angle: 'bg-blue-100 text-blue-700',
-    custom: 'bg-gray-100 text-gray-600',
+    still: 'bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300',
+    turntable: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
+    multi_angle: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+    custom: 'bg-surface-hover text-content-muted',
   }
 
   return (
     <div className="flex h-full">
       {/* Workflow List Sidebar */}
-      <aside className="w-56 flex-shrink-0 border-r border-gray-200 bg-white flex flex-col">
-        <div className="p-3 border-b border-gray-200 flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm font-semibold text-gray-700">
+      <aside className="w-56 flex-shrink-0 border-r border-border-default bg-surface flex flex-col">
+        <div className="p-3 border-b border-border-default flex items-center justify-between">
+          <div className="flex items-center gap-2 text-sm font-semibold text-content-secondary">
             <GitBranch size={16} />
             Workflows
           </div>
           <button
             onClick={() => setShowNewModal(true)}
-            className="p-1 rounded hover:bg-gray-100 text-gray-500 hover:text-gray-700"
+            className="p-1 rounded hover:bg-surface-hover text-content-muted hover:text-content"
             title="Neuer Workflow"
           >
             <Plus size={16} />
@@ -675,15 +680,15 @@ export default function WorkflowEditor() {
 
         <div className="flex-1 overflow-y-auto p-2 space-y-1">
           {isLoading && (
-            <p className="text-xs text-gray-400 px-2 py-4 text-center">Lade…</p>
+            <p className="text-xs text-content-muted px-2 py-4 text-center">Lade…</p>
           )}
           {!isLoading && workflows.length === 0 && (
-            <p className="text-xs text-gray-400 px-2 py-4 text-center">
+            <p className="text-xs text-content-muted px-2 py-4 text-center">
               Noch keine Workflows.
               <br />
               <button
                 onClick={() => setShowNewModal(true)}
-                className="mt-1 text-blue-500 hover:underline"
+                className="mt-1 text-accent hover:underline"
               >
                 + Neu erstellen
               </button>
@@ -695,12 +700,12 @@ export default function WorkflowEditor() {
               onClick={() => setSelectedId(wf.id)}
               className={`w-full text-left px-3 py-2.5 rounded-lg transition-colors group ${
                 selectedId === wf.id
-                  ? 'bg-blue-50 border border-blue-200'
-                  : 'hover:bg-gray-50 border border-transparent'
+                  ? 'bg-accent-light border border-accent/30'
+                  : 'hover:bg-surface-hover border border-transparent'
               }`}
             >
               <div className="flex items-start justify-between gap-1">
-                <p className="text-sm font-medium text-gray-800 truncate">{wf.name}</p>
+                <p className="text-sm font-medium text-content truncate">{wf.name}</p>
                 <button
                   onClick={e => {
                     e.stopPropagation()
@@ -708,7 +713,7 @@ export default function WorkflowEditor() {
                       deleteMutation.mutate(wf.id)
                     }
                   }}
-                  className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-red-100 hover:text-red-600 text-gray-400 flex-shrink-0"
+                  className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-red-100 hover:text-red-600 text-content-muted flex-shrink-0"
                   title="Löschen"
                 >
                   <Trash2 size={12} />
@@ -722,7 +727,7 @@ export default function WorkflowEditor() {
                 {typeLabel[wf.config.type]}
               </span>
               {!wf.is_active && (
-                <span className="ml-1 text-xs text-gray-400">(inaktiv)</span>
+                <span className="ml-1 text-xs text-content-muted">(inaktiv)</span>
               )}
             </button>
           ))}
@@ -732,16 +737,16 @@ export default function WorkflowEditor() {
       {/* Main Canvas Area */}
       <div className="flex-1 flex flex-col min-w-0">
         {/* Header */}
-        <div className="px-6 py-4 border-b border-gray-200 bg-white flex items-center justify-between">
+        <div className="px-6 py-4 border-b border-border-default bg-surface flex items-center justify-between">
           <div>
-            <h1 className="text-xl font-semibold text-gray-900">Workflow-Editor</h1>
+            <h1 className="text-xl font-semibold text-content">Workflow-Editor</h1>
             {selectedWorkflow && (
-              <p className="text-sm text-gray-500 mt-0.5">{selectedWorkflow.name}</p>
+              <p className="text-sm text-content-muted mt-0.5">{selectedWorkflow.name}</p>
             )}
           </div>
           <button
             onClick={() => setShowNewModal(true)}
-            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors"
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover transition-colors"
           >
             <Plus size={16} />
             Neuer Workflow
@@ -759,14 +764,14 @@ export default function WorkflowEditor() {
         ) : (
           <div className="flex-1 flex items-center justify-center text-center">
             <div>
-              <GitBranch size={48} className="mx-auto text-gray-300 mb-4" />
-              <p className="text-gray-500 font-medium">Kein Workflow ausgewählt</p>
-              <p className="text-sm text-gray-400 mt-1">
+              <GitBranch size={48} className="mx-auto text-content-muted mb-4" />
+              <p className="text-content-secondary font-medium">Kein Workflow ausgewählt</p>
+              <p className="text-sm text-content-muted mt-1">
                 Wähle einen Workflow aus der Liste oder erstelle einen neuen.
               </p>
               <button
                 onClick={() => setShowNewModal(true)}
-                className="mt-4 flex items-center gap-2 px-4 py-2 mx-auto rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700"
+                className="mt-4 flex items-center gap-2 px-4 py-2 mx-auto rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover"
               >
                 <Plus size={16} />
                 Workflow erstellen