refactor: remove isDark conditional logic with Tailwind dark: prefix and optimize images (iflabx#226)

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

app/apps/agent/[instanceId]/page.tsx

@@ -16,10 +16,8 @@ import {
 } from '@lib/hooks';
 import { useCurrentApp } from '@lib/hooks/use-current-app';
 import { useProfile } from '@lib/hooks/use-profile';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import type { ChatUploadFile } from '@lib/services/dify/types';
 import { useAppListStore } from '@lib/stores/app-list-store';
-import { useChatInputStore } from '@lib/stores/chat-input-store';
 import { useChatLayoutStore } from '@lib/stores/chat-layout-store';
 import { useChatStore } from '@lib/stores/chat-store';
 import { useSidebarStore } from '@lib/stores/sidebar-store';
@@ -32,7 +30,6 @@ import { useTranslations } from 'next-intl';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 
 export default function AppDetailPage() {
-  const { colors, isDark } = useThemeColors();
   const { widthClass, paddingClass } = useChatWidth();
   const router = useRouter();
   const params = useParams();
@@ -100,12 +97,6 @@ export default function AppDetailPage() {
   // get current app instance data
   const currentApp = apps.find(app => app.instance_id === instanceId);
 
-  // theme synchronization: ensure input box style follows theme changes
-  const setDarkMode = useChatInputStore(state => state.setDarkMode);
-  useEffect(() => {
-    setDarkMode(isDark);
-  }, [isDark, setDarkMode]);
-
   // useLayoutEffect ensures immediate cleanup of state when switching routes
   // this executes earlier than useEffect, allowing state to be cleared before rendering, avoiding display of incorrect content
   const { clearConversationState } = useChatInterface();
@@ -301,7 +292,7 @@ export default function AppDetailPage() {
       <div
         className={cn(
           'relative flex h-full w-full flex-col',
-          colors.mainBackground.tailwind,
+          'bg-stone-100 dark:bg-stone-800',
           'items-center justify-center'
         )}
       >
@@ -354,7 +345,7 @@ export default function AppDetailPage() {
       <div
         className={cn(
           'relative flex h-full w-full flex-col',
-          colors.mainBackground.tailwind,
+          'bg-stone-100 dark:bg-stone-800',
           'items-center justify-center'
         )}
       >
@@ -381,8 +372,8 @@ export default function AppDetailPage() {
     <div
       className={cn(
         'relative flex h-full w-full flex-col',
-        colors.mainBackground.tailwind,
-        colors.mainText.tailwind
+        'bg-stone-100 dark:bg-stone-800',
+        'text-stone-900 dark:text-gray-100'
       )}
     >
       <div

app/apps/chatbot/[instanceId]/page.tsx

@@ -16,10 +16,8 @@ import {
 } from '@lib/hooks';
 import { useCurrentApp } from '@lib/hooks/use-current-app';
 import { useProfile } from '@lib/hooks/use-profile';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import type { ChatUploadFile } from '@lib/services/dify/types';
 import { useAppListStore } from '@lib/stores/app-list-store';
-import { useChatInputStore } from '@lib/stores/chat-input-store';
 import { useChatLayoutStore } from '@lib/stores/chat-layout-store';
 import { useChatStore } from '@lib/stores/chat-store';
 import { useSidebarStore } from '@lib/stores/sidebar-store';
@@ -32,7 +30,6 @@ import { useTranslations } from 'next-intl';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 
 export default function AppDetailPage() {
-  const { colors, isDark } = useThemeColors();
   const { widthClass, paddingClass } = useChatWidth();
   const router = useRouter();
   const params = useParams();
@@ -100,12 +97,6 @@ export default function AppDetailPage() {
   // get current app instance data
   const currentApp = apps.find(app => app.instance_id === instanceId);
 
-  // theme sync: ensure input box style follows theme change
-  const setDarkMode = useChatInputStore(state => state.setDarkMode);
-  useEffect(() => {
-    setDarkMode(isDark);
-  }, [isDark, setDarkMode]);
-
   const { clearConversationState } = useChatInterface();
 
   useLayoutEffect(() => {
@@ -274,7 +265,7 @@ export default function AppDetailPage() {
       <div
         className={cn(
           'relative flex h-full w-full flex-col',
-          colors.mainBackground.tailwind,
+          'bg-stone-100 dark:bg-stone-800',
           'items-center justify-center'
         )}
       >
@@ -327,7 +318,7 @@ export default function AppDetailPage() {
       <div
         className={cn(
           'relative flex h-full w-full flex-col',
-          colors.mainBackground.tailwind,
+          'bg-stone-100 dark:bg-stone-800',
           'items-center justify-center'
         )}
       >
@@ -354,8 +345,8 @@ export default function AppDetailPage() {
     <div
       className={cn(
         'relative flex h-full w-full flex-col',
-        colors.mainBackground.tailwind,
-        colors.mainText.tailwind
+        'bg-stone-100 dark:bg-stone-800',
+        'text-stone-900 dark:text-gray-100'
       )}
     >
       {/* Main content area with simplified layout */}

app/apps/chatflow/[instanceId]/page.tsx

@@ -13,10 +13,8 @@ import { useChatInterface, useChatScroll, useWelcomeScreen } from '@lib/hooks';
 import { useChatflowInterface } from '@lib/hooks/use-chatflow-interface';
 import { useChatflowState } from '@lib/hooks/use-chatflow-state';
 import { useCurrentApp } from '@lib/hooks/use-current-app';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import type { ChatUploadFile } from '@lib/services/dify/types';
 import { useAppListStore } from '@lib/stores/app-list-store';
-import { useChatInputStore } from '@lib/stores/chat-input-store';
 import { useChatLayoutStore } from '@lib/stores/chat-layout-store';
 import { useChatStore } from '@lib/stores/chat-store';
 import { useChatflowExecutionStore } from '@lib/stores/chatflow-execution-store';
@@ -30,7 +28,6 @@ import { useTranslations } from 'next-intl';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 
 export default function AppDetailPage() {
-  const { colors, isDark } = useThemeColors();
   const router = useRouter();
   const params = useParams();
   const pathname = usePathname();
@@ -105,12 +102,6 @@ export default function AppDetailPage() {
   // get current app instance data
   const currentApp = apps.find(app => app.instance_id === instanceId);
 
-  // Theme synchronization: ensure input box style follows theme changes
-  const setDarkMode = useChatInputStore(state => state.setDarkMode);
-  useEffect(() => {
-    setDarkMode(isDark);
-  }, [isDark, setDarkMode]);
-
   // useLayoutEffect ensures immediate cleanup of state when switching routes
   // this executes earlier than useEffect, allowing state to be cleared before rendering, avoiding display of incorrect content
   const { clearConversationState } = useChatInterface();
@@ -306,7 +297,7 @@ export default function AppDetailPage() {
       <div
         className={cn(
           'relative flex h-full w-full flex-col',
-          colors.mainBackground.tailwind,
+          'bg-stone-100 dark:bg-stone-800',
           'items-center justify-center'
         )}
       >
@@ -359,7 +350,7 @@ export default function AppDetailPage() {
       <div
         className={cn(
           'relative flex h-full w-full flex-col',
-          colors.mainBackground.tailwind,
+          'bg-stone-100 dark:bg-stone-800',
           'items-center justify-center'
         )}
       >
@@ -386,8 +377,8 @@ export default function AppDetailPage() {
     <div
       className={cn(
         'relative flex h-full w-full flex-col',
-        colors.mainBackground.tailwind,
-        colors.mainText.tailwind
+        'bg-stone-100 dark:bg-stone-800',
+        'text-stone-900 dark:text-gray-100'
       )}
     >
       <div

app/apps/page.tsx

@@ -2,7 +2,6 @@
 
 import { AppFilters, AppHeader, AppList, AppLoading } from '@components/apps';
 import type { AppInstance } from '@components/apps/types';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { useAppListStore } from '@lib/stores/app-list-store';
 import { useFavoriteAppsStore } from '@lib/stores/favorite-apps-store';
 import { useSidebarStore } from '@lib/stores/sidebar-store';
@@ -16,7 +15,6 @@ import { useRouter, useSearchParams } from 'next/navigation';
 export default function AppsPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
-  const { colors } = useThemeColors();
   const { favoriteApps } = useFavoriteAppsStore();
   const { selectItem } = useSidebarStore();
   const t = useTranslations('pages.apps.market');
@@ -248,7 +246,7 @@ export default function AppsPage() {
     <>
       <div
         className={cn(
-          colors.mainBackground.tailwind,
+          'bg-stone-100 dark:bg-stone-800',
           'min-h-screen',
           'pt-16 md:pt-12'
         )}

app/apps/workflow/[instanceId]/page.tsx

@@ -2,7 +2,6 @@
 
 import { WorkflowLayout } from '@components/workflow/workflow-layout';
 import { useCurrentApp } from '@lib/hooks/use-current-app';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { useAppListStore } from '@lib/stores/app-list-store';
 import { useSidebarStore } from '@lib/stores/sidebar-store';
 import { cn } from '@lib/utils';
@@ -34,7 +33,6 @@ interface WorkflowPageProps {
 export default function WorkflowPage({ params }: WorkflowPageProps) {
   const { instanceId } = React.use(params);
   const router = useRouter();
-  const { colors } = useThemeColors();
   const t = useTranslations('pages.apps');
 
   // --- app related state ---
@@ -158,7 +156,7 @@ export default function WorkflowPage({ params }: WorkflowPageProps) {
       <div
         className={cn(
           'relative flex h-full w-full flex-col',
-          colors.mainBackground.tailwind,
+          'bg-stone-100 dark:bg-stone-800',
           'items-center justify-center'
         )}
       >
@@ -206,7 +204,7 @@ export default function WorkflowPage({ params }: WorkflowPageProps) {
       <div
         className={cn(
           'relative flex h-full w-full flex-col',
-          colors.mainBackground.tailwind,
+          'bg-stone-100 dark:bg-stone-800',
           'items-center justify-center'
         )}
       >
@@ -233,8 +231,8 @@ export default function WorkflowPage({ params }: WorkflowPageProps) {
     <div
       className={cn(
         'relative h-screen w-full overflow-hidden',
-        colors.mainBackground.tailwind,
-        colors.mainText.tailwind
+        'bg-stone-100 dark:bg-stone-800',
+        'text-stone-900 dark:text-gray-100'
       )}
     >
       <div className="h-full overflow-hidden pt-12">

app/chat/[conversationId]/page.tsx

@@ -19,7 +19,6 @@ import { useChatflowDetection } from '@lib/hooks/use-chatflow-detection';
 import { useChatflowState } from '@lib/hooks/use-chatflow-state';
 import { useConversationMessages } from '@lib/hooks/use-conversation-messages';
 import { useProfile } from '@lib/hooks/use-profile';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { useChatLayoutStore } from '@lib/stores/chat-layout-store';
 import { useChatStore } from '@lib/stores/chat-store';
 import { useChatflowExecutionStore } from '@lib/stores/chatflow-execution-store';
@@ -52,7 +51,6 @@ export default function ChatPage() {
 
   const { inputHeight } = useChatLayoutStore();
   const isPreviewOpen = useFilePreviewStore(state => state.isPreviewOpen);
-  const { colors } = useThemeColors();
 
   // Use the wrapped hook to detect chatflow apps
   const { isChatflowApp } = useChatflowDetection();
@@ -124,8 +122,8 @@ export default function ChatPage() {
     <div
       className={cn(
         'relative flex h-full w-full flex-col',
-        colors.mainBackground.tailwind,
-        colors.mainText.tailwind
+        'bg-stone-100 dark:bg-stone-800',
+        'text-stone-900 dark:text-gray-100'
       )}
     >
       <div

components/admin/content/editor-skeleton.tsx

@@ -1,16 +1,12 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 
 export function EditorSkeleton() {
-  const { isDark } = useTheme();
-
   const SkeletonBlock = ({ className }: { className?: string }) => (
     <div
       className={cn(
-        'animate-pulse rounded-lg',
-        isDark ? 'bg-stone-800' : 'bg-stone-200',
+        'animate-pulse rounded-lg bg-stone-200 dark:bg-stone-800',
         className
       )}
     />