From 12c67aee27eefc9cc4d1d7ffdbdc68f7e05a66ff Mon Sep 17 00:00:00 2001
From: Hitonabi <Hitonabi@dreivontanke.ddnsfree.com>
Date: Wed, 22 Jul 2026 17:12:32 +0200
Subject: [PATCH] fix: use dark class instead of data-theme for Tailwind

---
 docker/ui/src/App.tsx                  |  2 +-
 docker/ui/src/context/ThemeContext.tsx | 10 +++++++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/docker/ui/src/App.tsx b/docker/ui/src/App.tsx
index 003f839..3ca4dc1 100644
--- a/docker/ui/src/App.tsx
+++ b/docker/ui/src/App.tsx
@@ -21,7 +21,7 @@ function App() {
     <div className="min-h-screen bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100 font-sans transition-colors duration-300">
       <div className="flex h-screen overflow-hidden">
         {/* Sidebar */}
-        <aside className="w-64 bg-slate-900 text-slate-100 flex flex-col dark:bg-slate-900 dark:text-slate-100">
+        <aside className="w-64 bg-slate-900 text-slate-100 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">
diff --git a/docker/ui/src/context/ThemeContext.tsx b/docker/ui/src/context/ThemeContext.tsx
index 649df0d..63c466c 100644
--- a/docker/ui/src/context/ThemeContext.tsx
+++ b/docker/ui/src/context/ThemeContext.tsx
@@ -18,10 +18,10 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     
     if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
       setTheme('dark')
-      document.documentElement.setAttribute('data-theme', 'dark')
+      document.documentElement.classList.add('dark')
     } else {
       setTheme('light')
-      document.documentElement.setAttribute('data-theme', 'light')
+      document.documentElement.classList.remove('dark')
     }
   }, [])
 
@@ -29,7 +29,11 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
     const newTheme = theme === 'dark' ? 'light' : 'dark'
     setTheme(newTheme)
     localStorage.setItem('theme', newTheme)
-    document.documentElement.setAttribute('data-theme', newTheme)
+    if (newTheme === 'dark') {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
   }
 
   return (