refactor: replace isDark conditional logic with Tailwind dark: prefix across remaining components (iflabx#230)

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Author: lyzno1

app/admin/page.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { useTheme } from '@lib/hooks/use-theme';
 import { cn } from '@lib/utils';
 import {
   ArrowRight,
@@ -25,16 +24,12 @@ interface AdminCardProps {
 }
 
 function AdminCard({ title, description, icon: Icon, href }: AdminCardProps) {
-  const { isDark } = useTheme();
-
   return (
     <Link
       href={href}
       className={cn(
         'group block rounded-xl border p-6 transition-all duration-200 hover:shadow-lg',
-        isDark
-          ? 'hover:bg-stone-750 border-stone-700 bg-stone-800 hover:border-stone-600'
-          : 'border-stone-200 bg-white hover:border-stone-300 hover:shadow-stone-200/50'
+        'dark:hover:bg-stone-750 border-stone-200 bg-white hover:border-stone-300 hover:shadow-stone-200/50 dark:border-stone-700 dark:bg-stone-800 dark:hover:border-stone-600'
       )}
     >
       <div className="flex items-start justify-between">
@@ -79,11 +74,9 @@ function AdminCard({ title, description, icon: Icon, href }: AdminCardProps) {
 }
 
 export default function AdminPage() {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.admin.main');
   const tLayout = useTranslations('pages.admin.layout');
 
-  // Admin function card configuration
   const adminCards: AdminCardProps[] = [
     {
       title: tLayout('menuItems.apiConfig.text'),
@@ -126,14 +119,11 @@ export default function AdminPage() {
   return (
     <div className="min-h-full">
       <div className="mx-auto max-w-7xl p-6">
-        {/* Page title and description - left-aligned layout, consistent with project style */}
         <div className="mb-8">
           <h1
             className={cn(
               'mb-3 bg-gradient-to-r bg-clip-text text-4xl font-bold text-transparent',
-              isDark
-                ? 'from-stone-100 to-stone-300'
-                : 'from-stone-800 to-stone-600'
+              'from-stone-800 to-stone-600 dark:from-stone-100 dark:to-stone-300'
             )}
           >
             {t('title')}
@@ -143,7 +133,6 @@ export default function AdminPage() {
           </p>
         </div>
 
-        {/* Admin function card grid - optimized layout and spacing */}
         <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
           {adminCards.map(card => (
             <AdminCard

components/auth/social-auth-buttons.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { Button } from '@components/ui/button';
-import { useTheme } from '@lib/hooks/use-theme';
 import { createClient } from '@lib/supabase/client';
 import { cn } from '@lib/utils';
 
@@ -26,7 +25,6 @@ export function SocialAuthButtons({
   redirectTo = '/chat',
   className,
 }: SocialAuthButtonsProps) {
-  const { isDark } = useTheme();
   const t = useTranslations('pages.auth.social.github');
 
   const [isLoading, setIsLoading] = useState({
@@ -72,7 +70,7 @@ export function SocialAuthButtons({
         <div
           className={cn(
             'rounded-lg border-l-4 border-red-500 p-3 font-serif text-sm',
-            isDark ? 'bg-red-900/30 text-red-400' : 'bg-red-50 text-red-700'
+            'bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-400'
           )}
         >
           {error}
@@ -85,9 +83,7 @@ export function SocialAuthButtons({
         size="lg"
         className={cn(
           'relative flex h-12 w-full cursor-pointer items-center justify-center gap-3 font-serif',
-          isDark
-            ? 'border-stone-700 bg-stone-800 text-white hover:bg-stone-700'
-            : 'border-stone-300 bg-white text-stone-700 hover:bg-stone-50'
+          'border-stone-300 bg-white text-stone-700 hover:bg-stone-50 dark:border-stone-700 dark:bg-stone-800 dark:text-white dark:hover:bg-stone-700'
         )}
         onClick={() => handleSocialAuth('github')}
         disabled={isLoading.github}

components/chat-input/button.tsx

@@ -2,7 +2,6 @@
 
 import { Button as UIButton } from '@components/ui/button';
 import { useMounted } from '@lib/hooks';
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { cn } from '@lib/utils';
 
 import type React from 'react';
@@ -13,7 +12,6 @@ interface ChatButtonProps {
   disabled?: boolean;
   className?: string;
   variant?: 'function' | 'submit';
-  isDark?: boolean;
   ariaLabel: string;
   forceActiveStyle?: boolean;
 }
@@ -24,19 +22,15 @@ export const ChatButton = ({
   disabled = false,
   className,
   variant = 'function',
-  isDark = false,
   ariaLabel,
   forceActiveStyle = false,
 }: ChatButtonProps) => {
   const isMounted = useMounted();
-  // Get theme colors
-  const { colors } = useThemeColors();
 
   if (!isMounted) {
     return null;
   }
 
-  // Function button - with subtle gray border
   if (variant === 'function') {
     return (
       <UIButton
@@ -47,9 +41,7 @@ export const ChatButton = ({
         disabled={disabled}
         className={cn(
           'flex h-8 w-8 items-center justify-center rounded-lg',
-          isDark
-            ? `border border-stone-600 bg-stone-600/30 ${colors.mainText.tailwind} ${colors.buttonHover.tailwind}`
-            : 'border border-gray-200 text-gray-600 hover:bg-gray-50',
+          'border border-gray-200 text-gray-600 hover:bg-gray-50 dark:border-stone-600 dark:bg-stone-600/30 dark:text-stone-300 dark:hover:bg-stone-700/50',
           'bg-transparent',
           'cursor-pointer',
           className
@@ -61,7 +53,6 @@ export const ChatButton = ({
     );
   }
 
-  // Submit/upload button - empty state is dark gray
   return (
     <UIButton
       type="button"
@@ -71,12 +62,8 @@ export const ChatButton = ({
       className={cn(
         'flex h-8 w-8 items-center justify-center rounded-full',
         forceActiveStyle || !disabled
-          ? isDark
-            ? 'bg-stone-900 text-white hover:bg-stone-800'
-            : 'bg-black text-white hover:bg-gray-800'
-          : isDark
-            ? 'bg-stone-600 text-stone-300'
-            : 'bg-gray-200 text-gray-400',
+          ? 'bg-black text-white hover:bg-gray-800 dark:bg-stone-900 dark:hover:bg-stone-800'
+          : 'bg-gray-200 text-gray-400 dark:bg-stone-600 dark:text-stone-300',
         'cursor-pointer shadow-sm',
         className
       )}

components/chat-input/container.tsx

@@ -1,14 +1,12 @@
 'use client';
 
-import { useThemeColors } from '@lib/hooks/use-theme-colors';
 import { useWelcomeLayout } from '@lib/hooks/use-welcome-layout';
 import { cn } from '@lib/utils';
 
 // Container component - uses intelligent layout system
 interface ChatContainerProps {
   children: React.ReactNode;
   isWelcomeScreen?: boolean;
-  isDark?: boolean;
   className?: string;
   widthClass: string;
   // Whether transitioning from conversation interface to welcome interface
@@ -23,13 +21,10 @@ const INPUT_BOTTOM_MARGIN = '1rem';
 export const ChatContainer = ({
   children,
   isWelcomeScreen = false,
-  isDark = false,
   className,
   widthClass,
-  isTransitioningToWelcome = false,
+  isTransitioningToWelcome = false, // eslint-disable-line @typescript-eslint/no-unused-vars
 }: ChatContainerProps) => {
-  // Get theme colors and intelligent layout position
-  const { colors } = useThemeColors();
   const { input: inputPosition } = useWelcomeLayout();
 
   // Base styles including absolute positioning and width
@@ -67,7 +62,7 @@ export const ChatContainer = ({
       <div
         className={cn(
           'flex flex-col rounded-2xl',
-          isDark ? colors.sidebarBackground.tailwind : 'bg-white',
+          'bg-white dark:bg-stone-800',
           'shadow-[0_0_15px_rgba(0,0,0,0.1)]'
         )}
       >

components/chat-input/file-type-selector.tsx

@@ -5,7 +5,6 @@ import { hideActiveTooltip } from '@components/ui/tooltip';
 import { TooltipWrapper } from '@components/ui/tooltip-wrapper';
 import { useFileTypes } from '@lib/hooks/use-file-types';
 import { useMobile } from '@lib/hooks/use-mobile';
-import { useTheme } from '@lib/hooks/use-theme';
 import { useAttachmentStore } from '@lib/stores/attachment-store';
 import { cn } from '@lib/utils';
 import { Loader2, Paperclip } from 'lucide-react';
@@ -36,7 +35,6 @@ export const FileTypeSelector = ({
   className,
 }: FileTypeSelectorProps) => {
   const { fileTypes, uploadConfig, isLoading, error } = useFileTypes();
-  const { isDark } = useTheme();
   const isMobile = useMobile();
   const [isOpen, setIsOpen] = useState(false);
   const attachmentFiles = useAttachmentStore(state => state.files);
@@ -128,7 +126,6 @@ export const FileTypeSelector = ({
             <Paperclip className="h-4 w-4" />
           )
         }
-        isDark={isDark}
         ariaLabel={ariaLabel || t('fileTypeSelector.ariaLabel')}
         disabled={isDisabled}
         className={cn(
@@ -168,7 +165,7 @@ export const FileTypeSelector = ({
           <div
             className={cn(
               'flex items-center justify-center py-4 font-serif',
-              isDark ? 'text-gray-400' : 'text-gray-500'
+              'text-gray-500 dark:text-gray-400'
             )}
           >
             <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -178,7 +175,7 @@ export const FileTypeSelector = ({
           <div
             className={cn(
               'px-3 py-2 font-serif text-sm',
-              isDark ? 'text-red-300' : 'text-red-500'
+              'text-red-500 dark:text-red-300'
             )}
           >
             {t('fileTypeSelector.loadError')}
@@ -187,7 +184,7 @@ export const FileTypeSelector = ({
           <div
             className={cn(
               'px-3 py-2 text-center font-serif text-sm',
-              isDark ? 'text-gray-400' : 'text-gray-500'
+              'text-gray-500 dark:text-gray-400'
             )}
           >
             {t('fileTypeSelector.noTypesConfigured')}
@@ -198,9 +195,7 @@ export const FileTypeSelector = ({
             <div
               className={cn(
                 'mb-1 border-b px-3 py-1 font-serif text-xs',
-                isDark
-                  ? 'border-gray-600 text-gray-400'
-                  : 'border-gray-200 text-gray-500'
+                'border-gray-200 text-gray-500 dark:border-gray-600 dark:text-gray-400'
               )}
             >
               {uploadConfig.maxFiles > 0 ? (
@@ -216,7 +211,7 @@ export const FileTypeSelector = ({
                 <div
                   className={cn(
                     'mt-1 text-xs',
-                    isDark ? 'text-orange-400' : 'text-orange-600'
+                    'text-orange-600 dark:text-orange-400'
                   )}
                 >
                   {t('fileTypeSelector.reachedLimit', {
@@ -242,7 +237,7 @@ export const FileTypeSelector = ({
                   <span
                     className={cn(
                       'font-serif text-xs',
-                      isDark ? 'text-gray-400' : 'text-gray-500'
+                      'text-gray-500 dark:text-gray-400'
                     )}
                   >
                     {type.maxSize}

components/chat-input/index.tsx

@@ -103,7 +103,6 @@ export const ChatInput = ({
     isComposing,
     setIsComposing,
     isWelcomeScreen,
-    isDark,
   } = useChatInputStore();
 
   // 🎯 New: Local submission state to prevent duplicate clicks
@@ -577,14 +576,12 @@ export const ChatInput = ({
   return (
     <ChatContainer
       isWelcomeScreen={effectiveIsWelcomeScreen}
-      isDark={isDark}
       className={className}
       widthClass={widthClass}
       isTransitioningToWelcome={isTransitioningToWelcome}
     >
       {/* Attachment preview bar, only show when there are attachments */}
       <AttachmentPreviewBar
-        isDark={isDark}
         onHeightChange={handleAttachmentBarHeightChange}
         onRetryUpload={handleRetryUpload}
       />
@@ -598,7 +595,6 @@ export const ChatInput = ({
           onKeyDown={handleKeyDown}
           placeholder={defaultPlaceholder}
           maxHeight={maxHeight}
-          isDark={isDark}
           onCompositionStart={handleCompositionStart}
           onCompositionEnd={handleCompositionEnd}
           onHeightChange={handleTextHeightChange}
@@ -673,7 +669,6 @@ export const ChatInput = ({
                   (!isProcessing && !message.trim()) ||
                   !canSubmitWithModel
                 }
-                isDark={isDark}
                 ariaLabel={
                   isLocalSubmitting
                     ? t('input.sending')

components/mobile/mobile-nav-button.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { WidePanelLeft } from '@components/ui';
-import { useTheme } from '@lib/hooks/use-theme';
 import { useSidebarStore } from '@lib/stores/sidebar-store';
 import { cn } from '@lib/utils';
 import { ArrowRightToLine } from 'lucide-react';
@@ -10,10 +9,8 @@ import { useTranslations } from 'next-intl';
 
 export function MobileNavButton() {
   const { isExpanded, showMobileNav } = useSidebarStore();
-  const { isDark } = useTheme();
   const t = useTranslations('mobile.navigation');
 
-  // If the sidebar is expanded, return null, do not render the button
   if (isExpanded) {
     return null;
   }
@@ -33,35 +30,27 @@ export function MobileNavButton() {
         'select-none',
         'border border-transparent',
         'cursor-e-resize',
-        isDark
-          ? 'text-gray-200 focus-visible:ring-stone-500 focus-visible:ring-offset-gray-900'
-          : 'focus-visible:ring-primary focus-visible:ring-offset-background text-gray-200'
+        'focus-visible:ring-primary focus-visible:ring-offset-background text-gray-200 dark:focus-visible:ring-stone-500 dark:focus-visible:ring-offset-gray-900'
       )}
     >
-      {/* Hover background */}
       <div
         className={cn(
           'absolute inset-0 rounded-lg transition-all duration-150 ease-in-out',
-          isDark ? 'group-hover:bg-stone-600/60' : 'group-hover:bg-stone-300/80'
+          'group-hover:bg-stone-300/80 dark:group-hover:bg-stone-600/60'
         )}
       />
-      {/* Icon body */}
       <span
         className={cn(
           'relative z-10 flex h-5 w-5 flex-shrink-0 items-center justify-center',
-          isDark
-            ? 'text-gray-400 group-hover:text-white'
-            : 'text-gray-500 group-hover:text-stone-800'
+          'text-gray-500 group-hover:text-stone-800 dark:text-gray-400 dark:group-hover:text-white'
         )}
       >
-        {/* Default window icon - fade in and out when hovering */}
         <WidePanelLeft
           className={cn(
             'absolute h-5 w-5 transition-all duration-150 ease-out',
             'group-hover:scale-125 group-hover:opacity-0'
           )}
         />
-        {/* Right arrow displayed when hovering */}
         <ArrowRightToLine
           className={cn(
             'absolute h-4 w-4 transition-all duration-150 ease-out',