diff --git a/components/chatflow/chatflow-execution-bar.tsx b/components/chatflow/chatflow-execution-bar.tsx
index 6e4d9d06..1e38e57d 100644
--- a/components/chatflow/chatflow-execution-bar.tsx
+++ b/components/chatflow/chatflow-execution-bar.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import type {
   ChatflowNode,
   ChatflowParallelBranch,
@@ -42,7 +41,6 @@ export function ChatflowExecutionBar({
   index,
   delay = 0,
 }: ChatflowExecutionBarProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.chatflow.executionBar');
   const [isVisible, setIsVisible] = useState(false);
   const [elapsedTime, setElapsedTime] = useState(0);
@@ -113,17 +111,14 @@ export function ChatflowExecutionBar({
           <Loader2
             className={cn(
               'h-4 w-4 animate-spin',
-              isDark ? 'text-stone-400' : 'text-stone-600'
+              'text-stone-600 dark:text-stone-400'
             )}
           />
         );
       case 'completed':
         return (
           <CheckCircle
-            className={cn(
-              'h-4 w-4',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
+            className={cn('h-4 w-4', 'text-stone-600 dark:text-stone-400')}
           />
         );
       case 'failed':
@@ -131,19 +126,13 @@ export function ChatflowExecutionBar({
       case 'pending':
         return (
           <Clock
-            className={cn(
-              'h-4 w-4',
-              isDark ? 'text-stone-500' : 'text-stone-400'
-            )}
+            className={cn('h-4 w-4', 'text-stone-400 dark:text-stone-500')}
           />
         );
       default:
         return (
           <AlertCircle
-            className={cn(
-              'h-4 w-4',
-              isDark ? 'text-stone-500' : 'text-stone-400'
-            )}
+            className={cn('h-4 w-4', 'text-stone-400 dark:text-stone-500')}
           />
         );
     }
@@ -247,7 +236,7 @@ export function ChatflowExecutionBar({
             // Use new indicator bar style
             node.isInIteration ? 'iteration-node' : 'loop-node',
             // Slight background color distinction
-            isDark ? 'bg-stone-800/20' : 'bg-stone-50/40'
+            'bg-stone-50/40 dark:bg-stone-800/20'
           )
         : '';
 
@@ -257,37 +246,27 @@ export function ChatflowExecutionBar({
       case 'running':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-600 bg-stone-700/50 shadow-lg shadow-stone-900/30'
-            : 'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50'
+          'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50 dark:shadow-lg dark:shadow-stone-900/30'
         );
       case 'completed':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-500 bg-stone-600/30'
-            : 'border-stone-300 bg-stone-100'
+          'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
         );
       case 'failed':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-red-700/50 bg-red-900/20'
-            : 'border-red-200 bg-red-50'
+          'border-red-200 bg-red-50 dark:border-red-700/50 dark:bg-red-900/20'
         );
       case 'pending':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
         );
       default:
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
         );
     }
   };
@@ -324,7 +303,7 @@ export function ChatflowExecutionBar({
             <span
               className={cn(
                 'flex-1 truncate font-serif text-sm font-medium',
-                isDark ? 'text-stone-200' : 'text-stone-800'
+                'text-stone-800 dark:text-stone-200'
               )}
             >
               {getNodeTitle()}
@@ -337,7 +316,7 @@ export function ChatflowExecutionBar({
                 <span
                   className={cn(
                     'rounded bg-stone-200 px-1.5 py-0.5 text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {(node.currentIteration || 0) + 1}/{node.totalIterations}
@@ -347,7 +326,7 @@ export function ChatflowExecutionBar({
                 <span
                   className={cn(
                     'rounded bg-stone-200 px-1.5 py-0.5 text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {node.completedBranches || 0}/{node.totalBranches}
@@ -357,7 +336,7 @@ export function ChatflowExecutionBar({
                 <span
                   className={cn(
                     'rounded bg-stone-200 px-1.5 py-0.5 text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {node.maxLoops
@@ -372,23 +351,15 @@ export function ChatflowExecutionBar({
                   node.status === 'running'
                     ? cn(
                         // Base style
-                        isDark
-                          ? 'bg-stone-600/40 text-stone-200'
-                          : 'bg-stone-300/60 text-stone-700',
+                        'bg-stone-300/60 text-stone-700 dark:bg-stone-600/40 dark:text-stone-200',
                         // Subtle pulse effect
                         'animate-pulse'
                       )
                     : node.status === 'completed'
-                      ? isDark
-                        ? 'bg-stone-500/40 text-stone-100'
-                        : 'bg-stone-200 text-stone-800'
+                      ? 'bg-stone-200 text-stone-800 dark:bg-stone-500/40 dark:text-stone-100'
                       : node.status === 'failed'
-                        ? isDark
-                          ? 'bg-red-700/30 text-red-200'
-                          : 'bg-red-100 text-red-700'
-                        : isDark
-                          ? 'bg-stone-700/50 text-stone-400'
-                          : 'bg-stone-200/80 text-stone-600'
+                        ? 'bg-red-100 text-red-700 dark:bg-red-700/30 dark:text-red-200'
+                        : 'bg-stone-200/80 text-stone-600 dark:bg-stone-700/50 dark:text-stone-400'
                 )}
               >
                 {getStatusText()}
@@ -404,7 +375,7 @@ export function ChatflowExecutionBar({
               <div
                 className={cn(
                   'font-serif text-xs',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
+                  'text-stone-500 dark:text-stone-400'
                 )}
               >
                 {formatTime(elapsedTime)}
@@ -435,7 +406,6 @@ export function ChatflowExecutionBar({
                 current={node.completedBranches || 0}
                 total={node.totalBranches}
                 type="branch"
-                isDark={isDark}
               />
             </div>
           )}
@@ -443,11 +413,7 @@ export function ChatflowExecutionBar({
           {/* Branch list */}
           <div className="space-y-1">
             {node.parallelBranches?.map(branch => (
-              <ParallelBranchItem
-                key={branch.id}
-                branch={branch}
-                isDark={isDark}
-              />
+              <ParallelBranchItem key={branch.id} branch={branch} />
             ))}
           </div>
         </div>
@@ -485,10 +451,9 @@ function CollapsibleContent({
 // --- 🎯 New: parallel branch item component ---
 interface ParallelBranchItemProps {
   branch: ChatflowParallelBranch;
-  isDark: boolean;
 }
 
-function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
+function ParallelBranchItem({ branch }: ParallelBranchItemProps) {
   const t = useTranslations('pages.chatflow.executionBar');
   const [elapsedTime, setElapsedTime] = useState(0);
 
@@ -531,13 +496,13 @@ function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
       className={cn(
         'ml-4 flex items-center gap-2 rounded-md border-l-2 px-3 py-2 font-serif',
         branch.status === 'running' &&
-          cn('border-l-stone-400', isDark ? 'bg-stone-800/20' : 'bg-stone-100'),
+          cn('border-l-stone-400', 'bg-stone-100 dark:bg-stone-800/20'),
         branch.status === 'completed' &&
-          cn('border-l-stone-500', isDark ? 'bg-stone-700/20' : 'bg-stone-50'),
+          cn('border-l-stone-500', 'bg-stone-50 dark:bg-stone-700/20'),
         branch.status === 'failed' &&
-          cn('border-l-red-500', isDark ? 'bg-red-900/20' : 'bg-red-50'),
+          cn('border-l-red-500', 'bg-red-50 dark:bg-red-900/20'),
         branch.status === 'pending' &&
-          cn('border-l-stone-300', isDark ? 'bg-stone-800/20' : 'bg-stone-50')
+          cn('border-l-stone-300', 'bg-stone-50 dark:bg-stone-800/20')
       )}
     >
       <div className="flex-shrink-0">
@@ -550,17 +515,12 @@ function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
           <span
             className={cn(
               'text-sm font-medium',
-              isDark ? 'text-stone-200' : 'text-stone-800'
+              'text-stone-800 dark:text-stone-200'
             )}
           >
             {t('branch.label')} {String.fromCharCode(65 + branch.index)}
           </span>
-          <span
-            className={cn(
-              'text-xs',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
-          >
+          <span className={cn('text-xs', 'text-stone-600 dark:text-stone-400')}>
             {branch.description || t('status.executing_')}
           </span>
         </div>
@@ -573,7 +533,7 @@ function ParallelBranchItem({ branch, isDark }: ParallelBranchItemProps) {
           <span
             className={cn(
               'font-serif text-xs',
-              isDark ? 'text-stone-400' : 'text-stone-500'
+              'text-stone-500 dark:text-stone-400'
             )}
           >
             {formatTime(elapsedTime)}
@@ -589,10 +549,9 @@ interface ProgressBarProps {
   current: number;
   total: number;
   type: 'iteration' | 'branch';
-  isDark: boolean;
 }
 
-function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
+function ProgressBar({ current, total, type }: ProgressBarProps) {
   const t = useTranslations('pages.chatflow.executionBar');
   const percentage = total > 0 ? (current / total) * 100 : 0;
 
@@ -602,7 +561,7 @@ function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
         <span
           className={cn(
             'font-serif text-xs font-medium',
-            isDark ? 'text-stone-300' : 'text-stone-700'
+            'text-stone-700 dark:text-stone-300'
           )}
         >
           {type === 'iteration'
@@ -612,7 +571,7 @@ function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
         <span
           className={cn(
             'font-serif text-xs',
-            isDark ? 'text-stone-400' : 'text-stone-500'
+            'text-stone-500 dark:text-stone-400'
           )}
         >
           {current}/{total}
@@ -622,7 +581,7 @@ function ProgressBar({ current, total, type, isDark }: ProgressBarProps) {
       <div
         className={cn(
           'h-2 w-full overflow-hidden rounded-full',
-          isDark ? 'bg-stone-700' : 'bg-stone-200'
+          'bg-stone-200 dark:bg-stone-700'
         )}
       >
         <div
diff --git a/components/chatflow/chatflow-floating-controller.tsx b/components/chatflow/chatflow-floating-controller.tsx
index 556c0c7f..7c33a347 100644
--- a/components/chatflow/chatflow-floating-controller.tsx
+++ b/components/chatflow/chatflow-floating-controller.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { useChatflowExecutionStore } from '@lib/stores/chatflow-execution-store';
 import { cn } from '@lib/utils';
 import { Workflow } from 'lucide-react';
@@ -30,7 +29,6 @@ export function ChatflowFloatingController({
   onToggleTracker,
   className,
 }: ChatflowFloatingControllerProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.chatflow.floatingController');
 
   // Get execution status from store
@@ -61,9 +59,7 @@ export function ChatflowFloatingController({
           'h-12 w-12 rounded-full shadow-lg transition-all duration-200',
           'flex items-center justify-center',
           'hover:scale-105 hover:shadow-xl active:scale-95',
-          isDark
-            ? 'border border-stone-700 bg-stone-800 text-stone-200 hover:bg-stone-700'
-            : 'border border-stone-200 bg-white text-stone-700 hover:bg-stone-50'
+          'border border-stone-200 bg-white text-stone-700 hover:bg-stone-50 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200 dark:hover:bg-stone-700'
         )}
         title={isTrackerVisible ? t('hideTracker') : t('showTracker')}
       >
diff --git a/components/chatflow/chatflow-input-area.tsx b/components/chatflow/chatflow-input-area.tsx
index 459a5fe2..4f32cf81 100644
--- a/components/chatflow/chatflow-input-area.tsx
+++ b/components/chatflow/chatflow-input-area.tsx
@@ -5,7 +5,6 @@ import { FormField } from '@components/workflow/workflow-input-form/form-field';
 import { validateFormData } from '@components/workflow/workflow-input-form/validation';
 import { useChatWidth } from '@lib/hooks/use-chat-width';
 import { useCurrentApp } from '@lib/hooks/use-current-app';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import type { DifyUserInputFormItem } from '@lib/services/dify/types';
 import { cn } from '@lib/utils';
 import { Loader2, RotateCcw, Send, Workflow } from 'lucide-react';
@@ -44,7 +43,6 @@ export function ChatflowInputArea({
   className,
   onFormConfigChange,
 }: ChatflowInputAreaProps) {
-  const { isDark } = useThemeColors();
   const { widthClass, paddingClass } = useChatWidth();
   const { currentAppInstance } = useCurrentApp();
   const t = useTranslations('pages.chatflow');
@@ -308,13 +306,13 @@ export function ChatflowInputArea({
             <Loader2
               className={cn(
                 'mx-auto h-6 w-6 animate-spin',
-                isDark ? 'text-stone-400' : 'text-stone-500'
+                'text-stone-500 dark:text-stone-400'
               )}
             />
             <p
               className={cn(
                 'font-serif text-sm',
-                isDark ? 'text-stone-400' : 'text-stone-500'
+                'text-stone-500 dark:text-stone-400'
               )}
             >
               {t('loading.inputConfig')}
@@ -340,16 +338,14 @@ export function ChatflowInputArea({
         className={cn(
           'mx-auto max-w-2xl',
           'rounded-2xl shadow-xl backdrop-blur-xl transition-all duration-300',
-          isDark
-            ? 'border border-stone-700/60 bg-gradient-to-br from-stone-900/95 to-stone-800/95 shadow-stone-900/40 hover:shadow-stone-900/60'
-            : 'border border-stone-200/60 bg-gradient-to-br from-white/95 to-stone-50/95 shadow-stone-200/40 hover:shadow-2xl hover:shadow-stone-300/50'
+          'border border-stone-200/60 bg-gradient-to-br from-white/95 to-stone-50/95 shadow-stone-200/40 hover:shadow-2xl hover:shadow-stone-300/50 dark:border-stone-700/60 dark:bg-gradient-to-br dark:from-stone-900/95 dark:to-stone-800/95 dark:shadow-stone-900/40 dark:hover:shadow-stone-900/60'
         )}
       >
         {/* --- Form header --- */}
         <div
           className={cn(
             'border-b p-8 pb-6',
-            isDark ? 'border-stone-700/50' : 'border-stone-200/50'
+            'border-stone-200/50 dark:border-stone-700/50'
           )}
         >
           <div className="space-y-4 text-center">
@@ -357,16 +353,11 @@ export function ChatflowInputArea({
               className={cn(
                 'inline-flex h-16 w-16 items-center justify-center rounded-2xl',
                 'shadow-lg',
-                isDark
-                  ? 'border border-stone-600/50 bg-gradient-to-br from-stone-800 to-stone-700 shadow-stone-900/50'
-                  : 'border border-stone-300/50 bg-gradient-to-br from-stone-100 to-stone-200 shadow-stone-200/50'
+                'border border-stone-300/50 bg-gradient-to-br from-stone-100 to-stone-200 shadow-stone-200/50 dark:border-stone-600/50 dark:bg-gradient-to-br dark:from-stone-800 dark:to-stone-700 dark:shadow-stone-900/50'
               )}
             >
               <Workflow
-                className={cn(
-                  'h-7 w-7',
-                  isDark ? 'text-stone-300' : 'text-stone-600'
-                )}
+                className={cn('h-7 w-7', 'text-stone-600 dark:text-stone-300')}
               />
             </div>
 
@@ -374,7 +365,7 @@ export function ChatflowInputArea({
               <h1
                 className={cn(
                   'font-serif text-2xl font-bold',
-                  isDark ? 'text-stone-200' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-200'
                 )}
               >
                 {currentAppInstance?.display_name || t('form.defaultAppName')}
@@ -382,7 +373,7 @@ export function ChatflowInputArea({
               <p
                 className={cn(
                   'mx-auto max-w-md font-serif leading-relaxed',
-                  isDark ? 'text-stone-400' : 'text-stone-600'
+                  'text-stone-600 dark:text-stone-400'
                 )}
               >
                 {currentAppInstance?.description ||
@@ -406,7 +397,7 @@ export function ChatflowInputArea({
               <label
                 className={cn(
                   'font-serif text-base font-semibold',
-                  isDark ? 'text-stone-200' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-200'
                 )}
               >
                 {t('form.question.label')}{' '}
@@ -430,9 +421,7 @@ export function ChatflowInputArea({
                   'focus:shadow-lg focus:shadow-stone-500/25',
                   errors.query
                     ? 'border-red-400 focus:border-red-500 focus:ring-red-500/20'
-                    : isDark
-                      ? 'border-stone-600 bg-stone-800/80 text-stone-100 group-hover:border-stone-500 placeholder:text-stone-400 focus:bg-stone-800'
-                      : 'border-stone-300 bg-white/80 text-stone-900 group-hover:border-stone-400 placeholder:text-stone-500 focus:bg-white'
+                    : 'border-stone-300 bg-white/80 text-stone-900 group-hover:border-stone-400 placeholder:text-stone-500 focus:bg-white dark:border-stone-600 dark:bg-stone-800/80 dark:text-stone-100 dark:group-hover:border-stone-500 dark:placeholder:text-stone-400 dark:focus:bg-stone-800'
                 )}
                 disabled={isProcessing || isWaiting}
               />
@@ -441,7 +430,7 @@ export function ChatflowInputArea({
                 <div
                   className={cn(
                     'mt-3 flex items-center gap-2',
-                    isDark ? 'text-red-400' : 'text-red-600'
+                    'text-red-600 dark:text-red-400'
                   )}
                 >
                   <div className="h-1 w-1 rounded-full bg-red-500" />
@@ -459,15 +448,13 @@ export function ChatflowInputArea({
                 <div
                   className={cn(
                     'h-px flex-1 bg-gradient-to-r from-transparent to-transparent',
-                    isDark ? 'via-stone-600' : 'via-stone-300'
+                    'via-stone-300 dark:via-stone-600'
                   )}
                 />
                 <span
                   className={cn(
                     'rounded-full border px-4 py-2 font-serif text-sm',
-                    isDark
-                      ? 'border-stone-700 bg-stone-800 text-stone-400'
-                      : 'border-stone-200 bg-stone-100 text-stone-600'
+                    'border-stone-200 bg-stone-100 text-stone-600 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-400'
                   )}
                 >
                   {t('form.additionalInfo')}
@@ -475,7 +462,7 @@ export function ChatflowInputArea({
                 <div
                   className={cn(
                     'h-px flex-1 bg-gradient-to-r from-transparent to-transparent',
-                    isDark ? 'via-stone-600' : 'via-stone-300'
+                    'via-stone-300 dark:via-stone-600'
                   )}
                 />
               </div>
@@ -495,18 +482,14 @@ export function ChatflowInputArea({
                         key={`${fieldConfig.variable}-${index}`}
                         className={cn(
                           'group relative rounded-xl p-6 transition-all duration-300',
-                          isDark
-                            ? 'border border-stone-600/60 bg-gradient-to-br from-stone-800/80 to-stone-700/80 hover:border-stone-500 hover:shadow-lg hover:shadow-stone-900/50'
-                            : 'border border-stone-200/60 bg-gradient-to-br from-stone-50/80 to-white/80 hover:border-stone-300 hover:shadow-lg hover:shadow-stone-200/50'
+                          'border border-stone-200/60 bg-gradient-to-br from-stone-50/80 to-white/80 hover:border-stone-300 hover:shadow-lg hover:shadow-stone-200/50 dark:border-stone-600/60 dark:bg-gradient-to-br dark:from-stone-800/80 dark:to-stone-700/80 dark:hover:border-stone-500 dark:hover:shadow-lg dark:hover:shadow-stone-900/50'
                         )}
                       >
                         {/* Field decoration line */}
                         <div
                           className={cn(
                             'absolute top-0 left-6 h-1 w-12 rounded-full transition-all duration-300 group-hover:w-16',
-                            isDark
-                              ? 'bg-gradient-to-r from-stone-500 to-stone-600'
-                              : 'bg-gradient-to-r from-stone-400 to-stone-300'
+                            'bg-gradient-to-r from-stone-400 to-stone-300 dark:bg-gradient-to-r dark:from-stone-500 dark:to-stone-600'
                           )}
                         />
 
@@ -552,7 +535,7 @@ export function ChatflowInputArea({
           <div
             className={cn(
               'border-t pt-6',
-              isDark ? 'border-stone-700/50' : 'border-stone-200/50'
+              'border-stone-200/50 dark:border-stone-700/50'
             )}
           >
             <div className="flex flex-col gap-4 sm:flex-row">
@@ -571,9 +554,7 @@ export function ChatflowInputArea({
                 className={cn(
                   'flex items-center justify-center gap-3 rounded-xl px-6 py-3',
                   'border-2 font-serif text-sm font-medium backdrop-blur-sm transition-all duration-300',
-                  isDark
-                    ? 'border-stone-600 bg-stone-800/80 text-stone-300'
-                    : 'border-stone-300 bg-white/80 text-stone-700',
+                  'border-stone-300 bg-white/80 text-stone-700 dark:border-stone-600 dark:bg-stone-800/80 dark:text-stone-300',
                   isProcessing ||
                     isWaiting ||
                     (!query &&
@@ -583,9 +564,7 @@ export function ChatflowInputArea({
                     ? 'cursor-not-allowed opacity-50'
                     : cn(
                         'transform active:scale-[0.98]',
-                        isDark
-                          ? 'hover:border-stone-500 hover:bg-stone-700 hover:shadow-lg hover:shadow-stone-900/50'
-                          : 'hover:border-stone-400 hover:bg-stone-50 hover:shadow-lg hover:shadow-stone-200/50'
+                        'hover:border-stone-400 hover:bg-stone-50 hover:shadow-lg hover:shadow-stone-200/50 dark:hover:border-stone-500 dark:hover:bg-stone-700 dark:hover:shadow-lg dark:hover:shadow-stone-900/50'
                       )
                 )}
               >
@@ -600,16 +579,12 @@ export function ChatflowInputArea({
                 className={cn(
                   'flex flex-1 items-center justify-center gap-3 rounded-xl px-8 py-4',
                   'font-serif text-base font-semibold text-white shadow-lg transition-all duration-300',
-                  isDark
-                    ? 'bg-gradient-to-r from-stone-700 to-stone-600 shadow-stone-900/50'
-                    : 'bg-gradient-to-r from-stone-800 to-stone-700 shadow-stone-800/25',
+                  'bg-gradient-to-r from-stone-800 to-stone-700 shadow-stone-800/25 dark:bg-gradient-to-r dark:from-stone-700 dark:to-stone-600 dark:shadow-stone-900/50',
                   isProcessing || isWaiting || !canSubmit()
                     ? 'cursor-not-allowed opacity-50'
                     : cn(
                         'transform hover:scale-[1.02] active:scale-[0.98]',
-                        isDark
-                          ? 'hover:from-stone-600 hover:to-stone-500 hover:shadow-xl hover:shadow-stone-900/60'
-                          : 'hover:from-stone-700 hover:to-stone-600 hover:shadow-xl hover:shadow-stone-800/30'
+                        'hover:from-stone-700 hover:to-stone-600 hover:shadow-xl hover:shadow-stone-800/30 dark:hover:from-stone-600 dark:hover:to-stone-500 dark:hover:shadow-xl dark:hover:shadow-stone-900/60'
                       )
                 )}
               >
@@ -632,9 +607,7 @@ export function ChatflowInputArea({
               <div
                 className={cn(
                   'mt-6 rounded-xl border p-4 shadow-lg',
-                  isDark
-                    ? 'border-red-700/50 bg-gradient-to-r from-red-900/20 to-red-800/20 shadow-red-900/20'
-                    : 'border-red-200 bg-gradient-to-r from-red-50 to-red-100/50 shadow-red-100/50'
+                  'border-red-200 bg-gradient-to-r from-red-50 to-red-100/50 shadow-red-100/50 dark:border-red-700/50 dark:bg-gradient-to-r dark:from-red-900/20 dark:to-red-800/20 dark:shadow-red-900/20'
                 )}
               >
                 <div className="flex items-center gap-3">
@@ -642,7 +615,7 @@ export function ChatflowInputArea({
                   <p
                     className={cn(
                       'font-serif text-sm',
-                      isDark ? 'text-red-300' : 'text-red-700'
+                      'text-red-700 dark:text-red-300'
                     )}
                   >
                     {t('form.checkAndCorrectErrors')}
diff --git a/components/chatflow/chatflow-node-tracker.tsx b/components/chatflow/chatflow-node-tracker.tsx
index d3b72a27..9e3a425d 100644
--- a/components/chatflow/chatflow-node-tracker.tsx
+++ b/components/chatflow/chatflow-node-tracker.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { useChatflowExecutionStore } from '@lib/stores/chatflow-execution-store';
 import { cn } from '@lib/utils';
 import { Loader2, Workflow } from 'lucide-react';
@@ -30,7 +29,6 @@ export function ChatflowNodeTracker({
   isVisible,
   className,
 }: ChatflowNodeTrackerProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.chatflow.nodeTracker');
 
   // Get node status from store
@@ -114,28 +112,23 @@ export function ChatflowNodeTracker({
           'space-y-3 rounded-lg border p-4',
           // Limit actual width to avoid conflict with chat content
           'max-w-[320px] min-w-[280px]',
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50 backdrop-blur-sm'
-            : 'border-stone-200 bg-white/80 backdrop-blur-sm'
+          'border-stone-200 bg-white/80 backdrop-blur-sm dark:border-stone-700/50 dark:bg-stone-800/50'
         )}
       >
         {/* Title bar */}
         <div
           className={cn(
             'flex items-center gap-2 border-b pb-2',
-            isDark ? 'border-stone-700/50' : 'border-stone-200/50'
+            'border-stone-200/50 dark:border-stone-700/50'
           )}
         >
           <Workflow
-            className={cn(
-              'h-4 w-4',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
+            className={cn('h-4 w-4', 'text-stone-600 dark:text-stone-400')}
           />
           <span
             className={cn(
               'font-serif text-sm font-medium',
-              isDark ? 'text-stone-200' : 'text-stone-800'
+              'text-stone-800 dark:text-stone-200'
             )}
           >
             {t('title')}
@@ -151,23 +144,21 @@ export function ChatflowNodeTracker({
             <div
               className={cn(
                 'flex items-center gap-3 rounded-lg border-2 border-dashed px-4 py-3',
-                isDark
-                  ? 'border-stone-600 bg-stone-800/30'
-                  : 'border-stone-300 bg-stone-50'
+                'border-stone-300 bg-stone-50 dark:border-stone-600 dark:bg-stone-800/30'
               )}
             >
               {isExecuting ? (
                 <Loader2
                   className={cn(
                     'h-4 w-4 animate-spin',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 />
               ) : (
                 <Workflow
                   className={cn(
                     'h-4 w-4',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 />
               )}
@@ -175,7 +166,7 @@ export function ChatflowNodeTracker({
                 <div
                   className={cn(
                     'font-serif text-sm font-medium',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {isExecuting ? t('starting') : t('noRecords')}
@@ -183,7 +174,7 @@ export function ChatflowNodeTracker({
                 <div
                   className={cn(
                     'font-serif text-xs',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 >
                   {isExecuting ? t('waitingUpdate') : t('showProgress')}
@@ -208,9 +199,7 @@ export function ChatflowNodeTracker({
           <div
             className={cn(
               'mt-3 rounded-lg border p-3',
-              isDark
-                ? 'border-red-700/50 bg-red-900/20 text-red-200'
-                : 'border-red-200 bg-red-50 text-red-700'
+              'border-red-200 bg-red-50 text-red-700 dark:border-red-700/50 dark:bg-red-900/20 dark:text-red-200'
             )}
           >
             <div className="font-serif text-sm">
diff --git a/components/file-preview/previews/audio-preview.tsx b/components/file-preview/previews/audio-preview.tsx
index 9ed2eff2..39d2a055 100644
--- a/components/file-preview/previews/audio-preview.tsx
+++ b/components/file-preview/previews/audio-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn, formatBytes } from '@lib/utils';
 import { DownloadIcon, MusicIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview');
   const audioRef = useRef<HTMLAudioElement>(null);
   const [audioUrl, setAudioUrl] = useState<string>('');
@@ -64,9 +62,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
           onClick={onDownload}
           className={cn(
             'inline-flex items-center space-x-2 rounded-md px-4 py-2 text-sm font-medium transition-colors',
-            isDark
-              ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-              : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+            'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
           )}
         >
           <DownloadIcon className="h-4 w-4" />
@@ -78,24 +74,19 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
       <div
         className={cn(
           'rounded-lg border p-6',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         {/* Filename Display */}
         <div className="mb-4 flex items-center space-x-3">
           <MusicIcon
-            className={cn(
-              'h-8 w-8',
-              isDark ? 'text-stone-400' : 'text-stone-500'
-            )}
+            className={cn('h-8 w-8', 'text-stone-500 dark:text-stone-400')}
           />
           <div>
             <p
               className={cn(
                 'truncate font-medium',
-                isDark ? 'text-stone-200' : 'text-stone-800'
+                'text-stone-800 dark:text-stone-200'
               )}
               title={filename}
             >
@@ -103,10 +94,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
             </p>
             {duration > 0 && (
               <p
-                className={cn(
-                  'text-sm',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
-                )}
+                className={cn('text-sm', 'text-stone-500 dark:text-stone-400')}
               >
                 {formatTime(duration)}
               </p>
@@ -120,10 +108,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
             <div className="flex items-center space-x-2">
               <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"></div>
               <span
-                className={cn(
-                  'text-sm',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
-                )}
+                className={cn('text-sm', 'text-stone-500 dark:text-stone-400')}
               >
                 {t('loading')}
               </span>
@@ -134,12 +119,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
         {/* Error State */}
         {hasError && (
           <div className="flex items-center justify-center py-8">
-            <p
-              className={cn(
-                'text-sm',
-                isDark ? 'text-red-400' : 'text-red-600'
-              )}
-            >
+            <p className={cn('text-sm', 'text-red-600 dark:text-red-400')}>
               {t('audio.loadError')}
             </p>
           </div>
@@ -165,9 +145,7 @@ export const AudioPreview: React.FC<AudioPreviewProps> = ({
       <div
         className={cn(
           'rounded-md border p-4 text-sm',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         <div className="space-y-1">
diff --git a/components/file-preview/previews/image-preview.tsx b/components/file-preview/previews/image-preview.tsx
index a4ba2201..aa61a7d7 100644
--- a/components/file-preview/previews/image-preview.tsx
+++ b/components/file-preview/previews/image-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn } from '@lib/utils';
 import { DownloadIcon, ImageIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview.imagePreview');
   const [imageUrl, setImageUrl] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
@@ -51,17 +49,14 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       <div className="animate-pulse space-y-4">
         <div className="flex items-center space-x-2">
           <ImageIcon
-            className={cn(
-              'h-5 w-5',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
+            className={cn('h-5 w-5', 'text-stone-600 dark:text-stone-400')}
           />
           <h3 className="text-lg font-semibold">{t('title')}</h3>
         </div>
         <div
           className={cn(
             'aspect-video w-full rounded-md',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
+            'bg-stone-200 dark:bg-stone-700'
           )}
         />
       </div>
@@ -73,10 +68,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2">
           <ImageIcon
-            className={cn(
-              'h-5 w-5',
-              isDark ? 'text-stone-400' : 'text-stone-600'
-            )}
+            className={cn('h-5 w-5', 'text-stone-600 dark:text-stone-400')}
           />
           <h3 className="text-lg font-semibold">{t('title')}</h3>
         </div>
@@ -84,9 +76,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
           onClick={onDownload}
           className={cn(
             'inline-flex items-center space-x-2 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
-            isDark
-              ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-              : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+            'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
           )}
         >
           <DownloadIcon className="h-4 w-4" />
@@ -97,16 +87,14 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       <div
         className={cn(
           'overflow-hidden rounded-md border',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         {hasError ? (
           <div
             className={cn(
               'flex flex-col items-center justify-center space-y-2 py-8',
-              isDark ? 'text-stone-400' : 'text-stone-600'
+              'text-stone-600 dark:text-stone-400'
             )}
           >
             <ImageIcon className="h-12 w-12 opacity-50" />
@@ -115,7 +103,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
               onClick={onDownload}
               className={cn(
                 'text-sm underline hover:no-underline',
-                isDark ? 'text-stone-300' : 'text-stone-700'
+                'text-stone-700 dark:text-stone-300'
               )}
             >
               {t('downloadToView')}
@@ -137,9 +125,7 @@ export const ImagePreview: React.FC<ImagePreviewProps> = ({
       <div
         className={cn(
           'rounded-md border p-3 text-sm',
-          isDark
-            ? 'border-stone-700 bg-stone-800 text-stone-300'
-            : 'border-stone-200 bg-stone-50 text-stone-700'
+          'border-stone-200 bg-stone-50 text-stone-700 dark:border-stone-700 dark:bg-stone-800 dark:text-stone-300'
         )}
       >
         <div className="space-y-1">
diff --git a/components/file-preview/previews/markdown-preview.tsx b/components/file-preview/previews/markdown-preview.tsx
index 4e8ed871..eefcc0ad 100644
--- a/components/file-preview/previews/markdown-preview.tsx
+++ b/components/file-preview/previews/markdown-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn } from '@lib/utils';
 import { CodeIcon, DownloadIcon, EyeIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview.markdownPreview');
   const [markdown, setMarkdown] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
@@ -43,23 +41,12 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
   if (isLoading) {
     return (
       <div className="animate-pulse space-y-3">
+        <div className={cn('h-4 rounded', 'bg-stone-200 dark:bg-stone-700')} />
         <div
-          className={cn(
-            'h-4 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
+          className={cn('h-4 w-3/4 rounded', 'bg-stone-200 dark:bg-stone-700')}
         />
         <div
-          className={cn(
-            'h-4 w-3/4 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
-        />
-        <div
-          className={cn(
-            'h-4 w-1/2 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
+          className={cn('h-4 w-1/2 rounded', 'bg-stone-200 dark:bg-stone-700')}
         />
       </div>
     );
@@ -95,7 +82,7 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
           <div
             className={cn(
               'inline-flex rounded-md',
-              isDark ? 'bg-stone-800' : 'bg-stone-100'
+              'bg-stone-100 dark:bg-stone-800'
             )}
           >
             <button
@@ -103,12 +90,8 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
               className={cn(
                 'inline-flex items-center space-x-1 rounded-l-md px-2 py-1 text-xs font-medium transition-colors',
                 viewMode === 'rendered'
-                  ? isDark
-                    ? 'bg-stone-600 text-stone-200'
-                    : 'bg-stone-300 text-stone-800'
-                  : isDark
-                    ? 'text-stone-400 hover:text-stone-300'
-                    : 'text-stone-600 hover:text-stone-700'
+                  ? 'bg-stone-300 text-stone-800 dark:bg-stone-600 dark:text-stone-200'
+                  : 'text-stone-600 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-300'
               )}
             >
               <EyeIcon className="h-3 w-3" />
@@ -119,12 +102,8 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
               className={cn(
                 'inline-flex items-center space-x-1 rounded-r-md px-2 py-1 text-xs font-medium transition-colors',
                 viewMode === 'raw'
-                  ? isDark
-                    ? 'bg-stone-600 text-stone-200'
-                    : 'bg-stone-300 text-stone-800'
-                  : isDark
-                    ? 'text-stone-400 hover:text-stone-300'
-                    : 'text-stone-600 hover:text-stone-700'
+                  ? 'bg-stone-300 text-stone-800 dark:bg-stone-600 dark:text-stone-200'
+                  : 'text-stone-600 hover:text-stone-700 dark:text-stone-400 dark:hover:text-stone-300'
               )}
             >
               <CodeIcon className="h-3 w-3" />
@@ -135,9 +114,8 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
             onClick={onDownload}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300',
+              'dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('downloadButton')}
           >
@@ -151,17 +129,13 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
       <div
         className={cn(
           'min-h-[60vh] flex-1 overflow-auto rounded-md border p-4',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50',
+          'dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         {viewMode === 'rendered' ? (
           <div
-            className={cn(
-              'prose prose-sm max-w-none',
-              isDark ? 'prose-invert' : ''
-            )}
+            className={cn('prose prose-sm max-w-none', 'dark:prose-invert')}
             dangerouslySetInnerHTML={{
               __html: renderMarkdown(markdown),
             }}
@@ -170,7 +144,7 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
           <pre
             className={cn(
               'font-mono text-sm break-words whitespace-pre-wrap',
-              isDark ? 'text-stone-200' : 'text-stone-800'
+              'text-stone-800 dark:text-stone-200'
             )}
           >
             {markdown}
@@ -182,7 +156,7 @@ export const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({
       <div
         className={cn(
           'flex-shrink-0 text-xs',
-          isDark ? 'text-stone-400' : 'text-stone-500'
+          'text-stone-500 dark:text-stone-400'
         )}
       >
         {filename} • Markdown Document •{' '}
diff --git a/components/file-preview/previews/pdf-preview.tsx b/components/file-preview/previews/pdf-preview.tsx
index 112d2957..f8ee9185 100644
--- a/components/file-preview/previews/pdf-preview.tsx
+++ b/components/file-preview/previews/pdf-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn } from '@lib/utils';
 import { DownloadIcon, ExternalLinkIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview.pdfPreview');
   const [pdfUrl, setPdfUrl] = useState<string>('');
 
@@ -48,9 +46,8 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
             onClick={handleOpenInNewTab}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300',
+              'dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('openButton')}
           >
@@ -61,9 +58,8 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
             onClick={onDownload}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300',
+              'dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('downloadButton')}
           >
@@ -77,7 +73,7 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
       <div
         className={cn(
           'relative w-full overflow-hidden rounded-md border',
-          isDark ? 'border-stone-700' : 'border-stone-200'
+          'border-stone-200 dark:border-stone-700'
         )}
       >
         {pdfUrl ? (
@@ -91,9 +87,8 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
           <div
             className={cn(
               'flex h-96 items-center justify-center',
-              isDark
-                ? 'bg-stone-800 text-stone-400'
-                : 'bg-stone-50 text-stone-600'
+              'bg-stone-50 text-stone-600',
+              'dark:bg-stone-800 dark:text-stone-400'
             )}
           >
             Loading PDF...
@@ -102,9 +97,7 @@ export const PDFPreview: React.FC<PDFPreviewProps> = ({
       </div>
 
       {/* File info */}
-      <div
-        className={cn('text-xs', isDark ? 'text-stone-400' : 'text-stone-500')}
-      >
+      <div className={cn('text-xs', 'text-stone-500 dark:text-stone-400')}>
         {filename} • PDF Document •{' '}
         {t('fileSize', { size: (content.size / 1024 / 1024).toFixed(2) })}
       </div>
diff --git a/components/file-preview/previews/text-preview.tsx b/components/file-preview/previews/text-preview.tsx
index 53170b89..2af8a986 100644
--- a/components/file-preview/previews/text-preview.tsx
+++ b/components/file-preview/previews/text-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn } from '@lib/utils';
 import { CopyIcon, DownloadIcon } from 'lucide-react';
 
@@ -21,7 +20,6 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
   contentType,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview.textPreview');
   const [text, setText] = useState<string>('');
   const [isLoading, setIsLoading] = useState(true);
@@ -55,23 +53,12 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
   if (isLoading) {
     return (
       <div className="animate-pulse space-y-3">
+        <div className={cn('h-4 rounded', 'bg-stone-200 dark:bg-stone-700')} />
         <div
-          className={cn(
-            'h-4 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
-        />
-        <div
-          className={cn(
-            'h-4 w-3/4 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
+          className={cn('h-4 w-3/4 rounded', 'bg-stone-200 dark:bg-stone-700')}
         />
         <div
-          className={cn(
-            'h-4 w-1/2 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
+          className={cn('h-4 w-1/2 rounded', 'bg-stone-200 dark:bg-stone-700')}
         />
       </div>
     );
@@ -87,9 +74,7 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
             onClick={handleCopy}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('copyButton')}
           >
@@ -100,9 +85,7 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
             onClick={onDownload}
             className={cn(
               'inline-flex items-center space-x-1 rounded px-2 py-1 text-xs font-medium transition-colors',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+              'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
             )}
             title={t('downloadButton')}
           >
@@ -116,15 +99,13 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
       <div
         className={cn(
           'min-h-[60vh] flex-1 overflow-auto rounded-md border p-4',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         <pre
           className={cn(
             'font-mono text-sm break-words whitespace-pre-wrap',
-            isDark ? 'text-stone-200' : 'text-stone-800'
+            'text-stone-800 dark:text-stone-200'
           )}
         >
           {text}
@@ -135,7 +116,7 @@ export const TextPreview: React.FC<TextPreviewProps> = ({
       <div
         className={cn(
           'flex-shrink-0 text-xs',
-          isDark ? 'text-stone-400' : 'text-stone-500'
+          'text-stone-500 dark:text-stone-400'
         )}
       >
         {filename} • {contentType} •{' '}
diff --git a/components/file-preview/previews/video-preview.tsx b/components/file-preview/previews/video-preview.tsx
index e95ad553..98defe92 100644
--- a/components/file-preview/previews/video-preview.tsx
+++ b/components/file-preview/previews/video-preview.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn, formatBytes } from '@lib/utils';
 import { DownloadIcon, VideoIcon } from 'lucide-react';
 
@@ -19,7 +18,6 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
   filename,
   onDownload,
 }) => {
-  const { isDark } = useTheme();
   const t = useTranslations('filePreview');
   const videoRef = useRef<HTMLVideoElement>(null);
   const [videoUrl, setVideoUrl] = useState<string>('');
@@ -77,9 +75,7 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
           onClick={onDownload}
           className={cn(
             'inline-flex items-center space-x-2 rounded-md px-4 py-2 text-sm font-medium transition-colors',
-            isDark
-              ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-              : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+            'bg-stone-200 text-stone-800 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
           )}
         >
           <DownloadIcon className="h-4 w-4" />
@@ -91,28 +87,22 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
       <div
         className={cn(
           'overflow-hidden rounded-lg border',
-          isDark ? 'border-stone-700' : 'border-stone-200'
+          'border-stone-200 dark:border-stone-700'
         )}
       >
         {isLoading && (
           <div
             className={cn(
               'flex h-64 items-center justify-center',
-              isDark ? 'bg-stone-800' : 'bg-stone-100'
+              'bg-stone-100 dark:bg-stone-800'
             )}
           >
             <div className="flex items-center space-x-2">
               <VideoIcon
-                className={cn(
-                  'h-6 w-6',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
-                )}
+                className={cn('h-6 w-6', 'text-stone-500 dark:text-stone-400')}
               />
               <span
-                className={cn(
-                  'text-sm',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
-                )}
+                className={cn('text-sm', 'text-stone-500 dark:text-stone-400')}
               >
                 {t('loading')}
               </span>
@@ -124,21 +114,13 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
           <div
             className={cn(
               'flex h-64 flex-col items-center justify-center space-y-2',
-              isDark ? 'bg-stone-800' : 'bg-stone-100'
+              'bg-stone-100 dark:bg-stone-800'
             )}
           >
             <VideoIcon
-              className={cn(
-                'h-12 w-12',
-                isDark ? 'text-stone-500' : 'text-stone-400'
-              )}
+              className={cn('h-12 w-12', 'text-stone-400 dark:text-stone-500')}
             />
-            <p
-              className={cn(
-                'text-sm',
-                isDark ? 'text-stone-400' : 'text-stone-500'
-              )}
-            >
+            <p className={cn('text-sm', 'text-stone-500 dark:text-stone-400')}>
               {t('video.loadError')}
             </p>
           </div>
@@ -153,7 +135,7 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
             onError={handleVideoError}
             className={cn(
               'max-h-96 w-full object-contain',
-              isDark ? 'bg-stone-900' : 'bg-stone-50',
+              'bg-stone-50 dark:bg-stone-900',
               isLoading || hasError ? 'hidden' : 'block'
             )}
             preload="metadata"
@@ -167,9 +149,7 @@ export const VideoPreview: React.FC<VideoPreviewProps> = ({
       <div
         className={cn(
           'rounded-md border p-4 text-sm',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700 dark:bg-stone-800'
         )}
       >
         <div className="space-y-1">
diff --git a/components/history/history-list.tsx b/components/history/history-list.tsx
index 739526ef..e9d892db 100644
--- a/components/history/history-list.tsx
+++ b/components/history/history-list.tsx
@@ -7,7 +7,6 @@ import {
   DateFormatPresets,
   useDateFormatter,
 } from '@lib/hooks/use-date-formatter';
-import { useTheme } from '@lib/hooks/use-theme';
 import { useDropdownStore } from '@lib/stores/ui/dropdown-store';
 import { Conversation } from '@lib/types/database';
 import { cn } from '@lib/utils';
@@ -76,7 +75,6 @@ export function HistoryList({
   selectedConversations = new Set(),
   onSelectConversation,
 }: HistoryListProps): React.ReactElement {
-  const { isDark } = useTheme();
   const t = useTranslations('history');
   const { formatDate } = useDateFormatter();
 
@@ -198,19 +196,13 @@ export function HistoryList({
           // In selection mode, selected items have different styling
           isSelectionMode &&
             isSelected &&
-            (isDark
-              ? 'border-stone-500 bg-stone-700/40'
-              : 'border-stone-400 bg-stone-100'),
+            'border-stone-400 bg-stone-100 dark:border-stone-500 dark:bg-stone-700/40',
           // Normal hover styling
           !isSelected &&
-            (isDark
-              ? 'border border-stone-600 hover:border-stone-500 hover:bg-stone-700/50'
-              : 'border border-stone-300 hover:border-stone-400 hover:bg-stone-200/70'),
+            'border border-stone-300 hover:border-stone-400 hover:bg-stone-200/70 dark:border-stone-600 dark:hover:border-stone-500 dark:hover:bg-stone-700/50',
           // Selected state border
-          isSelected &&
-            (isDark ? 'border border-stone-500' : 'border border-stone-400'),
-          !isSelected &&
-            (isDark ? 'border border-stone-600' : 'border border-stone-300'),
+          isSelected && 'border border-stone-400 dark:border-stone-500',
+          !isSelected && 'border border-stone-300 dark:border-stone-600',
           'mb-3'
         )}
         onClick={handleItemClick}
@@ -225,12 +217,8 @@ export function HistoryList({
                 'transition-all duration-200 ease-in-out',
                 'hover:scale-110',
                 isSelected
-                  ? isDark
-                    ? 'border-stone-600 bg-stone-600 text-white'
-                    : 'border-stone-500 bg-stone-500 text-white'
-                  : isDark
-                    ? 'border-stone-600 hover:border-stone-500'
-                    : 'border-stone-400 hover:border-stone-500'
+                  ? 'border-stone-500 bg-stone-500 text-white dark:border-stone-600 dark:bg-stone-600'
+                  : 'border-stone-400 hover:border-stone-500 dark:border-stone-600 dark:hover:border-stone-500'
               )}
             >
               {isSelected && (
@@ -257,19 +245,14 @@ export function HistoryList({
             <h3
               className={cn(
                 'truncate font-serif text-base font-medium',
-                isDark ? 'text-stone-100' : 'text-stone-800'
+                'text-stone-800 dark:text-stone-100'
               )}
             >
               {title}
             </h3>
 
             <div className="flex items-center">
-              <span
-                className={cn(
-                  'font-serif text-xs',
-                  isDark ? 'text-stone-500' : 'text-stone-500'
-                )}
-              >
+              <span className={cn('font-serif text-xs text-stone-500')}>
                 {date}
               </span>
 
@@ -297,9 +280,9 @@ export function HistoryList({
                     className={cn(
                       'rounded-md p-1 transition-all duration-200 ease-in-out',
                       'cursor-pointer',
-                      isDark ? 'hover:bg-white/10' : 'hover:bg-black/5',
+                      'hover:bg-black/5 dark:hover:bg-white/10',
                       'hover:scale-110',
-                      isDark ? 'active:bg-white/20' : 'active:bg-black/10',
+                      'active:bg-black/10 dark:active:bg-white/20',
                       'focus-visible:ring-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2'
                     )}
                     data-more-button-id={`history-dropdown-${conversation.id}`}
@@ -313,9 +296,7 @@ export function HistoryList({
                     id={`history-dropdown-${conversation.id}`}
                     minWidth={150}
                     className={cn(
-                      isDark
-                        ? 'border border-stone-700 bg-stone-800'
-                        : 'border border-stone-200 bg-white',
+                      'border border-stone-200 bg-white dark:border-stone-700 dark:bg-stone-800',
                       'overflow-hidden rounded-md shadow-lg' // Add shadow and rounded corners
                     )}
                   >
@@ -344,7 +325,7 @@ export function HistoryList({
           <p
             className={cn(
               'line-clamp-2 font-serif text-sm',
-              isDark ? 'text-stone-400' : 'text-stone-600'
+              'text-stone-600 dark:text-stone-400'
             )}
           >
             {preview}
@@ -362,7 +343,7 @@ export function HistoryList({
         <div
           className={cn(
             'flex h-full flex-col items-center justify-center py-16',
-            isDark ? 'text-stone-400' : 'text-stone-500'
+            'text-stone-500 dark:text-stone-400'
           )}
         >
           {searchQuery ? (
@@ -389,9 +370,7 @@ export function HistoryList({
             <div
               className={cn(
                 'mt-4 flex items-center justify-center border-t py-6',
-                isDark
-                  ? 'border-stone-600 text-stone-500'
-                  : 'border-stone-300 text-stone-500'
+                'border-stone-300 text-stone-500 dark:border-stone-600'
               )}
             >
               <Clock className="mr-2 h-4 w-4" />
diff --git a/components/history/history-selection-bar.tsx b/components/history/history-selection-bar.tsx
index c3539062..01b2b46a 100644
--- a/components/history/history-selection-bar.tsx
+++ b/components/history/history-selection-bar.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { CheckSquare, Square, Trash2, X } from 'lucide-react';
 
@@ -31,7 +30,6 @@ export function HistorySelectionBar({
   onCancelSelection,
   isDeleting = false,
 }: HistorySelectionBarProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('history');
 
   // If not in selection mode and no items are selected, do not display the operation bar
@@ -48,9 +46,7 @@ export function HistorySelectionBar({
         'sticky top-0 z-10 transition-all duration-300 ease-in-out',
         'mb-4 rounded-xl backdrop-blur-sm',
         'bg-gradient-to-r',
-        isDark
-          ? 'border border-stone-600/50 from-stone-800/95 via-stone-800/90 to-stone-800/95 shadow-lg shadow-stone-900/20'
-          : 'border border-stone-200/80 from-stone-50/95 via-white/90 to-stone-50/95 shadow-lg shadow-stone-900/10'
+        'border border-stone-200/80 from-stone-50/95 via-white/90 to-stone-50/95 shadow-lg shadow-stone-900/10 dark:border-stone-600/50 dark:from-stone-800/95 dark:via-stone-800/90 dark:to-stone-800/95 dark:shadow-stone-900/20'
       )}
     >
       <div className="px-6 py-2.5">
@@ -65,9 +61,7 @@ export function HistorySelectionBar({
                 'transition-all duration-200 ease-in-out',
                 'font-serif text-sm font-medium',
                 'hover:scale-105 hover:shadow-md',
-                isDark
-                  ? 'border border-stone-600 text-stone-300 hover:bg-stone-700'
-                  : 'border border-stone-300 text-stone-600 hover:bg-stone-200'
+                'border border-stone-300 text-stone-600 hover:bg-stone-200 dark:border-stone-600 dark:text-stone-300 dark:hover:bg-stone-700'
               )}
               disabled={totalCount === 0}
             >
@@ -84,7 +78,7 @@ export function HistorySelectionBar({
               <div
                 className={cn(
                   'font-serif text-xs',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
+                  'text-stone-500 dark:text-stone-400'
                 )}
               >
                 {t('selected', { count: selectedCount, total: totalCount })}
@@ -105,9 +99,7 @@ export function HistorySelectionBar({
                   'font-serif text-sm font-medium',
                   'hover:scale-105 hover:shadow-lg',
                   isDeleting && 'cursor-not-allowed opacity-50',
-                  isDark
-                    ? 'border border-red-800 bg-red-900/40 text-red-300 shadow-md shadow-red-900/20 hover:bg-red-900/60'
-                    : 'border border-red-300 bg-red-50 text-red-700 shadow-md shadow-red-900/10 hover:bg-red-100'
+                  'border border-red-300 bg-red-50 text-red-700 shadow-md shadow-red-900/10 hover:bg-red-100 dark:border-red-800 dark:bg-red-900/40 dark:text-red-300 dark:shadow-red-900/20 dark:hover:bg-red-900/60'
                 )}
               >
                 <Trash2 className="h-3.5 w-3.5" />
@@ -127,9 +119,7 @@ export function HistorySelectionBar({
                 'transition-all duration-200 ease-in-out',
                 'font-serif text-sm font-medium',
                 'hover:scale-105 hover:shadow-md',
-                isDark
-                  ? 'border border-stone-600 text-stone-400 hover:bg-stone-700'
-                  : 'border border-stone-300 text-stone-500 hover:bg-stone-200'
+                'border border-stone-300 text-stone-500 hover:bg-stone-200 dark:border-stone-600 dark:text-stone-400 dark:hover:bg-stone-700'
               )}
             >
               <X className="h-3.5 w-3.5" />
diff --git a/components/history/index.tsx b/components/history/index.tsx
index 487270d9..057f555c 100644
--- a/components/history/index.tsx
+++ b/components/history/index.tsx
@@ -5,8 +5,6 @@ import { useAllConversations } from '@lib/hooks/use-all-conversations';
 import { useChatInterface } from '@lib/hooks/use-chat-interface';
 import { useChatWidth } from '@lib/hooks/use-chat-width';
 import { conversationEvents } from '@lib/hooks/use-combined-conversations';
-import { useTheme } from '@lib/hooks/use-theme';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { useChatInputStore } from '@lib/stores/chat-input-store';
 import { useChatStore } from '@lib/stores/chat-store';
 import { useChatTransitionStore } from '@lib/stores/chat-transition-store';
@@ -25,8 +23,6 @@ import { HistorySelectionBar } from './history-selection-bar';
 // History conversation page component
 // Display all history conversations, support search function and multi-select delete function
 export function History() {
-  const { isDark } = useTheme();
-  const { colors } = useThemeColors();
   const t = useTranslations('history');
   const [searchQuery, setSearchQuery] = React.useState('');
   const router = useRouter();
@@ -236,7 +232,7 @@ export function History() {
     <div
       className={cn(
         'flex h-full w-full flex-col overflow-hidden',
-        colors.mainBackground.tailwind
+        'bg-white dark:bg-stone-800'
       )}
     >
       {/* Fixed header area - does not scroll */}
@@ -250,7 +246,7 @@ export function History() {
               <h1
                 className={cn(
                   'font-serif text-2xl font-bold',
-                  isDark ? 'text-stone-100' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-100'
                 )}
               >
                 {t('title')}
@@ -260,7 +256,7 @@ export function History() {
               <div
                 className={cn(
                   'mt-1 text-sm',
-                  isDark ? 'text-stone-400' : 'text-stone-600'
+                  'text-stone-600 dark:text-stone-400'
                 )}
               >
                 {total > 0 ? t('totalCount', { total }) : t('noRecords')}
@@ -277,12 +273,8 @@ export function History() {
                     'transition-all duration-200 ease-in-out',
                     'cursor-pointer hover:-translate-y-0.5 hover:shadow-md',
                     isSelectionMode
-                      ? isDark
-                        ? 'border border-stone-500 bg-stone-600 text-white shadow-md hover:bg-stone-500'
-                        : 'border border-stone-400 bg-stone-200 text-stone-800 shadow-md hover:bg-stone-300'
-                      : isDark
-                        ? 'border border-stone-600 bg-stone-700 text-white hover:bg-stone-600'
-                        : 'border border-stone-300 bg-stone-100 text-stone-700 hover:bg-stone-200'
+                      ? 'border border-stone-400 bg-stone-200 text-stone-800 shadow-md hover:bg-stone-300 dark:border-stone-500 dark:bg-stone-600 dark:text-white dark:hover:bg-stone-500'
+                      : 'border border-stone-300 bg-stone-100 text-stone-700 hover:bg-stone-200 dark:border-stone-600 dark:bg-stone-700 dark:text-white dark:hover:bg-stone-600'
                   )}
                 >
                   <Trash2 className="mr-2 h-4 w-4" />
@@ -297,9 +289,8 @@ export function History() {
                   'flex items-center rounded-lg px-3 py-2 font-serif text-sm font-medium',
                   'transition-all duration-200 ease-in-out',
                   'cursor-pointer hover:-translate-y-0.5 hover:shadow-md',
-                  isDark
-                    ? 'border border-stone-600 bg-stone-700 text-white hover:bg-stone-600'
-                    : 'border border-stone-300 bg-stone-100 text-stone-700 hover:bg-stone-200'
+                  'border border-stone-300 bg-stone-100 text-stone-700 hover:bg-stone-200',
+                  'dark:border-stone-600 dark:bg-stone-700 dark:text-white dark:hover:bg-stone-600'
                 )}
               >
                 <Edit className="mr-2 h-4 w-4" />
@@ -319,9 +310,8 @@ export function History() {
             containerClassName="w-full"
             className={cn(
               'py-2', // History specific: py-2 instead of py-2.5
-              isDark
-                ? 'border-stone-700 bg-stone-800 text-stone-200 focus:ring-stone-600 focus:ring-offset-stone-900'
-                : 'border-stone-300 bg-white text-stone-800 focus:ring-stone-400 focus:ring-offset-stone-50'
+              'border-stone-300 bg-white text-stone-800 focus:ring-stone-400 focus:ring-offset-stone-50',
+              'dark:border-stone-700 dark:bg-stone-800 dark:text-stone-200 dark:focus:ring-stone-600 dark:focus:ring-offset-stone-900'
             )}
           />
         </div>
diff --git a/components/mobile/mobile-user-button.tsx b/components/mobile/mobile-user-button.tsx
index de16f3c3..0042ee7b 100644
--- a/components/mobile/mobile-user-button.tsx
+++ b/components/mobile/mobile-user-button.tsx
@@ -3,7 +3,6 @@
 import { LogoutConfirmDialog, UserAvatar } from '@components/ui';
 import { useMobile } from '@lib/hooks/use-mobile';
 import { useProfile } from '@lib/hooks/use-profile';
-import { useTheme } from '@lib/hooks/use-theme';
 import { useSidebarStore } from '@lib/stores/sidebar-store';
 import { cn } from '@lib/utils';
 import { User } from 'lucide-react';
@@ -20,7 +19,6 @@ import { UserBottomSheet } from './ui/user-bottom-sheet';
  * Style consistent with other sidebar buttons
  */
 export function MobileUserButton() {
-  const { isDark } = useTheme();
   const isMobile = useMobile();
   const { isExpanded } = useSidebarStore();
   const [isOpen, setIsOpen] = useState(false);
@@ -70,18 +68,10 @@ export function MobileUserButton() {
           'transition-all duration-200 ease-in-out',
           'cursor-pointer outline-none',
 
-          // Apply different styles based on theme and login status
-          !isDark && [
-            'text-stone-600',
-            'hover:bg-stone-300 hover:shadow-md',
-            isLoggedIn ? '' : 'text-blue-600',
-          ],
-
-          isDark && [
-            'text-gray-200',
-            'hover:bg-stone-600 hover:shadow-md',
-            isLoggedIn ? '' : 'text-blue-400',
-          ]
+          // Apply styles with dark mode support
+          'text-stone-600 dark:text-gray-200',
+          'hover:bg-stone-300 hover:shadow-md dark:hover:bg-stone-600 dark:hover:shadow-md',
+          isLoggedIn ? '' : 'text-blue-600 dark:text-blue-400'
         )}
         aria-label={isLoggedIn ? tNav('openUserMenu') : t('loginRegister')}
       >
@@ -99,9 +89,7 @@ export function MobileUserButton() {
               className={cn(
                 'flex h-8 w-8 items-center justify-center rounded-full',
                 'transition-all duration-200 ease-in-out',
-                isDark
-                  ? 'bg-blue-600/20 text-blue-400'
-                  : 'bg-blue-500/10 text-blue-600'
+                'bg-blue-500/10 text-blue-600 dark:bg-blue-600/20 dark:text-blue-400'
               )}
             >
               <User className="h-4 w-4" />
diff --git a/components/mobile/ui/user-bottom-sheet.tsx b/components/mobile/ui/user-bottom-sheet.tsx
index c0fa683e..ffb5e178 100644
--- a/components/mobile/ui/user-bottom-sheet.tsx
+++ b/components/mobile/ui/user-bottom-sheet.tsx
@@ -2,7 +2,6 @@
 
 import { VersionTag } from '@components/ui';
 import { useProfile } from '@lib/hooks/use-profile';
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { Info, LogOut, Sliders, UserCircle, Wrench } from 'lucide-react';
 
@@ -26,7 +25,6 @@ export function UserBottomSheet({
   isLoggedIn,
   onLogoutClick,
 }: UserBottomSheetProps) {
-  const { isDark } = useTheme();
   const router = useRouter();
   const t = useTranslations('mobile.user');
   const tBottomSheet = useTranslations('mobile.bottomSheet');
@@ -69,13 +67,9 @@ export function UserBottomSheet({
       onClick={onClick}
       className={cn(
         'flex w-full items-center rounded-lg px-4 py-3',
-        isDark
-          ? danger
-            ? 'text-red-400 hover:bg-red-900/30 hover:text-red-300'
-            : 'text-stone-300 hover:bg-stone-700 hover:text-stone-200'
-          : danger
-            ? 'text-red-600 hover:bg-red-50 hover:text-red-700'
-            : 'text-stone-700 hover:bg-stone-100 hover:text-stone-900',
+        danger
+          ? 'text-red-600 hover:bg-red-50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-900/30 dark:hover:text-red-300'
+          : 'text-stone-700 hover:bg-stone-100 hover:text-stone-900 dark:text-stone-300 dark:hover:bg-stone-700 dark:hover:text-stone-200',
         'transition-colors duration-200'
       )}
     >
@@ -100,13 +94,13 @@ export function UserBottomSheet({
           <div
             className={cn(
               'mb-3 rounded-lg px-3 py-2',
-              isDark ? 'bg-stone-700/30' : 'bg-stone-100/80'
+              'bg-stone-100/80 dark:bg-stone-700/30'
             )}
           >
             <div
               className={cn(
                 'font-serif font-medium',
-                isDark ? 'text-white' : 'text-stone-800'
+                'text-stone-800 dark:text-white'
               )}
             >
               {userName}
@@ -114,7 +108,7 @@ export function UserBottomSheet({
             <div
               className={cn(
                 'font-serif text-sm',
-                isDark ? 'text-stone-400' : 'text-stone-500'
+                'text-stone-500 dark:text-stone-400'
               )}
             >
               {userRole}
@@ -124,9 +118,9 @@ export function UserBottomSheet({
           <div
             className={cn(
               'space-y-1 overflow-hidden rounded-lg',
-              isDark ? 'bg-stone-800/50' : 'bg-stone-50',
+              'bg-stone-50 dark:bg-stone-800/50',
               'border',
-              isDark ? 'border-stone-700' : 'border-stone-200',
+              'border-stone-200 dark:border-stone-700',
               'mb-2'
             )}
           >
@@ -164,9 +158,9 @@ export function UserBottomSheet({
           <div
             className={cn(
               'overflow-hidden rounded-lg',
-              isDark ? 'bg-stone-800/50' : 'bg-stone-50',
+              'bg-stone-50 dark:bg-stone-800/50',
               'border',
-              isDark ? 'border-stone-700' : 'border-stone-200'
+              'border-stone-200 dark:border-stone-700'
             )}
           >
             {renderMenuItem(
@@ -182,15 +176,13 @@ export function UserBottomSheet({
           <div
             className={cn(
               'mb-4 rounded-lg px-4 py-4 text-center',
-              isDark
-                ? 'bg-stone-700/50 text-stone-300'
-                : 'bg-stone-100 text-stone-600'
+              'bg-stone-100 text-stone-600 dark:bg-stone-700/50 dark:text-stone-300'
             )}
           >
             <UserCircle
               className={cn(
                 'mx-auto mb-3 h-16 w-16',
-                isDark ? 'text-stone-400' : 'text-stone-500'
+                'text-stone-500 dark:text-stone-400'
               )}
             />
             <p className="font-serif">{t('loginPrompt')}</p>
@@ -200,9 +192,7 @@ export function UserBottomSheet({
             onClick={handleLogin}
             className={cn(
               'w-full rounded-lg px-4 py-3 text-center font-serif font-medium',
-              isDark
-                ? 'bg-blue-600 text-white hover:bg-blue-700'
-                : 'bg-blue-500 text-white hover:bg-blue-600',
+              'bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700',
               'shadow-sm transition-colors duration-200'
             )}
           >
@@ -213,9 +203,7 @@ export function UserBottomSheet({
             onClick={handleRegister}
             className={cn(
               'w-full rounded-lg px-4 py-3 text-center font-serif font-medium',
-              isDark
-                ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                : 'bg-stone-200 text-stone-700 hover:bg-stone-300',
+              'bg-stone-200 text-stone-700 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600',
               'shadow-sm transition-colors duration-200'
             )}
           >
diff --git a/components/text-generation/text-generation-tracker.tsx b/components/text-generation/text-generation-tracker.tsx
index 86ecfaf4..d94d886e 100644
--- a/components/text-generation/text-generation-tracker.tsx
+++ b/components/text-generation/text-generation-tracker.tsx
@@ -8,7 +8,6 @@ import {
 } from '@components/chat/markdown-block';
 import { TooltipWrapper } from '@components/ui/tooltip-wrapper';
 import { UnifiedStatusPanel } from '@components/workflow/workflow-tracker/unified-status-panel';
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import 'katex/dist/katex.min.css';
 import { Check, Copy, Download, FileText, Loader2 } from 'lucide-react';
@@ -51,7 +50,6 @@ export function TextGenerationTracker({
   onRetry,
   onReset,
 }: TextGenerationTrackerProps) {
-  const { isDark } = useTheme();
   const markdownContainerRef = useRef<HTMLDivElement>(null);
   const [isCopied, setIsCopied] = useState(false);
   const t = useTranslations('pages.textGeneration');
@@ -205,13 +203,13 @@ export function TextGenerationTracker({
               <div
                 className={cn(
                   'mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 border-dashed',
-                  isDark ? 'border-stone-600' : 'border-stone-300'
+                  'border-stone-300 dark:border-stone-600'
                 )}
               >
                 <FileText
                   className={cn(
                     'h-6 w-6',
-                    isDark ? 'text-stone-400' : 'text-stone-500'
+                    'text-stone-500 dark:text-stone-400'
                   )}
                 />
               </div>
@@ -219,7 +217,7 @@ export function TextGenerationTracker({
                 <h3
                   className={cn(
                     'font-serif text-lg font-semibold',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {t('emptyState.title')}
@@ -227,7 +225,7 @@ export function TextGenerationTracker({
                 <p
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 >
                   {t('emptyState.description')}
@@ -244,7 +242,7 @@ export function TextGenerationTracker({
                 <h3
                   className={cn(
                     'font-serif text-lg font-semibold',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {isExecuting || isStreaming
@@ -269,13 +267,7 @@ export function TextGenerationTracker({
                       onClick={handleCopyText}
                       className={cn(
                         'flex items-center justify-center rounded-lg p-2 transition-colors',
-                        isDark ? 'text-stone-400' : 'text-stone-500',
-                        isDark
-                          ? 'hover:text-stone-300'
-                          : 'hover:text-stone-700',
-                        isDark
-                          ? 'hover:bg-stone-600/40'
-                          : 'hover:bg-stone-300/40',
+                        'text-stone-500 hover:bg-stone-300/40 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-600/40 dark:hover:text-stone-300',
                         'focus:outline-none'
                       )}
                       style={{ transform: 'translateZ(0)' }}
@@ -304,13 +296,7 @@ export function TextGenerationTracker({
                       onClick={handleDownloadText}
                       className={cn(
                         'flex items-center justify-center rounded-lg p-2 transition-colors',
-                        isDark ? 'text-stone-400' : 'text-stone-500',
-                        isDark
-                          ? 'hover:text-stone-300'
-                          : 'hover:text-stone-700',
-                        isDark
-                          ? 'hover:bg-stone-600/40'
-                          : 'hover:bg-stone-300/40',
+                        'text-stone-500 hover:bg-stone-300/40 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-600/40 dark:hover:text-stone-300',
                         'focus:outline-none'
                       )}
                       style={{ transform: 'translateZ(0)' }}
@@ -330,23 +316,21 @@ export function TextGenerationTracker({
                 <div
                   className={cn(
                     'absolute inset-0 flex items-center justify-center rounded-lg border-2 border-dashed',
-                    isDark
-                      ? 'border-stone-600 bg-stone-800/50'
-                      : 'border-stone-300 bg-stone-50'
+                    'border-stone-300 bg-stone-50 dark:border-stone-600 dark:bg-stone-800/50'
                   )}
                 >
                   <div className="flex items-center gap-3">
                     <Loader2
                       className={cn(
                         'h-5 w-5 animate-spin',
-                        isDark ? 'text-stone-400' : 'text-stone-600'
+                        'text-stone-600 dark:text-stone-400'
                       )}
                     />
                     <div>
                       <div
                         className={cn(
                           'font-serif font-medium',
-                          isDark ? 'text-stone-200' : 'text-stone-800'
+                          'text-stone-800 dark:text-stone-200'
                         )}
                       >
                         {t('loadingState.title')}
@@ -354,7 +338,7 @@ export function TextGenerationTracker({
                       <div
                         className={cn(
                           'font-serif text-sm',
-                          isDark ? 'text-stone-400' : 'text-stone-600'
+                          'text-stone-600 dark:text-stone-400'
                         )}
                       >
                         {t('loadingState.description')}
@@ -370,9 +354,7 @@ export function TextGenerationTracker({
                     'absolute inset-0 overflow-y-auto overscroll-contain rounded-lg border p-4 font-serif',
                     'focus:border-transparent focus:ring-2 focus:ring-stone-500 focus:outline-none',
                     'assistant-message-content', // Reuse the style class of the assistant message
-                    isDark
-                      ? 'border-stone-600 bg-stone-800 text-stone-200'
-                      : 'border-stone-300 bg-white text-stone-900'
+                    'border-stone-300 bg-white text-stone-900 dark:border-stone-600 dark:bg-stone-800 dark:text-stone-200'
                   )}
                   style={{
                     scrollBehavior: 'auto',
@@ -390,7 +372,7 @@ export function TextGenerationTracker({
                     <div
                       className={cn(
                         'flex h-full items-center justify-center font-serif',
-                        isDark ? 'text-stone-400' : 'text-stone-500'
+                        'text-stone-500 dark:text-stone-400'
                       )}
                     >
                       {isExecuting
@@ -406,9 +388,7 @@ export function TextGenerationTracker({
                 <div
                   className={cn(
                     'absolute right-4 bottom-4 flex items-center gap-2 rounded-full px-3 py-1 text-xs',
-                    isDark
-                      ? 'bg-stone-700 text-stone-300'
-                      : 'bg-stone-100 text-stone-600'
+                    'bg-stone-100 text-stone-600 dark:bg-stone-700 dark:text-stone-300'
                   )}
                 >
                   <div className="h-2 w-2 animate-pulse rounded-full bg-green-500" />
diff --git a/components/text-generation/text-generation-viewer.tsx b/components/text-generation/text-generation-viewer.tsx
index a5769f00..11bde9af 100644
--- a/components/text-generation/text-generation-viewer.tsx
+++ b/components/text-generation/text-generation-viewer.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
+import type { AppExecution } from '@lib/types/database';
 import { cn } from '@lib/utils';
 import {
   CheckCircle,
@@ -23,7 +23,7 @@ interface TextGenerationViewerProps {
   isStreaming: boolean;
   progress: number;
   generatedText: string;
-  currentExecution: any;
+  currentExecution: AppExecution | null;
   onStop?: () => void;
   onRetry?: () => void;
   onReset?: () => void;
@@ -49,7 +49,6 @@ export function TextGenerationViewer({
   onRetry,
   onReset,
 }: TextGenerationViewerProps) {
-  const { isDark } = useTheme();
   const [copied, setCopied] = useState(false);
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
   const t = useTranslations('pages.textGeneration');
@@ -140,9 +139,8 @@ export function TextGenerationViewer({
       <div
         className={cn(
           'flex-shrink-0 border-b p-4',
-          isDark
-            ? 'border-stone-700 bg-stone-900/50'
-            : 'border-stone-200 bg-stone-50/50'
+          'border-stone-200 bg-stone-50/50',
+          'dark:border-stone-700 dark:bg-stone-900/50'
         )}
       >
         <div className="flex items-center justify-between">
@@ -153,7 +151,7 @@ export function TextGenerationViewer({
               <div
                 className={cn(
                   'font-serif font-medium',
-                  isDark ? 'text-stone-200' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-200'
                 )}
               >
                 {statusInfo.text}
@@ -162,7 +160,7 @@ export function TextGenerationViewer({
                 <div
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 >
                   {t('progress', { percent: Math.round(progress) })}
@@ -180,9 +178,8 @@ export function TextGenerationViewer({
                   onClick={handleCopyText}
                   className={cn(
                     'rounded-lg p-2 transition-colors',
-                    isDark
-                      ? 'text-stone-300 hover:bg-stone-700 hover:text-stone-200'
-                      : 'text-stone-600 hover:bg-stone-200 hover:text-stone-800'
+                    'text-stone-600 hover:bg-stone-200 hover:text-stone-800',
+                    'dark:text-stone-300 dark:hover:bg-stone-700 dark:hover:text-stone-200'
                   )}
                   title={copied ? t('buttons.copied') : t('buttons.copy')}
                 >
@@ -193,9 +190,8 @@ export function TextGenerationViewer({
                   onClick={handleDownloadText}
                   className={cn(
                     'rounded-lg p-2 transition-colors',
-                    isDark
-                      ? 'text-stone-300 hover:bg-stone-700 hover:text-stone-200'
-                      : 'text-stone-600 hover:bg-stone-200 hover:text-stone-800'
+                    'text-stone-600 hover:bg-stone-200 hover:text-stone-800',
+                    'dark:text-stone-300 dark:hover:bg-stone-700 dark:hover:text-stone-200'
                   )}
                   title={t('buttons.download')}
                 >
@@ -238,9 +234,8 @@ export function TextGenerationViewer({
                 onClick={onReset}
                 className={cn(
                   'rounded-lg px-3 py-2 font-serif transition-colors',
-                  isDark
-                    ? 'bg-stone-700 text-stone-200 hover:bg-stone-600'
-                    : 'bg-stone-200 text-stone-800 hover:bg-stone-300'
+                  'bg-stone-200 text-stone-800 hover:bg-stone-300',
+                  'dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600'
                 )}
               >
                 <RotateCcw className="mr-1 h-4 w-4" />
@@ -256,7 +251,7 @@ export function TextGenerationViewer({
             <div
               className={cn(
                 'h-2 w-full overflow-hidden rounded-full',
-                isDark ? 'bg-stone-700' : 'bg-stone-200'
+                'bg-stone-200 dark:bg-stone-700'
               )}
             >
               <div
@@ -277,13 +272,13 @@ export function TextGenerationViewer({
               <div
                 className={cn(
                   'mx-auto flex h-16 w-16 items-center justify-center rounded-full border-2 border-dashed',
-                  isDark ? 'border-stone-600' : 'border-stone-300'
+                  'border-stone-300 dark:border-stone-600'
                 )}
               >
                 <FileText
                   className={cn(
                     'h-6 w-6',
-                    isDark ? 'text-stone-400' : 'text-stone-500'
+                    'text-stone-500 dark:text-stone-400'
                   )}
                 />
               </div>
@@ -291,7 +286,7 @@ export function TextGenerationViewer({
                 <h3
                   className={cn(
                     'font-serif text-lg font-semibold',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {t('emptyState.title')}
@@ -299,7 +294,7 @@ export function TextGenerationViewer({
                 <p
                   className={cn(
                     'max-w-md font-serif text-sm',
-                    isDark ? 'text-stone-400' : 'text-stone-600'
+                    'text-stone-600 dark:text-stone-400'
                   )}
                 >
                   {t('emptyState.description')}
@@ -317,7 +312,7 @@ export function TextGenerationViewer({
               className={cn(
                 'h-full w-full resize-none border-0 bg-transparent focus:outline-none',
                 'font-serif text-base leading-relaxed',
-                isDark ? 'text-stone-200' : 'text-stone-800'
+                'text-stone-800 dark:text-stone-200'
               )}
               placeholder={
                 isExecuting
@@ -332,9 +327,8 @@ export function TextGenerationViewer({
                 className={cn(
                   'absolute right-6 bottom-6 flex items-center gap-2 rounded-lg px-3 py-2',
                   'border backdrop-blur-sm',
-                  isDark
-                    ? 'border-stone-600 bg-stone-800/80 text-stone-300'
-                    : 'border-stone-300 bg-white/80 text-stone-700'
+                  'border-stone-300 bg-white/80 text-stone-700',
+                  'dark:border-stone-600 dark:bg-stone-800/80 dark:text-stone-300'
                 )}
               >
                 <div className="flex space-x-1">
@@ -374,17 +368,13 @@ export function TextGenerationViewer({
         <div
           className={cn(
             'flex-shrink-0 border-t px-6 py-3',
-            isDark
-              ? 'border-stone-700 bg-stone-900/50'
-              : 'border-stone-200 bg-stone-50/50'
+            'border-stone-200 bg-stone-50/50',
+            'dark:border-stone-700 dark:bg-stone-900/50'
           )}
         >
           <div className="flex items-center justify-between text-sm">
             <div
-              className={cn(
-                'font-serif',
-                isDark ? 'text-stone-400' : 'text-stone-600'
-              )}
+              className={cn('font-serif', 'text-stone-600 dark:text-stone-400')}
             >
               {t('stats.characters', { count: generatedText.length })},{' '}
               {t('stats.words', {
@@ -398,7 +388,7 @@ export function TextGenerationViewer({
               <div
                 className={cn(
                   'font-serif',
-                  isDark ? 'text-stone-400' : 'text-stone-600'
+                  'text-stone-600 dark:text-stone-400'
                 )}
               >
                 {t('stats.tokensUsed', {
diff --git a/components/workflow/execution-history/index.tsx b/components/workflow/execution-history/index.tsx
index a180db32..32b0860d 100644
--- a/components/workflow/execution-history/index.tsx
+++ b/components/workflow/execution-history/index.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useProfile } from '@lib/hooks/use-profile';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { useWorkflowExecutionStore } from '@lib/stores/workflow-execution-store';
 import type { AppExecution } from '@lib/types/database';
 import { cn } from '@lib/utils';
@@ -41,7 +40,6 @@ export function ExecutionHistory({
 }: ExecutionHistoryProps) {
   const { profile } = useProfile();
   const userId = profile?.id;
-  const { colors, isDark } = useThemeColors();
   const t = useTranslations('pages.workflow.history');
   const [isLoading, setIsLoading] = useState(true);
   const [isVisible, setIsVisible] = useState(false);
@@ -345,7 +343,7 @@ export function ExecutionHistory({
       className={cn(
         'relative flex h-full flex-col overflow-hidden',
         // --- Use the same background color as the page ---
-        isDark ? 'bg-stone-950' : 'bg-stone-50',
+        'bg-stone-50 dark:bg-stone-950',
         // --- Animation effect ---
         'transition-all duration-300 ease-in-out',
         isVisible ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0',
@@ -358,7 +356,7 @@ export function ExecutionHistory({
         <div
           className={cn(
             'flex-shrink-0 border-b p-3',
-            isDark ? 'border-stone-700/50' : 'border-stone-300/50',
+            'border-stone-300/50 dark:border-stone-700/50',
             // --- Header animation: slide in from above ---
             'transition-all delay-100 duration-300 ease-out',
             isVisible ? 'translate-y-0 opacity-100' : '-translate-y-4 opacity-0'
@@ -369,14 +367,14 @@ export function ExecutionHistory({
               <History
                 className={cn(
                   'h-4 w-4 transition-transform duration-300',
-                  isDark ? 'text-stone-400' : 'text-stone-600',
+                  'text-stone-600 dark:text-stone-400',
                   isVisible ? 'rotate-0' : 'rotate-180'
                 )}
               />
               <h2
                 className={cn(
                   'font-serif text-base font-semibold',
-                  colors.mainText.tailwind
+                  'text-stone-900 dark:text-gray-100'
                 )}
               >
                 {t('title')}
@@ -386,9 +384,7 @@ export function ExecutionHistory({
                 <span
                   className={cn(
                     'rounded-md px-2 py-1 font-serif text-sm',
-                    isDark
-                      ? 'bg-stone-700 text-stone-300'
-                      : 'bg-stone-100 text-stone-600'
+                    'bg-stone-100 text-stone-600 dark:bg-stone-700 dark:text-stone-300'
                   )}
                 >
                   {t('selected', { count: selectedIds.size })}
@@ -404,9 +400,7 @@ export function ExecutionHistory({
                   className={cn(
                     'rounded-md p-1.5 transition-all duration-200',
                     'hover:scale-110 active:scale-95',
-                    isDark
-                      ? 'text-stone-400 hover:bg-stone-700/50 hover:text-stone-300'
-                      : 'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700'
+                    'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700/50 dark:hover:text-stone-300'
                   )}
                   title={t('batchDelete')}
                 >
@@ -423,9 +417,7 @@ export function ExecutionHistory({
                       'hover:scale-110 active:scale-95',
                       selectedIds.size === 0 || isDeleting
                         ? 'cursor-not-allowed opacity-50'
-                        : isDark
-                          ? 'text-red-400 hover:bg-red-700/50 hover:text-red-300'
-                          : 'text-red-600 hover:bg-red-100/50 hover:text-red-700'
+                        : 'text-red-600 hover:bg-red-100/50 hover:text-red-700 dark:text-red-400 dark:hover:bg-red-700/50 dark:hover:text-red-300'
                     )}
                     title={t('deleteSelected', { count: selectedIds.size })}
                   >
@@ -445,9 +437,7 @@ export function ExecutionHistory({
                     className={cn(
                       'rounded-md p-1.5 transition-all duration-200',
                       'hover:scale-110 active:scale-95',
-                      isDark
-                        ? 'text-stone-400 hover:bg-stone-700/50 hover:text-stone-300'
-                        : 'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700'
+                      'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700/50 dark:hover:text-stone-300'
                     )}
                     title={t('cancelSelection')}
                   >
@@ -463,9 +453,7 @@ export function ExecutionHistory({
                   className={cn(
                     'rounded-md p-1.5 transition-all duration-200',
                     'hover:scale-110 active:scale-95',
-                    isDark
-                      ? 'text-stone-400 hover:bg-stone-700/50 hover:text-stone-300'
-                      : 'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700'
+                    'text-stone-600 hover:bg-stone-200/50 hover:text-stone-700 dark:text-stone-400 dark:hover:bg-stone-700/50 dark:hover:text-stone-300'
                   )}
                 >
                   <X className="h-4 w-4" />
@@ -481,9 +469,7 @@ export function ExecutionHistory({
             'flex-1 overflow-x-hidden overflow-y-auto',
             // --- Custom scrollbar style ---
             'scrollbar-thin',
-            isDark
-              ? 'scrollbar-track-stone-800 scrollbar-thumb-stone-600 hover:scrollbar-thumb-stone-500'
-              : 'scrollbar-track-stone-100 scrollbar-thumb-stone-300 hover:scrollbar-thumb-stone-400',
+            'scrollbar-track-stone-100 scrollbar-thumb-stone-300 hover:scrollbar-thumb-stone-400 dark:scrollbar-track-stone-800 dark:scrollbar-thumb-stone-600 dark:hover:scrollbar-thumb-stone-500',
             // --- List animation: slide in from below ---
             'transition-all delay-200 duration-300 ease-out',
             isVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0'
@@ -495,14 +481,14 @@ export function ExecutionHistory({
                 <Loader2
                   className={cn(
                     'h-4 w-4 animate-spin transition-all duration-300',
-                    isDark ? 'text-stone-500' : 'text-stone-500',
+                    'text-stone-500',
                     isVisible ? 'scale-100' : 'scale-75'
                   )}
                 />
                 <div
                   className={cn(
                     'font-serif text-sm transition-all duration-300',
-                    isDark ? 'text-stone-500' : 'text-stone-500',
+                    'text-stone-500',
                     isVisible ? 'opacity-100' : 'opacity-0'
                   )}
                 >
@@ -515,7 +501,7 @@ export function ExecutionHistory({
               <div
                 className={cn(
                   'font-serif text-sm transition-all duration-300',
-                  isDark ? 'text-stone-500' : 'text-stone-500',
+                  'text-stone-500',
                   isVisible
                     ? 'translate-y-0 opacity-100'
                     : 'translate-y-2 opacity-0'
diff --git a/components/workflow/workflow-tracker/execution-bar.tsx b/components/workflow/workflow-tracker/execution-bar.tsx
index 0d3f6896..a2a2bcd0 100644
--- a/components/workflow/workflow-tracker/execution-bar.tsx
+++ b/components/workflow/workflow-tracker/execution-bar.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import type {
   WorkflowIteration,
   WorkflowLoop,
@@ -34,7 +33,6 @@ interface ExecutionBarProps {
  * - Hover effect and interaction
  */
 export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.workflow.nodeStatus');
   const tTypes = useTranslations('pages.workflow.nodeTypes');
   const tDetails = useTranslations('pages.workflow.iterationDetails');
@@ -96,18 +94,12 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
     // Set color based on status
     const colorClass =
       node.status === 'running'
-        ? isDark
-          ? 'text-stone-400'
-          : 'text-stone-600'
+        ? 'text-stone-600 dark:text-stone-400'
         : node.status === 'completed'
-          ? isDark
-            ? 'text-stone-400'
-            : 'text-stone-600'
+          ? 'text-stone-600 dark:text-stone-400'
           : node.status === 'failed'
             ? 'text-red-500'
-            : isDark
-              ? 'text-stone-500'
-              : 'text-stone-400';
+            : 'text-stone-400 dark:text-stone-500';
 
     return <div className={cn(colorClass)}>{icon}</div>;
   };
@@ -226,7 +218,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
             // Use the corresponding indicator bar style
             node.isInIteration ? 'iteration-node' : 'loop-node',
             // Slight background color distinction
-            isDark ? 'bg-stone-800/20' : 'bg-stone-50/40'
+            'bg-stone-50/40 dark:bg-stone-800/20'
           )
         : '';
 
@@ -236,37 +228,27 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
       case 'running':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-600 bg-stone-700/50 shadow-lg shadow-stone-900/30'
-            : 'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50'
+          'border-stone-300 bg-stone-200/50 shadow-lg shadow-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50 dark:shadow-stone-900/30'
         );
       case 'completed':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-500 bg-stone-600/30'
-            : 'border-stone-300 bg-stone-100'
+          'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
         );
       case 'failed':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-red-700/50 bg-red-900/20'
-            : 'border-red-200 bg-red-50'
+          'border-red-200 bg-red-50 dark:border-red-700/50 dark:bg-red-900/20'
         );
       case 'pending':
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
         );
       default:
         return cn(
           combinedBaseStyles,
-          isDark
-            ? 'border-stone-700/50 bg-stone-800/50'
-            : 'border-stone-200 bg-stone-50'
+          'border-stone-200 bg-stone-50 dark:border-stone-700/50 dark:bg-stone-800/50'
         );
     }
   };
@@ -306,7 +288,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               <span
                 className={cn(
                   'truncate font-serif text-sm font-medium',
-                  isDark ? 'text-stone-200' : 'text-stone-800'
+                  'text-stone-800 dark:text-stone-200'
                 )}
               >
                 {getNodeTitle()}
@@ -320,7 +302,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'rounded-full bg-stone-200 px-2 py-0.5 font-serif text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {(node.currentIteration || 0) + 1}/{node.totalIterations}
@@ -332,7 +314,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'rounded-full bg-stone-200 px-2 py-0.5 font-serif text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {(node.currentLoop || 0) + 1}/{node.maxLoops}
@@ -344,7 +326,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'rounded-full bg-stone-200 px-2 py-0.5 font-serif text-xs text-stone-700',
-                    isDark && 'bg-stone-700/50 text-stone-300'
+                    'dark:bg-stone-700/50 dark:text-stone-300'
                   )}
                 >
                   {node.completedBranches || 0}/{node.totalBranches}
@@ -355,20 +337,12 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 className={cn(
                   'rounded-full px-2 py-0.5 font-serif text-xs',
                   node.status === 'running'
-                    ? isDark
-                      ? 'bg-stone-600/40 text-stone-200'
-                      : 'bg-stone-300/60 text-stone-700'
+                    ? 'bg-stone-300/60 text-stone-700 dark:bg-stone-600/40 dark:text-stone-200'
                     : node.status === 'completed'
-                      ? isDark
-                        ? 'bg-stone-500/40 text-stone-100'
-                        : 'bg-stone-200 text-stone-800'
+                      ? 'bg-stone-200 text-stone-800 dark:bg-stone-500/40 dark:text-stone-100'
                       : node.status === 'failed'
-                        ? isDark
-                          ? 'bg-red-700/30 text-red-200'
-                          : 'bg-red-100 text-red-700'
-                        : isDark
-                          ? 'bg-stone-700/50 text-stone-400'
-                          : 'bg-stone-200/80 text-stone-600'
+                        ? 'bg-red-100 text-red-700 dark:bg-red-700/30 dark:text-red-200'
+                        : 'bg-stone-200/80 text-stone-600 dark:bg-stone-700/50 dark:text-stone-400'
                 )}
               >
                 {getStatusText()}
@@ -384,7 +358,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               <div
                 className={cn(
                   'font-serif text-xs',
-                  isDark ? 'text-stone-400' : 'text-stone-500'
+                  'text-stone-500 dark:text-stone-400'
                 )}
               >
                 {formatTime(elapsedTime)}
@@ -401,15 +375,11 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               key={iteration.id}
               className={cn(
                 'iteration-node relative ml-6 pl-4',
-                isDark ? 'bg-stone-800/30' : 'bg-stone-50/30',
+                'bg-stone-50/30 dark:bg-stone-800/30',
                 'flex items-center gap-3 rounded-md border px-3 py-2 font-serif transition-all duration-300',
                 iteration.status === 'running'
-                  ? isDark
-                    ? 'border-stone-600 bg-stone-700/50'
-                    : 'border-stone-300 bg-stone-200/50'
-                  : isDark
-                    ? 'border-stone-500 bg-stone-600/30'
-                    : 'border-stone-300 bg-stone-100'
+                  ? 'border-stone-300 bg-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50'
+                  : 'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
               )}
             >
               <div className="flex-shrink-0">
@@ -417,14 +387,14 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <Loader2
                     className={cn(
                       'h-3 w-3 animate-spin',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : iteration.status === 'completed' ? (
                   <CheckCircle
                     className={cn(
                       'h-3 w-3',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : (
@@ -436,7 +406,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {tDetails('roundIteration', { round: iteration.index + 1 })}
@@ -448,7 +418,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <span
                     className={cn(
                       'font-serif text-xs',
-                      isDark ? 'text-stone-400' : 'text-stone-500'
+                      'text-stone-500 dark:text-stone-400'
                     )}
                   >
                     {formatTime(iteration.endTime - iteration.startTime)}
@@ -468,15 +438,11 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               key={loop.id}
               className={cn(
                 'loop-node relative ml-6 pl-4',
-                isDark ? 'bg-stone-800/30' : 'bg-stone-50/30',
+                'bg-stone-50/30 dark:bg-stone-800/30',
                 'flex items-center gap-3 rounded-md border px-3 py-2 font-serif transition-all duration-300',
                 loop.status === 'running'
-                  ? isDark
-                    ? 'border-stone-600 bg-stone-700/50'
-                    : 'border-stone-300 bg-stone-200/50'
-                  : isDark
-                    ? 'border-stone-500 bg-stone-600/30'
-                    : 'border-stone-300 bg-stone-100'
+                  ? 'border-stone-300 bg-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50'
+                  : 'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
               )}
             >
               <div className="flex-shrink-0">
@@ -484,14 +450,14 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <Loader2
                     className={cn(
                       'h-3 w-3 animate-spin',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : loop.status === 'completed' ? (
                   <CheckCircle
                     className={cn(
                       'h-3 w-3',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : (
@@ -503,7 +469,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {tDetails('roundLoop', { round: loop.index + 1 })}
@@ -515,7 +481,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <span
                     className={cn(
                       'font-serif text-xs',
-                      isDark ? 'text-stone-400' : 'text-stone-500'
+                      'text-stone-500 dark:text-stone-400'
                     )}
                   >
                     {formatTime(loop.endTime - loop.startTime)}
@@ -535,15 +501,11 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
               key={branch.id}
               className={cn(
                 'iteration-node relative ml-6 pl-4',
-                isDark ? 'bg-stone-800/30' : 'bg-stone-50/30',
+                'bg-stone-50/30 dark:bg-stone-800/30',
                 'flex items-center gap-3 rounded-md border px-3 py-2 font-serif transition-all duration-300',
                 branch.status === 'running'
-                  ? isDark
-                    ? 'border-stone-600 bg-stone-700/50'
-                    : 'border-stone-300 bg-stone-200/50'
-                  : isDark
-                    ? 'border-stone-500 bg-stone-600/30'
-                    : 'border-stone-300 bg-stone-100'
+                  ? 'border-stone-300 bg-stone-200/50 dark:border-stone-600 dark:bg-stone-700/50'
+                  : 'border-stone-300 bg-stone-100 dark:border-stone-500 dark:bg-stone-600/30'
               )}
             >
               <div className="flex-shrink-0">
@@ -551,14 +513,14 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <Loader2
                     className={cn(
                       'h-3 w-3 animate-spin',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : branch.status === 'completed' ? (
                   <CheckCircle
                     className={cn(
                       'h-3 w-3',
-                      isDark ? 'text-stone-400' : 'text-stone-600'
+                      'text-stone-600 dark:text-stone-400'
                     )}
                   />
                 ) : (
@@ -570,7 +532,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                 <span
                   className={cn(
                     'font-serif text-sm',
-                    isDark ? 'text-stone-200' : 'text-stone-800'
+                    'text-stone-800 dark:text-stone-200'
                   )}
                 >
                   {branch.name}
@@ -582,7 +544,7 @@ export function ExecutionBar({ node, index, delay = 0 }: ExecutionBarProps) {
                   <span
                     className={cn(
                       'font-serif text-xs',
-                      isDark ? 'text-stone-400' : 'text-stone-500'
+                      'text-stone-500 dark:text-stone-400'
                     )}
                   >
                     {formatTime(branch.endTime - branch.startTime)}
diff --git a/lib/stores/api-config-store.ts b/lib/stores/api-config-store.ts
index b7d0e248..a60281a9 100644
--- a/lib/stores/api-config-store.ts
+++ b/lib/stores/api-config-store.ts
@@ -509,10 +509,7 @@ export const useApiConfigStore = create<ApiConfigState>((set, get) => ({
           base_url: newApiUrl,
         });
 
-        const updatedProvider = handleResult(
-          updatedProviderResult,
-          'Update Dify provider'
-        );
+        handleResult(updatedProviderResult, 'Update Dify provider');
 
         // update local state
         set({
@@ -580,10 +577,7 @@ export const useApiConfigStore = create<ApiConfigState>((set, get) => ({
             true // mark the key as encrypted
           );
 
-          const updatedKey = handleResult(
-            updatedKeyResult,
-            'Update default API key'
-          );
+          handleResult(updatedKeyResult, 'Update default API key');
 
           // update local state
           set({