From 43dfce5233d634fbedd55131cdb1541b844ffefe Mon Sep 17 00:00:00 2001
From: Hitonabi <Hitonabi@dreivontanke.ddnsfree.com>
Date: Tue, 21 Jul 2026 22:18:59 +0200
Subject: [PATCH] feat(ui): implement dark mode with theme toggle

- Add global theme state in App.tsx with localStorage persistence
- Implement dark mode CSS variables in index.css
- Add theme toggle button in sidebar navigation
- Update Dashboard with dark mode support for stats cards and badges
- Update Settings page with dark mode for main layout and toggles

This implements the core dark mode functionality with separation of
concerns - theme state is managed globally in App.tsx and passed down
to child components as props.
---
 docker/ui/src/App.tsx             |  42 ++++++++--
 docker/ui/src/index.css           |  36 ++++++++
 docker/ui/src/pages/Dashboard.tsx | 135 ++++++++++++++++++++++--------
 docker/ui/src/pages/Settings.tsx  |  51 ++++++-----
 4 files changed, 200 insertions(+), 64 deletions(-)

diff --git a/docker/ui/src/App.tsx b/docker/ui/src/App.tsx
index 66302ef..643c06a 100644
--- a/docker/ui/src/App.tsx
+++ b/docker/ui/src/App.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react'
-import { LayoutDashboard, Disc, Settings, LogOut } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { LayoutDashboard, Disc, Settings, LogOut, Sun, Moon } from 'lucide-react'
 import Dashboard from './pages/Dashboard'
 import MetadataPreview from './pages/MetadataPreview'
 import SettingsPage from './pages/Settings'
