From d2fb2813420768167acf049ddc3306d8e4a00a1c Mon Sep 17 00:00:00 2001
From: Hitonabi <Hitonabi@dreivontanke.ddnsfree.com>
Date: Wed, 22 Jul 2026 17:00:49 +0200
Subject: [PATCH] fix: complete dark mode implementation with all UI components

---
 docker/ui/src/App.tsx                   |  14 ++-
 docker/ui/src/pages/Dashboard.tsx       | 136 ++++++++++++------------
 docker/ui/src/pages/MetadataPreview.tsx |  90 ++++++++--------
 docker/ui/src/pages/Settings.tsx        | 112 +++++++++----------
 4 files changed, 175 insertions(+), 177 deletions(-)

diff --git a/docker/ui/src/App.tsx b/docker/ui/src/App.tsx
index 3d70f5d..384ec3a 100644
--- a/docker/ui/src/App.tsx
+++ b/docker/ui/src/App.tsx
@@ -18,10 +18,10 @@ function App() {
   ]
 
   return (
-    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans">
+    <div className="min-h-screen bg-slate-50 text-slate-900 font-sans transition-colors duration-300">
       <div className="flex h-screen overflow-hidden">
         {/* Sidebar */}
-        <aside className={`w-64 ${theme === 'dark' ? 'bg-slate-900' : 'bg-slate-900'} text-white flex flex-col`}>
+        <aside className={`w-64 flex flex-col ${theme === 'dark' ? 'bg-slate-900 text-slate-100' : 'bg-slate-900 text-slate-100'}`}>
           <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">
@@ -50,9 +50,7 @@ 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'
-                    : theme === 'dark'
-                      ? 'text-slate-400 hover:bg-slate-800 hover:text-white'
-                      : 'text-slate-400 hover:bg-slate-700 hover:text-white'
+                    : 'text-slate-400 hover:bg-slate-800 hover:text-white'
                 }`}
               >
                 <item.icon size={20} />
@@ -61,8 +59,8 @@ function App() {
             ))}
           </nav>
 
-          <div className={`p-4 border-t ${theme === 'dark' ? 'border-slate-800' : 'border-slate-700'}`}>
-            <button className={`w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors ${theme === 'dark' ? 'text-slate-400 hover:text-white hover:bg-slate-800' : 'text-slate-400 hover:text-white hover:bg-slate-700'}`}>
+          <div className="p-4 border-t border-slate-800">
+            <button className="w-full flex items-center gap-3 px-3 py-2 rounded-lg transition-colors text-slate-400 hover:text-white hover:bg-slate-800">
               <LogOut size={20} />
               <span className="text-sm">Abmelden</span>
             </button>
@@ -70,7 +68,7 @@ function App() {
         </aside>
 
         {/* Main Content */}
-        <main className="flex-1 overflow-auto bg-slate-50/50">
+        <main className="flex-1 overflow-auto bg-slate-50/50 dark:bg-slate-50/50">
           <div className="max-w-7xl mx-auto p-6">
             {page === 'dashboard' && <Dashboard />}
             {page === 'metadata' && <MetadataPreview />}
diff --git a/docker/ui/src/pages/Dashboard.tsx b/docker/ui/src/pages/Dashboard.tsx
index 33a4c23..3c73a0a 100644
--- a/docker/ui/src/pages/Dashboard.tsx
+++ b/docker/ui/src/pages/Dashboard.tsx
@@ -174,15 +174,15 @@ export default function Dashboard() {
   }
 
   return (
-    <div className="space-y-8">
+    <div className="space-y-8 transition-colors duration-300">
       {/* Header */}
-      <div className="flex flex-col gap-2">
-        <h1 className="text-3xl font-bold text-slate-900">Dashboard</h1>
-        <p className="text-slate-500">Übersicht über alle Ripping-Jobs und Geräte</p>
+      <div className="flex flex-col gap-2 transition-colors duration-300">
+        <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Dashboard</h1>
+        <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Übersicht über alle Ripping-Jobs und Geräte</p>
       </div>
 
       {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 transition-colors duration-300">
         <StatCard 
           icon={Clock} 
           label="Warteschlange" 
@@ -214,81 +214,81 @@ export default function Dashboard() {
       </div>
 
       {/* Quick Actions */}
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
-        <h2 className="text-lg font-semibold text-slate-900 mb-4">Schnellaktionen</h2>
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-indigo-500 hover:bg-indigo-50 transition-all group">
-            <div className="p-3 bg-indigo-100 rounded-full group-hover:bg-indigo-200 transition-colors">
-              <Disc className="text-indigo-600" size={24} />
+      <div className={`rounded-xl shadow-sm border p-6 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
+        <h2 className={`text-lg font-semibold mb-4 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Schnellaktionen</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 transition-colors duration-300">
+          <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border transition-all group hover:border-indigo-500 transition-colors duration-300">
+            <div className={`p-3 rounded-full transition-colors ${theme === 'dark' ? 'bg-indigo-900/30 text-indigo-400' : 'bg-indigo-100 text-indigo-600'} group-hover:bg-indigo-200`}>
+              <Disc size={24} />
             </div>
-            <span className="text-sm font-medium text-slate-700">Neuer Job</span>
+            <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Neuer Job</span>
           </button>
-          <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50 transition-all group">
-            <div className="p-3 bg-emerald-100 rounded-full group-hover:bg-emerald-200 transition-colors">
-              <Play className="text-emerald-600" size={24} />
+          <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border transition-all group hover:border-emerald-500 transition-colors duration-300">
+            <div className={`p-3 rounded-full transition-colors ${theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-600'} group-hover:bg-emerald-200`}>
+              <Play size={24} />
             </div>
-            <span className="text-sm font-medium text-slate-700">Alle starten</span>
+            <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Alle starten</span>
           </button>
-          <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-amber-500 hover:bg-amber-50 transition-all group">
-            <div className="p-3 bg-amber-100 rounded-full group-hover:bg-amber-200 transition-colors">
-              <Pause className="text-amber-600" size={24} />
+          <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border transition-all group hover:border-amber-500 transition-colors duration-300">
+            <div className={`p-3 rounded-full transition-colors ${theme === 'dark' ? 'bg-amber-900/30 text-amber-400' : 'bg-amber-100 text-amber-600'} group-hover:bg-amber-200`}>
+              <Pause size={24} />
             </div>
-            <span className="text-sm font-medium text-slate-700">Pausieren</span>
+            <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Pausieren</span>
           </button>
-          <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border border-slate-200 hover:border-rose-500 hover:bg-rose-50 transition-all group">
-            <div className="p-3 bg-rose-100 rounded-full group-hover:bg-rose-200 transition-colors">
-              <SkipForward className="text-rose-600" size={24} />
+          <button className="flex flex-col items-center justify-center gap-3 p-4 rounded-lg border transition-all group hover:border-rose-500 transition-colors duration-300">
+            <div className={`p-3 rounded-full transition-colors ${theme === 'dark' ? 'bg-rose-900/30 text-rose-400' : 'bg-rose-100 text-rose-600'} group-hover:bg-rose-200`}>
+              <SkipForward size={24} />
             </div>
-            <span className="text-sm font-medium text-slate-700">Überspringen</span>
+            <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Überspringen</span>
           </button>
         </div>
       </div>
 
       {/* Devices */}
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-        <div className="px-6 py-4 border-b border-slate-200">
-          <h2 className="text-lg font-semibold text-slate-900">Geräte</h2>
+      <div className={`rounded-xl shadow-sm border overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
+        <div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'}`}>
+          <h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Geräte</h2>
         </div>
-        <div className="p-6">
+        <div className="p-6 transition-colors duration-300">
           {devices.length === 0 ? (
-            <div className="text-center py-12">
-              <div className="mx-auto w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mb-4">
-                <HardDrive className="text-slate-400" size={32} />
+            <div className="text-center py-12 transition-colors duration-300">
+              <div className={`mx-auto w-16 h-16 rounded-full flex items-center justify-center mb-4 ${theme === 'dark' ? 'bg-slate-700' : 'bg-slate-100'}`}>
+                <HardDrive className={theme === 'dark' ? 'text-slate-400' : 'text-slate-400'} size={32} />
               </div>
-              <p className="text-slate-500">Keine Geräte gefunden</p>
+              <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Keine Geräte gefunden</p>
             </div>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 transition-colors duration-300">
               {devices.map(device => (
-                <div key={device.id} className="bg-slate-50 rounded-lg p-4 border border-slate-200">
-                  <div className="flex items-start justify-between mb-3">
+                <div key={device.id} className={`rounded-lg p-4 border transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-900 border-slate-700' : 'bg-slate-50 border-slate-200'}`}>
+                  <div className="flex items-start justify-between mb-3 transition-colors duration-300">
                     <div className="flex items-center gap-3">
-                      <div className={`p-2 rounded-lg ${
-                        device.type === 'cd' ? 'bg-blue-100 text-blue-600' :
-                        device.type === 'dvd' ? 'bg-purple-100 text-purple-600' :
-                        'bg-pink-100 text-pink-600'
+                      <div className={`p-2 rounded-lg transition-colors duration-300 ${
+                        device.type === 'cd' ? theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-600' :
+                        device.type === 'dvd' ? theme === 'dark' ? 'bg-purple-900/30 text-purple-400' : 'bg-purple-100 text-purple-600' :
+                        theme === 'dark' ? 'bg-pink-900/30 text-pink-400' : 'bg-pink-100 text-pink-600'
                       }`}>
                         <Disc size={20} />
                       </div>
                       <div>
-                        <h3 className="font-semibold text-slate-900">{device.name}</h3>
-                        <p className="text-xs text-slate-500 font-mono">{device.path}</p>
+                        <h3 className={`font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>{device.name}</h3>
+                        <p className={`text-xs font-mono ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{device.path}</p>
                       </div>
                     </div>
                     <TypeBadge type={device.type} />
                   </div>
                   
-                  <div className="flex items-center justify-between mt-4">
-                    <span className={`px-2.5 py-1 rounded-md text-xs font-medium ${
-                      device.status === 'empty' ? 'bg-slate-100 text-slate-600' :
-                      device.status === 'ready' ? 'bg-emerald-100 text-emerald-700' :
-                      'bg-blue-100 text-blue-700'
+                  <div className="flex items-center justify-between mt-4 transition-colors duration-300">
+                    <span className={`px-2.5 py-1 rounded-md text-xs font-medium transition-colors duration-300 ${
+                      device.status === 'empty' ? theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-100 text-slate-600' :
+                      device.status === 'ready' ? theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-700' :
+                      theme === 'dark' ? 'bg-blue-900/30 text-blue-400' : 'bg-blue-100 text-blue-700'
                     }`}>
                       {device.status === 'empty' ? 'Leer' :
                        device.status === 'ready' ? 'Bereit' :
                        'Rippt'}
                     </span>
-                    <button className="text-sm font-medium text-indigo-600 hover:text-indigo-700">
+                    <button className={`text-sm font-medium transition-colors duration-300 ${theme === 'dark' ? 'text-indigo-400 hover:text-indigo-300' : 'text-indigo-600 hover:text-indigo-700'}`}>
                       Details
                     </button>
                   </div>
@@ -300,52 +300,52 @@ export default function Dashboard() {
       </div>
 
       {/* Recent Jobs */}
-      <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
-        <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
-          <h2 className="text-lg font-semibold text-slate-900">Neueste Jobs</h2>
-          <span className="text-sm text-slate-500">{jobs.length} Jobs insgesamt</span>
+      <div className={`rounded-xl shadow-sm border overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border-slate-700' : 'bg-white border-slate-200'}`}>
+        <div className={`px-6 py-4 border-b transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} flex items-center justify-between`}>
+          <h2 className={`text-lg font-semibold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Neueste Jobs</h2>
+          <span className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>{jobs.length} Jobs insgesamt</span>
         </div>
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead className="bg-slate-50">
+        <div className="overflow-x-auto transition-colors duration-300">
+          <table className="w-full transition-colors duration-300">
+            <thead className={theme === 'dark' ? 'bg-slate-900' : 'bg-slate-50'}>
               <tr>
-                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Typ</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Titel</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Gerät</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Fortschritt</th>
-                <th className="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Startzeit</th>
+                <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Typ</th>
+                <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Titel</th>
+                <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Status</th>
+                <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Gerät</th>
+                <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Fortschritt</th>
+                <th className={`px-6 py-3 text-left text-xs font-semibold uppercase tracking-wider ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Startzeit</th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-slate-200">
+            <tbody className={`divide-y ${theme === 'dark' ? 'divide-slate-700' : 'divide-slate-200'}`}>
               {jobs.length === 0 ? (
                 <tr>
-                  <td colSpan={6} className="px-6 py-12 text-center">
-                    <div className="text-slate-400 mb-2">Noch keine Jobs</div>
-                    <p className="text-sm text-slate-500">Füge eine CD, DVD oder Blu-ray hinzu, um zu starten</p>
+                  <td colSpan={6} className="px-6 py-12 text-center transition-colors duration-300">
+                    <div className={`mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-400'}`}>Noch keine Jobs</div>
+                    <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Füge eine CD, DVD oder Blu-ray hinzu, um zu starten</p>
                   </td>
                 </tr>
               ) : (
                 jobs.slice(0, 10).map(job => (
-                  <tr key={job.id} className="hover:bg-slate-50 transition-colors">
+                  <tr key={job.id} className="hover:bg-slate-50 transition-colors duration-300">
                     <td className="px-6 py-4 whitespace-nowrap">
                       <TypeBadge type={job.type} />
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
-                      <div className="text-sm font-medium text-slate-900">
+                      <div className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
                         {job.title || 'Unbekannt'}
                       </div>
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
                       <StatusBadge status={job.status} />
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
+                    <td className={`px-6 py-4 whitespace-nowrap text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
                       {job.device}
                     </td>
                     <td className="px-6 py-4 whitespace-nowrap">
                       <ProgressBar progress={job.progress} />
                     </td>
-                    <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">
+                    <td className={`px-6 py-4 whitespace-nowrap text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
                       {new Date(job.startTime).toLocaleString('de-DE')}
                     </td>
                   </tr>
diff --git a/docker/ui/src/pages/MetadataPreview.tsx b/docker/ui/src/pages/MetadataPreview.tsx
index 9e03dc5..e795f21 100644
--- a/docker/ui/src/pages/MetadataPreview.tsx
+++ b/docker/ui/src/pages/MetadataPreview.tsx
@@ -4,6 +4,8 @@ import { BookOpen, Music, Film, AlertCircle, CheckCircle, Search, Loader2 } from
 import type { LucideIcon } from 'lucide-react'
 import { useDarkMode } from '../context/ThemeContext'
 
+const API_URL = 'http://localhost:8000'
+
 interface Metadata {
   type: 'movie' | 'tv' | 'music' | 'unknown'
   id: number
@@ -31,8 +33,6 @@ interface PrescanResult {
   tracks?: Track[]
 }
 
-const API_URL = 'http://localhost:8000'
-
 export default function MetadataPreview() {
   const [device, setDevice] = useState<string>('')
   const [result, setResult] = useState<PrescanResult | null>(null)
@@ -97,38 +97,38 @@ export default function MetadataPreview() {
   }
 
   const getConfidenceColor = (confidence: number): string => {
-    if (confidence >= 0.9) return 'text-green-600 bg-green-100'
-    if (confidence >= 0.7) return 'text-yellow-600 bg-yellow-100'
-    return 'text-red-600 bg-red-100'
+    if (confidence >= 0.9) return theme === 'dark' ? 'text-green-400 bg-green-900/30' : 'text-green-600 bg-green-100'
+    if (confidence >= 0.7) return theme === 'dark' ? 'text-yellow-400 bg-yellow-900/30' : 'text-yellow-600 bg-yellow-100'
+    return theme === 'dark' ? 'text-red-400 bg-red-900/30' : 'text-red-600 bg-red-100'
   }
 
   return (
-    <div className="p-6 max-w-4xl mx-auto">
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-gray-900">Metadaten-Preview</h1>
-        <p className="text-gray-600 mt-1">
+    <div className="p-6 max-w-4xl mx-auto transition-colors duration-300">
+      <div className="mb-8 transition-colors duration-300">
+        <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Metadaten-Preview</h1>
+        <p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
           Wählen Sie ein Gerät aus, um die Metadaten vor dem Ripping zu lookupen
         </p>
       </div>
 
       {/* Device Selection */}
-      <div className="bg-white p-4 rounded-lg shadow mb-6">
-        <div className="flex gap-4">
+      <div className={`p-4 rounded-lg shadow mb-6 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
+        <div className="flex gap-4 transition-colors duration-300">
           <select
             value={device}
             onChange={(e) => setDevice(e.target.value)}
-            className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            className={`flex-1 px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-700 border-slate-600 text-slate-100' : 'bg-white border-gray-300 text-slate-900'}`}
           >
-            <option value="">Gerät auswählen...</option>
-            <option value="/dev/cdrom">CD-ROM (/dev/cdrom)</option>
-            <option value="/dev/dvd">DVD (/dev/dvd)</option>
-            <option value="/dev/bluray">Blu-ray (/dev/bluray)</option>
+            <option value="" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>Gerät auswählen...</option>
+            <option value="/dev/cdrom" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>CD-ROM (/dev/cdrom)</option>
+            <option value="/dev/dvd" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>DVD (/dev/dvd)</option>
+            <option value="/dev/bluray" className={theme === 'dark' ? 'bg-slate-800 text-slate-100' : 'bg-white text-slate-900'}>Blu-ray (/dev/bluray)</option>
           </select>
 
           <button
             onClick={handleScan}
             disabled={!device || loading}
-            className={`flex items-center gap-2 px-6 py-2 rounded-lg text-white ${
+            className={`flex items-center gap-2 px-6 py-2 rounded-lg text-white transition-colors ${
               !device || loading
                 ? 'bg-gray-400 cursor-not-allowed'
                 : 'bg-blue-600 hover:bg-blue-700'
@@ -150,7 +150,7 @@ export default function MetadataPreview() {
       </div>
 
       {error && (
-        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg flex items-center gap-3 text-red-700">
+        <div className={`mb-6 p-4 rounded-lg flex items-center gap-3 transition-colors duration-300 ${theme === 'dark' ? 'bg-red-900/30 border border-red-700 text-red-400' : 'bg-red-50 border border-red-200 text-red-700'}`}>
           <AlertCircle size={24} />
           <span>{error}</span>
         </div>
@@ -158,7 +158,7 @@ export default function MetadataPreview() {
 
       {/* Results */}
       {result && (
-        <div className="bg-white rounded-lg shadow overflow-hidden">
+        <div className={`rounded-lg shadow overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800' : 'bg-white'}`}>
           {/* Header */}
           <div className="bg-gradient-to-r from-blue-600 to-indigo-700 p-6 text-white">
             <div className="flex items-center gap-3 mb-2">
@@ -174,34 +174,34 @@ export default function MetadataPreview() {
           </div>
 
           {/* Confidence Score */}
-          <div className="p-6 border-b border-gray-200">
-            <div className="flex items-center gap-2">
-              <span className="text-sm font-medium text-gray-700">Übereinstimmung:</span>
-              <span className={`px-3 py-1 rounded-full text-sm font-medium ${getConfidenceColor(result.confidence)}`}>
+          <div className={`p-6 transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-b border-gray-200'}`}>
+            <div className="flex items-center gap-2 transition-colors duration-300">
+              <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-gray-700'}`}>Übereinstimmung:</span>
+              <span className={`px-3 py-1 rounded-full text-sm font-medium transition-colors duration-300 ${getConfidenceColor(result.confidence)}`}>
                 {Math.round(result.confidence * 100)}%
               </span>
             </div>
           </div>
 
           {/* Metadata */}
-          <div className="p-6">
+          <div className="p-6 transition-colors duration-300">
             {result.metadata && (
-              <div className="space-y-4">
+              <div className="space-y-4 transition-colors duration-300">
                 {result.metadata.overview && (
                   <div>
-                    <h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Beschreibung</h3>
-                    <p className="text-gray-700 leading-relaxed">{result.metadata.overview}</p>
+                    <h3 className={`text-sm font-medium uppercase mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Beschreibung</h3>
+                    <p className={`leading-relaxed ${theme === 'dark' ? 'text-slate-300' : 'text-gray-700'}`}>{result.metadata.overview}</p>
                   </div>
                 )}
 
                 {result.metadata.genres && (
                   <div>
-                    <h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Genre</h3>
-                    <div className="flex flex-wrap gap-2">
+                    <h3 className={`text-sm font-medium uppercase mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Genre</h3>
+                    <div className="flex flex-wrap gap-2 transition-colors duration-300">
                       {result.metadata.genres.map((genre, index) => (
                         <span
                           key={index}
-                          className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm"
+                          className={`px-3 py-1 rounded-full text-sm transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-gray-100 text-gray-700'}`}
                         >
                           {genre}
                         </span>
@@ -212,8 +212,8 @@ export default function MetadataPreview() {
 
                 {result.metadata.runtime && (
                   <div>
-                    <h3 className="text-sm font-medium text-gray-500 uppercase mb-2">Laufzeit</h3>
-                    <p className="text-gray-700">{Math.floor(result.metadata.runtime / 60)}h {result.metadata.runtime % 60}m</p>
+                    <h3 className={`text-sm font-medium uppercase mb-2 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Laufzeit</h3>
+                    <p className={`transition-colors duration-300 ${theme === 'dark' ? 'text-slate-300' : 'text-gray-700'}`}>{Math.floor(result.metadata.runtime / 60)}h {result.metadata.runtime % 60}m</p>
                   </div>
                 )}
               </div>
@@ -221,17 +221,17 @@ export default function MetadataPreview() {
 
             {/* Tracks */}
             {result.tracks && result.tracks.length > 0 && (
-              <div className="mt-6">
-                <h3 className="text-sm font-medium text-gray-500 uppercase mb-3">Tracks</h3>
-                <div className="space-y-2">
+              <div className="mt-6 transition-colors duration-300">
+                <h3 className={`text-sm font-medium uppercase mb-3 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>Tracks</h3>
+                <div className="space-y-2 transition-colors duration-300">
                   {result.tracks.map((track, index) => (
-                    <div key={index} className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                      <div className="flex items-center gap-3">
-                        <span className="w-8 font-medium text-gray-500">{track.track_number}</span>
-                        <span className="text-gray-900">{track.title}</span>
+                    <div key={index} className="flex items-center justify-between p-3 transition-colors duration-300">
+                      <div className="flex items-center gap-3 transition-colors duration-300">
+                        <span className={`w-8 font-medium ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>{track.track_number}</span>
+                        <span className={`transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-gray-900'}`}>{track.title}</span>
                       </div>
                       {track.duration && (
-                        <span className="text-sm text-gray-500">
+                        <span className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-gray-500'}`}>
                           {Math.floor(track.duration / 60)}:{String(track.duration % 60).padStart(2, '0')}
                         </span>
                       )}
@@ -243,11 +243,11 @@ export default function MetadataPreview() {
           </div>
 
           {/* Action */}
-          <div className="p-6 bg-gray-50 border-t border-gray-200">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3 text-sm text-gray-600">
-                <CheckCircle className="text-green-600" size={20} />
-                <span>Bereit zum Ripping</span>
+          <div className={`p-6 transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-700/50 border-t border-slate-700' : 'bg-gray-50 border-t border-gray-200'}`}>
+            <div className="flex items-center justify-between transition-colors duration-300">
+              <div className="flex items-center gap-3 text-sm transition-colors duration-300">
+                <CheckCircle className={theme === 'dark' ? 'text-green-400' : 'text-green-600'} size={20} />
+                <span className={theme === 'dark' ? 'text-slate-300' : 'text-gray-600'}>Bereit zum Ripping</span>
               </div>
               <button
                 onClick={handleConfirm}
diff --git a/docker/ui/src/pages/Settings.tsx b/docker/ui/src/pages/Settings.tsx
index ad8c6d1..5e93ad1 100644
--- a/docker/ui/src/pages/Settings.tsx
+++ b/docker/ui/src/pages/Settings.tsx
@@ -75,22 +75,22 @@ export default function SettingsPage() {
   }
 
   return (
-    <div className={`max-w-4xl space-y-6 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
-      <div className="flex flex-col gap-2">
-        <h1 className="text-3xl font-bold text-slate-900 dark:text-slate-100">Einstellungen</h1>
+    <div className={`max-w-4xl space-y-6 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+      <div className="flex flex-col gap-2 transition-colors duration-300">
+        <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Einstellungen</h1>
         <p className={`text-sm ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Konfiguriere Rippy nach deinen Wünschen</p>
       </div>
 
       {saved && (
-        <div className={`p-4 rounded-lg flex items-center gap-3 font-medium ${theme === 'dark' ? 'bg-emerald-900/30 border border-emerald-700 text-emerald-400' : 'bg-emerald-50 border border-emerald-200 text-emerald-700'}`}>
+        <div className={`p-4 rounded-lg flex items-center gap-3 font-medium transition-colors duration-300 ${theme === 'dark' ? '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>Einstellungen erfolgreich gespeichert!</span>
         </div>
       )}
 
-      <div className={`rounded-xl shadow-sm overflow-hidden ${theme === 'dark' ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'}`}>
+      <div className={`rounded-xl shadow-sm overflow-hidden transition-colors duration-300 ${theme === 'dark' ? 'bg-slate-800 border border-slate-700' : 'bg-white border border-slate-200'}`}>
         {/* Tabs */}
-        <div className={`flex ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-b`}>
+        <div className={`flex transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-b`}>
           <TabButton icon={Disc} label="Ripping" isActive={true} darkMode={theme === 'dark'} />
           <TabButton icon={Cpu} label="Verarbeitung" isActive={false} darkMode={theme === 'dark'} />
           <TabButton icon={Database} label="Datenbank" isActive={false} darkMode={theme === 'dark'} />
@@ -99,23 +99,23 @@ export default function SettingsPage() {
         </div>
 
         {/* Content */}
-        <div className="p-6 space-y-8">
+        <div className="p-6 space-y-8 transition-colors duration-300">
           {/* Ripping Settings */}
           <section>
-            <h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
-              <Disc size={20} className="text-indigo-600" />
+            <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+              <Disc size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
               Ripping-Einstellungen
             </h2>
             
-            <div className="space-y-4">
-              <div className="flex items-center justify-between p-4 bg-slate-50 rounded-lg">
+            <div className="space-y-4 transition-colors duration-300">
+              <div className="flex items-center justify-between p-4 transition-colors duration-300">
                 <div className="flex items-center gap-3">
-                  <div className="p-2 bg-indigo-100 rounded-lg">
-                    <Disc className="text-indigo-600" size={20} />
+                  <div className={`p-2 rounded-lg transition-colors duration-300 ${theme === 'dark' ? 'bg-indigo-900/30 text-indigo-400' : 'bg-indigo-100 text-indigo-600'}`}>
+                    <Disc size={20} />
                   </div>
                   <div>
-                    <h3 className="font-medium text-slate-900">Alle Tracks rippen</h3>
-                    <p className="text-sm text-slate-500">Rippe alle Tracks einer CD (nicht nur Main Feature)</p>
+                    <h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Alle Tracks rippen</h3>
+                    <p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Rippe alle Tracks einer CD (nicht nur Main Feature)</p>
                   </div>
                 </div>
                 <Toggle 
@@ -125,14 +125,14 @@ export default function SettingsPage() {
                 />
               </div>
 
-              <div className={`flex items-center justify-between p-4 ${theme === 'dark' ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
+              <div className={`flex items-center justify-between p-4 transition-colors duration-300 ${theme === 'dark' ? '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} />
+                  <div className={`p-2 rounded-lg transition-colors duration-300 ${theme === 'dark' ? 'bg-purple-900/30 text-purple-400' : 'bg-purple-100 text-purple-600'}`}>
+                    <Disc size={20} />
                   </div>
                   <div>
-                    <h3 className="font-medium text-slate-900">Nur Hauptfeature</h3>
-                    <p className="text-sm text-slate-500">Rippe bei DVDs/Blu-rays nur das Hauptfeature</p>
+                    <h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Nur Hauptfeature</h3>
+                    <p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Rippe bei DVDs/Blu-rays nur das Hauptfeature</p>
                   </div>
                 </div>
                 <Toggle 
@@ -142,14 +142,14 @@ export default function SettingsPage() {
                 />
               </div>
 
-              <div className={`flex items-center justify-between p-4 ${theme === 'dark' ? 'bg-slate-700/50 rounded-lg' : 'bg-slate-50 rounded-lg'}`}>
+              <div className={`flex items-center justify-between p-4 transition-colors duration-300 ${theme === 'dark' ? '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} />
+                  <div className={`p-2 rounded-lg transition-colors duration-300 ${theme === 'dark' ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-600'}`}>
+                    <Disc size={20} />
                   </div>
                   <div>
-                    <h3 className="font-medium text-slate-900">Automatischer Auswurf</h3>
-                    <p className="text-sm text-slate-500">Disk nach erfolgreichem Ripping auswerfen</p>
+                    <h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Automatischer Auswurf</h3>
+                    <p className={`text-sm transition-colors duration-300 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Disk nach erfolgreichem Ripping auswerfen</p>
                   </div>
                 </div>
                 <Toggle 
@@ -163,13 +163,13 @@ export default function SettingsPage() {
 
           {/* Output Directories */}
           <section>
-            <h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
-              <Database size={20} className="text-indigo-600" />
+            <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+              <Database size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
               Ausgabeverzeichnisse
             </h2>
             
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-              <div className="space-y-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 transition-colors duration-300">
+              <div className="space-y-2 transition-colors duration-300">
                   <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
                     Hauptverzeichnis
                   </label>
@@ -183,41 +183,41 @@ export default function SettingsPage() {
                   <p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Basisverzeichnis für alle Ausgaben</p>
               </div>
 
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-slate-700">
+              <div className="space-y-2 transition-colors duration-300">
+                <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
                   Filme
                 </label>
                 <input
                   type="text"
                   value={settings.movieDir}
                   onChange={(e) => handleChange('movieDir', 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 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
                   placeholder="movies"
                 />
               </div>
 
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-slate-700">
+              <div className="space-y-2 transition-colors duration-300">
+                <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
                   Serien
                 </label>
                 <input
                   type="text"
                   value={settings.seriesDir}
                   onChange={(e) => handleChange('seriesDir', 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 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
                   placeholder="series"
                 />
               </div>
 
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-slate-700">
+              <div className="space-y-2 transition-colors duration-300">
+                <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
                   Musik
                 </label>
                 <input
                   type="text"
                   value={settings.musicDir}
                   onChange={(e) => handleChange('musicDir', 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 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
                   placeholder="music"
                 />
               </div>
@@ -226,37 +226,37 @@ export default function SettingsPage() {
 
           {/* API Keys */}
           <section>
-            <h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
-              <Globe size={20} className="text-indigo-600" />
+            <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+              <Globe size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
               API-Schlüssel
             </h2>
             
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-slate-700">
+            <div className="space-y-4 transition-colors duration-300">
+              <div className="space-y-2 transition-colors duration-300">
+                <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
                   TMDB API Key
                 </label>
                 <input
                   type="password"
                   value={settings.tmdbApiKey}
                   onChange={(e) => handleChange('tmdbApiKey', 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 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
                   placeholder="Dein TMDB API Key"
                 />
-                <p className="text-xs text-slate-500">
-                  Hol dir einen Key auf <a href="https://www.themoviedb.org/" target="_blank" rel="noopener noreferrer" className="text-indigo-600 hover:underline">themoviedb.org</a>
+                <p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
+                  Hol dir einen Key auf <a href="https://www.themoviedb.org/" target="_blank" rel="noopener noreferrer" className={`${theme === 'dark' ? 'text-indigo-400 hover:underline' : 'text-indigo-600 hover:underline'}`}>themoviedb.org</a>
                 </p>
               </div>
 
-              <div className="space-y-2">
-                <label className="block text-sm font-medium text-slate-700">
+              <div className="space-y-2 transition-colors duration-300">
+                <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
                   TVDb API Key
                 </label>
                 <input
                   type="password"
                   value={settings.tvdbApiKey}
                   onChange={(e) => handleChange('tvdbApiKey', 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 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
                   placeholder="Dein TVDb API Key"
                 />
               </div>
@@ -265,30 +265,30 @@ export default function SettingsPage() {
 
           {/* Webhook */}
           <section>
-            <h2 className="text-lg font-semibold text-slate-900 mb-4 flex items-center gap-2">
-              <AlertCircle size={20} className="text-indigo-600" />
+            <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+              <AlertCircle size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
               Webhook-Benachrichtigungen
             </h2>
             
-            <div className="space-y-2">
-              <label className="block text-sm font-medium text-slate-700">
+            <div className="space-y-2 transition-colors duration-300">
+              <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
                 Webhook URL
               </label>
               <input
                 type="text"
                 value={settings.notificationWebhook}
                 onChange={(e) => handleChange('notificationWebhook', 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 ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'} border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all`}
                 placeholder="https://discord.com/api/webhooks/..."
               />
-              <p className="text-xs text-slate-500">
+              <p className={`text-xs ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
                 Optional: URL für Benachrichtigungen bei Job-Ende (Discord, Slack, etc.)
               </p>
             </div>
           </section>
 
           {/* Save Button */}
-          <div className="flex items-center justify-end gap-4 pt-6 border-t border-slate-200">
+          <div className={`flex items-center justify-end gap-4 pt-6 transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-t`}>
             <button
               onClick={handleSave}
               disabled={saving}