refactor: replace isDark conditional logic with Tailwind dark: prefix across codebase (iflabx#225)

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>

Author: Copilot

components/admin/return-to-chat-button.tsx

@@ -1,14 +1,12 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { Edit } from 'lucide-react';
 
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
 export function ReturnToChatButton() {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.admin.layout.actions.returnToChatButton');
 
   return (
@@ -17,9 +15,8 @@ export function ReturnToChatButton() {
       className={cn(
         'flex items-center gap-2 rounded-lg px-3 py-1.5 transition-all duration-200',
         'border',
-        isDark
-          ? 'border-stone-600/50 bg-stone-700/50 text-stone-300 hover:border-stone-500 hover:bg-stone-600 hover:text-stone-100'
-          : 'border-stone-200 bg-stone-100/80 text-stone-600 hover:border-stone-300 hover:bg-stone-200 hover:text-stone-900'
+        'border-stone-200 bg-stone-100/80 text-stone-600 hover:border-stone-300 hover:bg-stone-200 hover:text-stone-900',
+        'dark:border-stone-600/50 dark:bg-stone-700/50 dark:text-stone-300 dark:hover:border-stone-500 dark:hover:bg-stone-600 dark:hover:text-stone-100'
       )}
     >
       <Edit className="h-4 w-4" />

components/admin/users/user-table.tsx

@@ -56,14 +56,9 @@ interface SpinnerIconProps {
  * @description SVG spinner icon for loading indication
  */
 function SpinnerIcon({ size = 24 }: SpinnerIconProps) {
-  const { isDark } = useThemeColors();
-
   return (
     <svg
-      className={cn(
-        'animate-spin',
-        isDark ? 'text-stone-300' : 'text-stone-600'
-      )}
+      className={cn('animate-spin', 'text-stone-600 dark:text-stone-300')}
       width={size}
       height={size}
       xmlns="http://www.w3.org/2000/svg"

components/chat/page-loading-spinner.tsx

@@ -16,7 +16,7 @@ import { usePathname } from 'next/navigation';
  */
 export const ScrollToBottomButton = () => {
   const { isAtBottom } = useChatScrollStore();
-  const { colors, isDark } = useThemeColors();
+  const { colors } = useThemeColors();
   const resetScrollState = useChatScrollStore(state => state.resetScrollState);
   const pathname = usePathname();
   const t = useTranslations('pages.chat.input');

components/chat/scroll-to-bottom-button.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import type { MessageAttachment } from '@lib/stores/chat-store';
 import { useFilePreviewStore } from '@lib/stores/ui/file-preview-store';
 import { cn, formatBytes } from '@lib/utils';
@@ -28,50 +27,20 @@ import { VideoPreview } from './previews/video-preview';
 /**
  * Loading skeleton component
  */
-const LoadingSkeleton: React.FC<{ isDark: boolean }> = ({ isDark }) => {
+const LoadingSkeleton: React.FC = () => {
   const t = useTranslations('filePreview');
   return (
     <div className="animate-pulse space-y-4">
       <div className="flex items-center space-x-2">
-        <RefreshCwIcon
-          className={cn(
-            'h-4 w-4 animate-spin',
-            isDark ? 'text-stone-400' : 'text-stone-600'
-          )}
-        />
-        <span
-          className={cn(
-            'text-sm',
-            isDark ? 'text-stone-400' : 'text-stone-600'
-          )}
-        >
+        <RefreshCwIcon className="h-4 w-4 animate-spin text-stone-600 dark:text-stone-400" />
+        <span className="text-sm text-stone-600 dark:text-stone-400">
           {t('loading')}
         </span>
       </div>
-      <div
-        className={cn(
-          'space-y-3 rounded-md p-4',
-          isDark ? 'bg-stone-800' : 'bg-stone-100'
-        )}
-      >
-        <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'
-          )}
-        />
-        <div
-          className={cn(
-            'h-4 w-1/2 rounded',
-            isDark ? 'bg-stone-700' : 'bg-stone-200'
-          )}
-        />
+      <div className="space-y-3 rounded-md bg-stone-100 p-4 dark:bg-stone-800">
+        <div className="h-4 rounded bg-stone-200 dark:bg-stone-700" />
+        <div className="h-4 w-3/4 rounded bg-stone-200 dark:bg-stone-700" />
+        <div className="h-4 w-1/2 rounded bg-stone-200 dark:bg-stone-700" />
       </div>
     </div>
   );
@@ -84,18 +53,10 @@ const ErrorDisplay: React.FC<{
   error: string;
   onRetry: () => void;
   onClearError: () => void;
-  isDark: boolean;
-}> = ({ error, onRetry, onClearError, isDark }) => {
+}> = ({ error, onRetry, onClearError }) => {
   const t = useTranslations('filePreview');
   return (
-    <div
-      className={cn(
-        'space-y-4 rounded-md border p-4',
-        isDark
-          ? 'border-red-800 bg-red-900/20 text-red-200'
-          : 'border-red-300 bg-red-50 text-red-800'
-      )}
-    >
+    <div className="space-y-4 rounded-md border border-red-300 bg-red-50 p-4 text-red-800 dark:border-red-800 dark:bg-red-900/20 dark:text-red-200">
       <div className="flex items-start space-x-2">
         <AlertCircleIcon className="mt-0.5 h-5 w-5 flex-shrink-0" />
         <div className="flex-1">
@@ -106,24 +67,14 @@ const ErrorDisplay: React.FC<{
       <div className="flex space-x-2">
         <button
           onClick={onRetry}
-          className={cn(
-            'inline-flex items-center space-x-1 rounded px-3 py-1.5 text-sm font-medium transition-colors',
-            isDark
-              ? 'bg-red-800 text-red-100 hover:bg-red-700'
-              : 'bg-red-600 text-white hover:bg-red-700'
-          )}
+          className="inline-flex items-center space-x-1 rounded bg-red-600 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-red-700 dark:bg-red-800 dark:text-red-100 dark:hover:bg-red-700"
         >
           <RefreshCwIcon className="h-3 w-3" />
           <span>{t('retryButton')}</span>
         </button>
         <button
           onClick={onClearError}
-          className={cn(
-            'inline-flex items-center rounded px-3 py-1.5 text-sm font-medium transition-colors',
-            isDark
-              ? 'text-red-200 hover:bg-red-800/50'
-              : 'text-red-700 hover:bg-red-100'
-          )}
+          className="inline-flex items-center rounded px-3 py-1.5 text-sm font-medium text-red-700 transition-colors hover:bg-red-100 dark:text-red-200 dark:hover:bg-red-800/50"
         >
           {t('dismissButton')}
         </button>
@@ -138,20 +89,12 @@ const ErrorDisplay: React.FC<{
 const FileInfoFallback: React.FC<{
   file: MessageAttachment;
   onDownload: () => void;
-  isDark: boolean;
-}> = ({ file, onDownload, isDark }) => {
+}> = ({ file, onDownload }) => {
   const t = useTranslations('filePreview');
   return (
     <div className="space-y-4">
       <h3 className="text-lg font-semibold">{t('fileInfo.title')}</h3>
-      <div
-        className={cn(
-          'space-y-3 rounded-md border p-4',
-          isDark
-            ? 'border-stone-700 bg-stone-800'
-            : 'border-stone-200 bg-stone-50'
-        )}
-      >
+      <div className="space-y-3 rounded-md border border-stone-200 bg-stone-50 p-4 dark:border-stone-700 dark:bg-stone-800">
         <div className="space-y-1 text-sm">
           <p>
             <strong>{t('fileInfo.name')}</strong> {file.name}
@@ -167,20 +110,13 @@ const FileInfoFallback: React.FC<{
       <div className="flex space-x-2">
         <button
           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'
-          )}
+          className="inline-flex items-center space-x-2 rounded-md bg-stone-200 px-4 py-2 text-sm font-medium text-stone-800 transition-colors hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600"
         >
           <DownloadIcon className="h-4 w-4" />
           <span>{t('downloadButton')}</span>
         </button>
       </div>
-      <p
-        className={cn('text-xs', isDark ? 'text-stone-400' : 'text-stone-500')}
-      >
+      <p className="text-xs text-stone-500 dark:text-stone-400">
         {t('previewNotSupported')}
       </p>
     </div>
@@ -192,8 +128,7 @@ const FileInfoFallback: React.FC<{
  */
 const FileContentViewer: React.FC<{
   file: MessageAttachment | null;
-  isDark: boolean;
-}> = ({ file, isDark }) => {
+}> = ({ file }) => {
   const {
     previewContent,
     contentHeaders,
@@ -208,12 +143,7 @@ const FileContentViewer: React.FC<{
 
   if (!file) {
     return (
-      <div
-        className={cn(
-          'py-8 text-center',
-          isDark ? 'text-stone-400' : 'text-stone-600'
-        )}
-      >
+      <div className="py-8 text-center text-stone-600 dark:text-stone-400">
         {t('noFileSelected')}
       </div>
     );
@@ -228,7 +158,7 @@ const FileContentViewer: React.FC<{
 
   // Show loading state
   if (isLoading) {
-    return <LoadingSkeleton isDark={isDark} />;
+    return <LoadingSkeleton />;
   }
 
   // Show error state
@@ -238,16 +168,13 @@ const FileContentViewer: React.FC<{
         error={error}
         onRetry={handleRetry}
         onClearError={clearError}
-        isDark={isDark}
       />
     );
   }
 
   // Show fallback if no content available
   if (!previewContent || !contentHeaders) {
-    return (
-      <FileInfoFallback file={file} onDownload={downloadFile} isDark={isDark} />
-    );
+    return <FileInfoFallback file={file} onDownload={downloadFile} />;
   }
 
   // Route to appropriate preview component based on content type
@@ -324,15 +251,12 @@ const FileContentViewer: React.FC<{
   }
 
   // Fallback for unsupported types
-  return (
-    <FileInfoFallback file={file} onDownload={downloadFile} isDark={isDark} />
-  );
+  return <FileInfoFallback file={file} onDownload={downloadFile} />;
 };
 
 export const FilePreviewCanvas = () => {
   const { isPreviewOpen, currentPreviewFile, closePreview } =
     useFilePreviewStore();
-  const { isDark } = useTheme();
   const pathname = usePathname();
   const t = useTranslations('filePreview');
 
@@ -367,9 +291,8 @@ export const FilePreviewCanvas = () => {
               'fixed top-0 right-0 z-50 h-full',
               'flex flex-col',
               'w-[85%] md:w-[60%] lg:w-[50%] xl:w-[40%]',
-              isDark
-                ? 'border-l border-stone-700 bg-stone-800 text-stone-100'
-                : 'border-l border-stone-200 bg-white text-stone-900'
+              'border-l border-stone-200 bg-white text-stone-900',
+              'dark:border-l dark:border-stone-700 dark:bg-stone-800 dark:text-stone-100'
             )}
             variants={panelVariants}
             initial="hidden"
@@ -380,7 +303,7 @@ export const FilePreviewCanvas = () => {
             <div
               className={cn(
                 'flex flex-shrink-0 items-center justify-between border-b p-4',
-                isDark ? 'border-stone-700' : 'border-stone-200'
+                'border-stone-200 dark:border-stone-700'
               )}
             >
               <h2
@@ -393,20 +316,16 @@ export const FilePreviewCanvas = () => {
                 onClick={closePreview}
                 className={cn(
                   'rounded-full p-1',
-                  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'
                 )}
                 aria-label={t('closeButton')}
               >
                 <XIcon className="h-5 w-5" />
               </button>
             </div>
             <div className="flex flex-1 flex-col overflow-y-auto p-6">
-              <FileContentViewer
-                file={currentPreviewFile}
-                isDark={isDark ?? false}
-              />
+              <FileContentViewer file={currentPreviewFile} />
             </div>
           </motion.div>
         )}

components/file-preview/file-preview-canvas.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 
 import React from 'react';
@@ -18,8 +17,6 @@ export function NavButton({
   className,
   ...props
 }: NavButtonProps) {
-  const { isDark } = useTheme();
-
   return (
     <button
       className={cn(
@@ -30,9 +27,8 @@ export function NavButton({
         // Responsive adjustment (if needed)
         // "sm:px-4 sm:py-2",
         // Theme-aware hover effect
-        isDark
-          ? 'text-gray-300 hover:bg-gray-700/50 hover:text-gray-100'
-          : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900',
+        'text-gray-600 hover:bg-gray-100 hover:text-gray-900',
+        'dark:text-gray-300 dark:hover:bg-gray-700/50 dark:hover:text-gray-100',
         // Disabled state
         'disabled:pointer-events-none disabled:opacity-50',
         // External class name passed in

components/nav-bar/nav-button.tsx

@@ -8,27 +8,22 @@ import { cn } from '@lib/utils';
 import * as React from 'react';
 
 interface ChatSkeletonProps {
-  isDark: boolean;
   count?: number;
 }
 
-export function ChatSkeleton({ isDark, count = 5 }: ChatSkeletonProps) {
+export function ChatSkeleton({ count = 5 }: ChatSkeletonProps) {
   return (
     <div className="mb-2 space-y-1">
       {Array(count)
         .fill(0)
         .map((_, index) => (
-          <ChatSkeletonItem key={`skeleton-${index}`} isDark={isDark} />
+          <ChatSkeletonItem key={`skeleton-${index}`} />
         ))}
     </div>
   );
 }
 
-interface ChatSkeletonItemProps {
-  isDark: boolean;
-}
-
-export function ChatSkeletonItem({ isDark }: ChatSkeletonItemProps) {
+export function ChatSkeletonItem() {
   // Skeleton screen project, simulating the appearance of the chat project
   // Do not use outer frame background color, only display the animation effect of internal elements
   return (
@@ -37,13 +32,13 @@ export function ChatSkeletonItem({ isDark }: ChatSkeletonItemProps) {
         <div
           className={cn(
             'mr-3 h-5 w-5 flex-shrink-0 animate-pulse rounded-full',
-            isDark ? 'bg-stone-600' : 'bg-stone-400'
+            'bg-stone-400 dark:bg-stone-600'
           )}
         />
         <div
           className={cn(
             'h-4 w-[70%] animate-pulse rounded-md',
-            isDark ? 'bg-stone-600' : 'bg-stone-400'
+            'bg-stone-400 dark:bg-stone-600'
           )}
         />
       </div>