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

Copilot · lyzno1 · web-flow · commit e0caca3dfb48 · 2025-08-14T14:34:08.000+08:00
Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: lyzno1 &lt;92089059+lyzno1@users.noreply.github.com&gt;
Co-authored-by: lyzno1 &lt;yuanyouhuilyz@gmail.com&gt;
diff --git a/app/forgot-password/page.tsx b/app/forgot-password/page.tsx
@@ -1,43 +1,11 @@
 'use client';
 
 import { ForgotPasswordForm } from '@components/auth/forgot-password-form';
-import { useTheme } from '@lib/hooks/use-theme';
 import { motion } from 'framer-motion';
 
-import { useEffect, useState } from 'react';
-
 export default function ForgotPasswordPage() {
-  const { isDark } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  // ensure client-side rendering consistency
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // get colors based on theme
-  const getColors = () => {
-    if (isDark) {
-      return {
-        bgColor: 'bg-stone-800',
-      };
-    } else {
-      return {
-        bgColor: 'bg-stone-100',
-      };
-    }
-  };
-
-  const colors = mounted
-    ? getColors()
-    : {
-        bgColor: '',
-      };
-
   return (
-    <main
-      className={`flex min-h-screen w-full flex-col items-center justify-center gap-4 px-4 py-12 sm:px-6 lg:px-8 ${colors.bgColor} font-serif`}
-    >
+    <main className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-stone-100 px-4 py-12 font-serif sm:px-6 lg:px-8 dark:bg-stone-800">
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -1,12 +1,9 @@
 'use client';
 
 import { LoginForm } from '@components/auth/login-form';
-import { useTheme } from '@lib/hooks/use-theme';
 import { motion } from 'framer-motion';
 import { AlertTriangle, CheckCircle } from 'lucide-react';
 
-import { useEffect, useState } from 'react';
-
 import { useTranslations } from 'next-intl';
 import { useSearchParams } from 'next/navigation';
 
@@ -17,57 +14,7 @@ export default function LoginPage() {
   const registered = searchParams.get('registered');
   const resetSuccess = searchParams.get('reset');
   const oauthError = searchParams.get('error');
-  const { isDark } = useTheme();
   const t = useTranslations('pages.auth.login');
-  const [mounted, setMounted] = useState(false);
-
-  // ensure client-side rendering consistency
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // get colors based on theme
-  const getColors = () => {
-    if (isDark) {
-      return {
-        bgColor: 'bg-stone-800',
-        alertBg: 'bg-stone-800/50',
-        alertBorder: 'border-stone-600',
-        alertText: 'text-stone-300',
-        iconColor: 'text-stone-400',
-        errorAlertBg: 'bg-red-900/30',
-        errorAlertBorder: 'border-red-500',
-        errorAlertText: 'text-red-400',
-        errorIconColor: 'text-red-400',
-      };
-    } else {
-      return {
-        bgColor: 'bg-stone-100',
-        alertBg: 'bg-stone-50',
-        alertBorder: 'border-stone-300',
-        alertText: 'text-stone-700',
-        iconColor: 'text-stone-600',
-        errorAlertBg: 'bg-red-50',
-        errorAlertBorder: 'border-red-500',
-        errorAlertText: 'text-red-700',
-        errorIconColor: 'text-red-500',
-      };
-    }
-  };
-
-  const colors = mounted
-    ? getColors()
-    : {
-        bgColor: '',
-        alertBg: '',
-        alertBorder: '',
-        alertText: '',
-        iconColor: '',
-        errorAlertBg: '',
-        errorAlertBorder: '',
-        errorAlertText: '',
-        errorIconColor: '',
-      };
 
   // get error message
   const getErrorMessage = (error: string) => {
@@ -96,20 +43,16 @@ export default function LoginPage() {
   };
 
   return (
-    <main
-      className={`flex min-h-screen w-full flex-col items-center justify-center gap-4 px-4 py-12 sm:px-6 lg:px-8 ${colors.bgColor} font-serif`}
-    >
+    <main className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-stone-100 px-4 py-12 font-serif sm:px-6 lg:px-8 dark:bg-stone-800">
       {registered && (
         <motion.div
           initial={{ opacity: 0, y: -20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
         >
-          <Alert
-            className={`max-w-md border-l-4 ${colors.alertBg} ${colors.alertBorder}`}
-          >
-            <CheckCircle className={`h-4 w-4 ${colors.iconColor}`} />
-            <AlertDescription className={`${colors.alertText} font-serif`}>
+          <Alert className="max-w-md border-l-4 border-stone-300 bg-stone-50 dark:border-stone-600 dark:bg-stone-800/50">
+            <CheckCircle className="h-4 w-4 text-stone-600 dark:text-stone-400" />
+            <AlertDescription className="font-serif text-stone-700 dark:text-stone-300">
               {t('alerts.registered')}
             </AlertDescription>
           </Alert>
@@ -121,11 +64,9 @@ export default function LoginPage() {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
         >
-          <Alert
-            className={`max-w-md border-l-4 ${colors.alertBg} ${colors.alertBorder}`}
-          >
-            <CheckCircle className={`h-4 w-4 ${colors.iconColor}`} />
-            <AlertDescription className={`${colors.alertText} font-serif`}>
+          <Alert className="max-w-md border-l-4 border-stone-300 bg-stone-50 dark:border-stone-600 dark:bg-stone-800/50">
+            <CheckCircle className="h-4 w-4 text-stone-600 dark:text-stone-400" />
+            <AlertDescription className="font-serif text-stone-700 dark:text-stone-300">
               {t('alerts.resetSuccess')}
             </AlertDescription>
           </Alert>
@@ -137,11 +78,9 @@ export default function LoginPage() {
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6 }}
         >
-          <Alert
-            className={`max-w-md border-l-4 ${colors.errorAlertBg} ${colors.errorAlertBorder}`}
-          >
-            <AlertTriangle className={`h-4 w-4 ${colors.errorIconColor}`} />
-            <AlertDescription className={`${colors.errorAlertText} font-serif`}>
+          <Alert className="max-w-md border-l-4 border-red-500 bg-red-50 dark:border-red-500 dark:bg-red-900/30">
+            <AlertTriangle className="h-4 w-4 text-red-500 dark:text-red-400" />
+            <AlertDescription className="font-serif text-red-700 dark:text-red-400">
               {getErrorMessage(oauthError)}
             </AlertDescription>
           </Alert>
diff --git a/app/register/page.tsx b/app/register/page.tsx
@@ -1,43 +1,11 @@
 'use client';
 
 import { RegisterForm } from '@components/auth/register-form';
-import { useTheme } from '@lib/hooks/use-theme';
 import { motion } from 'framer-motion';
 
-import { useEffect, useState } from 'react';
-
 export default function RegisterPage() {
-  const { isDark } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  // ensure client-side rendering consistency
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // get colors based on theme
-  const getColors = () => {
-    if (isDark) {
-      return {
-        bgColor: 'bg-stone-800',
-      };
-    } else {
-      return {
-        bgColor: 'bg-stone-100',
-      };
-    }
-  };
-
-  const colors = mounted
-    ? getColors()
-    : {
-        bgColor: '',
-      };
-
   return (
-    <main
-      className={`flex min-h-screen w-full flex-col items-center justify-center px-4 py-12 sm:px-6 lg:px-8 ${colors.bgColor} font-serif`}
-    >
+    <main className="flex min-h-screen w-full flex-col items-center justify-center bg-stone-100 px-4 py-12 font-serif sm:px-6 lg:px-8 dark:bg-stone-800">
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
diff --git a/app/reset-password/page.tsx b/app/reset-password/page.tsx
@@ -1,11 +1,10 @@
 'use client';
 
 import { ResetPasswordForm } from '@components/auth/reset-password-form';
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import { motion } from 'framer-motion';
 
-import { Suspense, useEffect, useState } from 'react';
+import { Suspense } from 'react';
 
 import { useTranslations } from 'next-intl';
 
@@ -14,38 +13,10 @@ function ResetPasswordContent() {
 }
 
 export default function ResetPasswordPage() {
-  const { isDark } = useTheme();
   const t = useTranslations('loading');
-  const [mounted, setMounted] = useState(false);
-
-  // ensure client-side rendering consistency
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // get colors based on theme
-  const getColors = () => {
-    if (isDark) {
-      return {
-        bgColor: 'bg-stone-800',
-      };
-    } else {
-      return {
-        bgColor: 'bg-stone-100',
-      };
-    }
-  };
-
-  const colors = mounted
-    ? getColors()
-    : {
-        bgColor: '',
-      };
 
   return (
-    <main
-      className={`flex min-h-screen w-full flex-col items-center justify-center gap-4 px-4 py-12 sm:px-6 lg:px-8 ${colors.bgColor} font-serif`}
-    >
+    <main className="flex min-h-screen w-full flex-col items-center justify-center gap-4 bg-stone-100 px-4 py-12 font-serif sm:px-6 lg:px-8 dark:bg-stone-800">
       <motion.div
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
@@ -57,22 +28,21 @@ export default function ResetPasswordPage() {
             <div
               className={cn(
                 'w-full max-w-md space-y-6 rounded-xl border p-6 font-serif shadow-lg transition-all sm:space-y-8 sm:p-8',
-                isDark
-                  ? 'border-stone-800 bg-stone-900'
-                  : 'border-stone-200 bg-stone-50'
+                'border-stone-200 bg-stone-50',
+                'dark:border-stone-800 dark:bg-stone-900'
               )}
             >
               <div className="text-center">
                 <div
                   className={cn(
                     'mx-auto mb-4 flex h-16 w-16 animate-pulse items-center justify-center rounded-full',
-                    isDark ? 'bg-stone-800' : 'bg-stone-100'
+                    'bg-stone-100 dark:bg-stone-800'
                   )}
                 >
                   <div
                     className={cn(
                       'h-8 w-8 rounded-full',
-                      isDark ? 'bg-stone-600' : 'bg-stone-300'
+                      'bg-stone-300 dark:bg-stone-600'
                     )}
                   ></div>
                 </div>
diff --git a/components/chat/messages-loading-indicator.tsx b/components/chat/messages-loading-indicator.tsx
@@ -2,7 +2,6 @@
  * Message loading indicator component
  */
 import { LoadingState } from '@lib/hooks/use-conversation-messages';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { cn } from '@lib/utils';
 
 import { useEffect, useRef, useState } from 'react';
@@ -24,7 +23,6 @@ export function MessagesLoadingIndicator({
   error,
   onRetry,
 }: MessagesLoadingIndicatorProps) {
-  const { colors } = useThemeColors();
   const t = useTranslations('loading');
   const [isAtTop, setIsAtTop] = useState(false);
 
@@ -96,8 +94,8 @@ export function MessagesLoadingIndicator({
           onClick={onRetry}
           className={cn(
             'rounded-full px-4 py-2 text-sm',
-            colors.sidebarBackground.tailwind,
-            colors.buttonHover.tailwind
+            'bg-stone-100 text-stone-700 hover:bg-stone-200',
+            'dark:bg-stone-800 dark:text-stone-300 dark:hover:bg-stone-700'
           )}
         >
           {t('retry')}
@@ -113,7 +111,7 @@ export function MessagesLoadingIndicator({
         <div
           className={cn(
             'flex items-center space-x-2 rounded-full px-4 py-2',
-            colors.sidebarBackground.tailwind
+            'bg-stone-100 dark:bg-stone-800'
           )}
         >
           <LoadingSpinner />
@@ -131,8 +129,8 @@ export function MessagesLoadingIndicator({
           onClick={onRetry}
           className={cn(
             'rounded-full px-4 py-2 text-sm',
-            colors.sidebarBackground.tailwind,
-            colors.buttonHover.tailwind,
+            'bg-stone-100 text-stone-700 hover:bg-stone-200',
+            'dark:bg-stone-800 dark:text-stone-300 dark:hover:bg-stone-700',
             'transition-colors duration-200'
           )}
         >
diff --git a/components/ui/message-action-button.tsx b/components/ui/message-action-button.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks';
 import { cn } from '@lib/utils';
 import { IconType } from 'react-icons';
 
@@ -35,7 +34,6 @@ export const MessageActionButton: React.FC<MessageActionButtonProps> = ({
   tooltipSize = 'sm', // message-actions default use small size
   showTooltipArrow = false, // message-actions default do not show arrow
 }) => {
-  const { isDark } = useTheme();
   // Use the external active property to control the state, instead of the internal state
   // The current displayed icon and label
   // If the button is active and an active icon is provided, use the active icon
@@ -62,9 +60,8 @@ export const MessageActionButton: React.FC<MessageActionButtonProps> = ({
         'flex items-center justify-center rounded-md p-1.5 transition-all',
         'text-sm',
         // Button style, do not change background when active
-        isDark
-          ? 'text-gray-400 hover:bg-gray-700/50 hover:text-gray-200'
-          : 'text-gray-500 hover:bg-gray-200/50 hover:text-gray-700',
+        'text-gray-500 hover:bg-gray-200/50 hover:text-gray-700',
+        'dark:text-gray-400 dark:hover:bg-gray-700/50 dark:hover:text-gray-200',
         // Keep the original color when active, do not use blue
         disabled && 'cursor-not-allowed opacity-50 hover:bg-transparent',
         className
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