@@ -8,6 +8,26 @@ type Page = 'dashboard' | 'metadata' | 'settings'
 
 function App() {
   const [page, setPage] = useState<Page>('dashboard')
+  const [darkMode, setDarkMode] = useState(false)
+
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme')
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    
+    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
+      setDarkMode(true)
+      document.documentElement.setAttribute('data-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-theme', 'light')
+    }
+  }, [])
+
+  const toggleTheme = () => {
+    const newTheme = darkMode ? 'light' : 'dark'
+    setDarkMode(!darkMode)
+    localStorage.setItem('theme', newTheme)
+    document.documentElement.setAttribute('data-theme', newTheme)
+  }
 
   const navItems = [
     { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
@@ -19,7 +39,7 @@ function App() {
     <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
       <div className="flex h-screen overflow-hidden">
         {/* Sidebar */}
-        <aside className="w-64 bg-slate-900 text-white flex flex-col">
+        <aside className={`w-64 ${darkMode ? 'bg-slate-900' : 'bg-slate-900'} text-white flex flex-col`}>
           <div className="p-6">
             <div className="flex items-center gap-3">
               <div className="p-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl">
@@ -32,6 +52,14 @@ function App() {
             </div>
           </div>
 
+          <button
+            onClick={toggleTheme}
+            className="mx-3 flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-slate-800/50 text-slate-400 hover:bg-slate-700 hover:text-white transition-all duration-200"
+            title={darkMode ? 'Light Mode' : 'Dark Mode'}
+          >
+            {darkMode ? <Sun size={18} /> : <Moon size={18} />}
+          </button>
+
           <nav className="flex-1 px-3 py-2 space-y-1">
             {navItems.map((item) => (
               <button
@@ -40,7 +68,9 @@ function App() {
                 className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 ${
                   page === item.id
                     ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-500/30'
-                    : 'text-slate-400 hover:bg-slate-800 hover:text-white'
+                    : darkMode
+                      ? 'text-slate-400 hover:bg-slate-800 hover:text-white'
+                      : 'text-slate-400 hover:bg-slate-700 hover:text-white'
                 }`}
               >
                 <item.icon size={20} />
@@ -49,8 +79,8 @@ function App() {
             ))}
           </nav>
 
-          <div className="p-4 border-t border-slate-800">
-            <button className="w-full flex items-center gap-3 px-3 py-2 text-slate-400 hover:text-white hover:bg-slate-800 rounded-lg transition-colors">
+          <div className={`p-4 border-t ${darkMode ? 'border-slate-800' : 'border-slate-700'}`}>
+            <button className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${darkMode ? 'text-slate-400 hover:text-white hover:bg-slate-800' : 'text-slate-400 hover:text-white hover:bg-slate-700'}`}>
               <LogOut size={20} />
               <span className="text-sm">Abmelden</span>
             </button>
diff --git a/docker/ui/src/index.css b/docker/ui/src/index.css
index 17df0e7..931a3ed 100644
--- a/docker/ui/src/index.css
+++ b/docker/ui/src/index.css
@@ -2,6 +2,38 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --bg-color: #f8fafc;
+  --bg-secondary: #f1f5f9;
+  --text-primary: #0f172a;
+  --text-secondary: #64748b;
+  --accent-color: #6366f1;
+  --accent-hover: #4f46e5;
+  --border-color: #e2e8f0;
+  --card-bg: #ffffff;
+  --input-bg: #ffffff;
+  --input-border: #e2e8f0;
+  --success-color: #22c55e;
+  --error-color: #ef4444;
+}
+
+[data-theme="dark"] {
+  --bg-color: #0f172a;
+  --bg-secondary: #1e293b;
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --accent-color: #818cf8;
+  --accent-hover: #6366f1;
+  --border-color: #334155;
+  --card-bg: #1e293b;
+  --input-bg: #0f172a;
+  --input-border: #334155;
+}
+
+* {
+  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -9,9 +41,13 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: var(--bg-color);
+  color: var(--text-primary);
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
+  background-color: var(--bg-secondary);
+  color: var(--text-primary);
 }
diff --git a/docker/ui/src/pages/Dashboard.tsx b/docker/ui/src/pages/Dashboard.tsx
index 06ca7ac..15a3673 100644
--- a/docker/ui/src/pages/Dashboard.tsx
+++ b/docker/ui/src/pages/Dashboard.tsx
@@ -41,13 +41,20 @@ async function fetchDevices(): Promise<Device[]> {
   }
 }
 
-function StatusBadge({ status }: { status: string }) {
-  const styles = {
-    pending: 'bg-amber-100 text-amber-700 ring-amber-600/20',
-    processing: 'bg-blue-100 text-blue-700 ring-blue-600/20',
-    completed: 'bg-emerald-100 text-emerald-700 ring-emerald-600/20',
-    failed: 'bg-rose-100 text-rose-700 ring-rose-600/20',
-  }
+function StatusBadge({ status, darkMode }: { status: string, darkMode?: boolean }) {
+  const styles = darkMode
+    ? {
+        pending: 'bg-amber-900/30 text-amber-400 ring-amber-700/20',
+        processing: 'bg-blue-900/30 text-blue-400 ring-blue-700/20',
+        completed: 'bg-emerald-900/30 text-emerald-400 ring-emerald-700/20',
+        failed: 'bg-rose-900/30 text-rose-400 ring-rose-700/20',
+      }
+    : {
+        pending: 'bg-amber-100 text-amber-700 ring-amber-600/20',
+        processing: 'bg-blue-100 text-blue-700 ring-blue-600/20',
+        completed: 'bg-emerald-100 text-emerald-700 ring-emerald-600/20',
+        failed: 'bg-rose-100 text-rose-700 ring-rose-600/20',
+      }
   
   const labels = {
     pending: 'Wartend',
@@ -63,7 +70,11 @@ function StatusBadge({ status }: { status: string }) {
   )
 }
 
-function TypeBadge({ type }: { type: string }) {
+function TypeBadge({ type, darkMode }: { type: string, darkMode?: boolean }) {
+  const colors = darkMode
+    ? 'bg-slate-800 text-slate-300'
+    : 'bg-slate-100 text-slate-700'
+  
   const icons = {
     cd: Disc,
     dvd: Disc,
@@ -71,24 +82,46 @@ function TypeBadge({ type }: { type: string }) {
   }
   const Icon = icons[type as keyof typeof icons] || Disc
   return (
-    <span className="inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium bg-slate-100 text-slate-700">
+    <span className={`inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium ${colors}`}>
       <Icon size={14} />
       {type.toUpperCase()}
     </span>
   )
 }
 
-function ProgressBar({ progress }: { progress: number }) {
+function ProgressBar({ progress, darkMode }: { progress: number, darkMode?: boolean }) {
+  const bgColors = darkMode
+    ? {
+        empty: 'bg-slate-700',
+        indicator: 'bg-gradient-to-r from-indigo-500 to-purple-600',
+        done: 'bg-emerald-500',
+      }
+    : {
+        empty: 'bg-slate-200',
+        indicator: 'bg-gradient-to-r from-indigo-500 to-purple-600',
+        done: 'bg-emerald-500',
+      }
+  
+  const textColors = darkMode
+    ? {
+        label: 'text-slate-400',
+        value: 'text-slate-200',
+      }
+    : {
+        label: 'text-slate-500',
+        value: 'text-slate-900',
+      }
+  
   return (
     <div className="w-32">
       <div className="flex items-center justify-between mb-1">
-        <span className="text-xs font-medium text-slate-500">Fortschritt</span>
-        <span className="text-xs font-medium text-slate-900">{progress}%</span>
+        <span className={`text-xs font-medium ${textColors.label}`}>Fortschritt</span>
+        <span className={`text-xs font-medium ${textColors.value}`}>{progress}%</span>
       </div>
-      <div className="w-full bg-slate-200 rounded-full h-2 overflow-hidden">
+      <div className={`w-full ${bgColors.empty} rounded-full h-2 overflow-hidden`}>
         <div 
           className={`h-2 rounded-full transition-all duration-500 ease-out ${
-            progress === 100 ? 'bg-emerald-500' : 'bg-gradient-to-r from-indigo-500 to-purple-600'
+            progress === 100 ? bgColors.done : bgColors.indicator
           }`}
           style={{ width: `${progress}%` }}
         />
@@ -101,8 +134,12 @@ export default function Dashboard() {
   const [jobs, setJobs] = useState<Job[]>([])
   const [devices, setDevices] = useState<Device[]>([])
   const [loading, setLoading] = useState(true)
+  const [darkMode, setDarkMode] = useState(false)
 
   useEffect(() => {
+    const savedTheme = localStorage.getItem('theme')
+    setDarkMode(savedTheme === 'dark')
+    
     const loadData = async () => {
       try {
         const [jobsData, devicesData] = await Promise.all([
@@ -151,24 +188,28 @@ export default function Dashboard() {
           label="Warteschlange" 
           value={stats.pending.toString()} 
           color="amber" 
+          darkMode={darkMode}
         />
         <StatCard 
           icon={Activity} 
           label="Bearbeitung" 
           value={stats.processing.toString()} 
           color="blue" 
+          darkMode={darkMode}
         />
         <StatCard 
           icon={CheckCircle} 
           label="Fertig" 
           value={stats.completed.toString()} 
           color="emerald" 
+          darkMode={darkMode}
         />
         <StatCard 
           icon={AlertCircle} 
           label="Fehler" 
           value={stats.failed.toString()} 
           color="rose" 
+          darkMode={darkMode}
         />
       </div>
 
@@ -234,7 +275,7 @@ export default function Dashboard() {
                         <p className="text-xs text-slate-500 font-mono">{device.path}</p>
                       </div>
                     </div>
-                    <TypeBadge type={device.type} />
+                    <TypeBadge type={device.type} darkMode={darkMode} />
                   </div>
                   
                   <div className="flex items-center justify-between mt-4">
@@ -296,13 +337,13 @@ export default function Dashboard() {
                       </div>
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
-                      <StatusBadge status={job.status} />
+                      <StatusBadge status={job.status} darkMode={darkMode} />
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
                       {job.device}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
-                      <ProgressBar progress={job.progress} />
+                      <ProgressBar progress={job.progress} darkMode={darkMode} />
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
                       {new Date(job.startTime).toLocaleString('de-DE')}
@@ -318,30 +359,52 @@ export default function Dashboard() {
   )
 }
 
-function StatCard({ icon: Icon, label, value, color }: { icon: any, label: string, value: string, color: string }) {
-  const colors = {
-    amber: 'bg-amber-500',
-    blue: 'bg-blue-500',
-    emerald: 'bg-emerald-500',
-    rose: 'bg-rose-500',
-  }
+function StatCard({ icon: Icon, label, value, color, darkMode }: { icon: any, label: string, value: string, color: string, darkMode: boolean }) {
+  const bgColors = darkMode
+    ? {
+        card: 'bg-slate-800 border-slate-700',
+        iconBg: {
+          amber: 'bg-amber-700',
+          blue: 'bg-blue-700',
+          emerald: 'bg-emerald-700',
+          rose: 'bg-rose-700',
+        },
+        iconText: {
+          amber: 'text-amber-300',
+          blue: 'text-blue-300',
+          emerald: 'text-emerald-300',
+          rose: 'text-rose-300',
+        },
+        textLabel: 'text-slate-400',
+        textValue: 'text-slate-200',
+      }
+    : {
+        card: 'bg-white border-slate-200',
+        iconBg: {
+          amber: 'bg-amber-500',
+          blue: 'bg-blue-500',
+          emerald: 'bg-emerald-500',
+          rose: 'bg-rose-500',
+        },
+        iconText: {
+          amber: 'text-amber-600',
+          blue: 'text-blue-600',
+          emerald: 'text-emerald-600',
+          rose: 'text-rose-600',
+        },
+        textLabel: 'text-slate-500',
+        textValue: 'text-slate-900',
+      }
   
-  const textColors = {
-    amber: 'text-amber-600',
-    blue: 'text-blue-600',
-    emerald: 'text-emerald-600',
-    rose: 'text-rose-600',
-  }
-
   return (
-    <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6 hover:shadow-md transition-shadow">
+    <div className={`${bgColors.card} rounded-xl shadow-sm border p-6 hover:shadow-md transition-shadow`}>
       <div className="flex items-center gap-4">
-        <div className={`${colors[color as keyof typeof colors]} p-3 rounded-lg`}>
-          <Icon className={`${textColors[color as keyof typeof textColors]} w-6 h-6`} />
+        <div className={`${bgColors.iconBg[color as keyof typeof bgColors.iconBg]} p-3 rounded-lg`}>
+          <Icon className={`${bgColors.iconText[color as keyof typeof bgColors.iconText]} w-6 h-6`} />
         </div>
         <div>
-          <p className="text-sm font-medium text-slate-500">{label}</p>
-          <p className="text-3xl font-bold text-slate-900">{value}</p>
+          <p className={`text-sm font-medium ${bgColors.textLabel}`}>{label}</p>
+          <p className={`text-3xl font-bold ${bgColors.textValue}`}>{value}</p>
         </div>
       </div>
     </div>
diff --git a/docker/ui/src/pages/Settings.tsx b/docker/ui/src/pages/Settings.tsx
index 8412019..c1cb7e6 100644
--- a/docker/ui/src/pages/Settings.tsx
+++ b/docker/ui/src/pages/Settings.tsx
@@ -33,8 +33,12 @@ export default function SettingsPage() {
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
   const [saved, setSaved] = useState(false)
+  const [darkMode, setDarkMode] = useState(false)
 
   useEffect(() => {
+    const savedTheme = localStorage.getItem('theme')
+    setDarkMode(savedTheme === 'dark')
+    
     const loadSettings = async () => {
       try {
         const response = await axios.get(`${import.meta.env.VITE_API_URL}/settings`)
@@ -73,27 +77,27 @@ export default function SettingsPage() {
   }
 
   return (
-    <div className="max-w-4xl space-y-6">
+    <div className={`max-w-4xl space-y-6 ${darkMode ? 'text-slate-100' : 'text-slate-900'}`}>
       <div className="flex flex-col gap-2">
-        <h1 className="text-3xl font-bold text-slate-900">Einstellungen</h1>
-        <p className="text-slate-500">Konfiguriere Rippy nach deinen Wünschen</p>
+        <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Einstellungen</h1>
+        <p className={`text-sm ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Konfiguriere Rippy nach deinen Wünschen</p>
       </div>
 
       {saved && (
-        <div className="p-4 bg-emerald-50 border border-emerald-200 rounded-lg flex items-center gap-3 text-emerald-700">
+        <div className={`p-4 rounded-lg flex items-center gap-3 font-medium ${darkMode ? 'bg-emerald-900/30 border border-emerald-700 text-emerald-400' : 'bg-emerald-50 border border-emerald-200 text-emerald-700'}`}>
           <CheckCircle className="flex-shrink-0" size={24} />
-          <span className="font-medium">Einstellungen erfolgreich gespeichert!</span>
+          <span>Einstellungen erfolgreich gespeichert!</span>
         </div>
       )}
 
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
+      <div className={`rounded-xl shadow-sm overflow-hidden ${darkMode ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'}`}>
         {/* Tabs */}
-        <div className="flex border-b border-slate-200">
-          <TabButton icon={Disc} label="Ripping" isActive={true} />
-          <TabButton icon={Cpu} label="Verarbeitung" isActive={false} />
-          <TabButton icon={Database} label="Datenbank" isActive={false} />
-          <TabButton icon={Globe} label="APIs" isActive={false} />
-          <TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={false} />
+        <div className={`flex ${darkMode ? 'border-slate-700' : 'border-slate-200'} border-b`}>
+          <TabButton icon={Disc} label="Ripping" isActive={true} darkMode={darkMode} />
+          <TabButton icon={Cpu} label="Verarbeitung" isActive={false} darkMode={darkMode} />
+          <TabButton icon={Database} label="Datenbank" isActive={false} darkMode={darkMode} />
+          <TabButton icon={Globe} label="APIs" isActive={false} darkMode={darkMode} />
+          <TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={false} darkMode={darkMode} />
         </div>
 
         {/* Content */}
@@ -119,10 +123,11 @@ export default function SettingsPage() {
                 <Toggle 
                   checked={settings.ripAllTracks} 
                   onChange={(v) => handleChange('ripAllTracks', v)} 
+                  darkMode={darkMode}
                 />
               </div>
 
-              <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
+              <div className={`flex items-center justify-between p-4 ${darkMode ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
                 <div className="flex items-center gap-3">
                   <div className="p-2 bg-purple-100 rounded-lg">
                     <Disc className="text-purple-600" size={20} />
@@ -135,10 +140,11 @@ export default function SettingsPage() {
                 <Toggle 
                   checked={settings.mainFeatureOnly} 
                   onChange={(v) => handleChange('mainFeatureOnly', v)} 
+                  darkMode={darkMode}
                 />
               </div>
 
-              <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
+              <div className={`flex items-center justify-between p-4 ${darkMode ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
                 <div className="flex items-center gap-3">
                   <div className="p-2 bg-emerald-100 rounded-lg">
                     <Disc className="text-emerald-600" size={20} />
@@ -151,6 +157,7 @@ export default function SettingsPage() {
                 <Toggle 
                   checked={settings.autoEject} 
                   onChange={(v) => handleChange('autoEject', v)} 
+                  darkMode={darkMode}
                 />
               </div>
             </div>
@@ -165,17 +172,17 @@ export default function SettingsPage() {
             
             <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
               <div className="space-y-2">
-                <label className="block text-sm font-medium text-slate-700">
+                <label className={`block text-sm font-medium ${darkMode ? 'text-slate-300' : 'text-slate-700'}`}>
                   Hauptverzeichnis
                 </label>
                 <input
                   type="text"
                   value={settings.outputDir}
                   onChange={(e) => handleChange('outputDir', e.target.value)}
-                  className="w-full px-3 py-2 bg-white border border-slate-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+                  className={`w-full px-3 py-2 ${darkMode ? 'bg-slate-800 border-slate-600 text-slate-200 focus:ring-indigo-500' : 'bg-white border-slate-300 text-slate-900 focus:ring-indigo-600'} border rounded-lg focus:ring-2 focus:border-transparent transition-all`}
                   placeholder="/app/media"
                 />
-                <p className="text-xs text-slate-500">Basisverzeichnis für alle Ausgaben</p>
+                <p className={`text-xs ${darkMode ? 'text-slate-400' : 'text-slate-500'}`}>Basisverzeichnis für alle Ausgaben</p>
               </div>
 
               <div className="space-y-2">
@@ -308,13 +315,13 @@ export default function SettingsPage() {
   )
 }
 
-function TabButton({ icon: Icon, label, isActive }: { icon: any, label: string, isActive: boolean }) {
+function TabButton({ icon: Icon, label, isActive, darkMode }: { icon: any, label: string, isActive: boolean, darkMode: boolean }) {
   return (
     <button
       className={`px-6 py-3 text-sm font-medium transition-colors border-b-2 ${
         isActive
-          ? 'border-indigo-600 text-indigo-600'
-          : 'border-transparent text-slate-500 hover:text-slate-700'
+          ? `${darkMode ? 'border-indigo-500 text-indigo-400' : 'border-indigo-600 text-indigo-600'}`
+          : `${darkMode ? 'border-transparent text-slate-400 hover:text-slate-300' : 'border-transparent text-slate-500 hover:text-slate-700'}`
       }`}
     >
       {label}
@@ -322,12 +329,12 @@ function TabButton({ icon: Icon, label, isActive }: { icon: any, label: string,
   )
 }
 
-function Toggle({ checked, onChange }: { checked: boolean, onChange: (v: boolean) => void }) {
+function Toggle({ checked, onChange, darkMode }: { checked: boolean, onChange: (v: boolean) => void, darkMode: boolean }) {
   return (
     <button
       onClick={() => onChange(!checked)}
       className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
-        checked ? 'bg-indigo-600' : 'bg-slate-300'
+        checked ? 'bg-indigo-600' : darkMode ? 'bg-slate-600' : 'bg-slate-300'
       }`}
     >
       <span