feat(theme): Complete theme color migration for multiple modules

moon/apps/web/components/ClBox/ChecksSection.tsx

@@ -69,13 +69,13 @@ const CheckStatus = ({
   return (
     <div className='flex w-full items-center px-3 py-0'>
       {hasFailures ? (
-        <AlertIcon className='mr-3 h-5 w-5 text-yellow-600' />
+        <AlertIcon className='mr-3 h-5 w-5 text-yellow-600 dark:text-yellow-500' />
       ) : (
-        <CheckIcon className='mr-3 h-5 w-5 text-green-700' />
+        <CheckIcon className='mr-3 h-5 w-5 text-green-700 dark:text-green-400' />
       )}
       <div>
         <p className='font-semibold'>{hasFailures ? 'Some checks were not successful' : 'All checks have passed'}</p>
-        <p className='text-sm text-gray-600'>{statusInfo.join(', ')}</p>
+        <p className='text-tertiary text-sm'>{statusInfo.join(', ')}</p>
       </div>
       <div className='ml-auto flex items-center gap-2'>
         {isOutdated && (
@@ -85,8 +85,7 @@ const CheckStatus = ({
               onUpdateBranch()
             }}
             disabled={isUpdating}
-            style={{ backgroundColor: '#f6f8fa' }}
-            className='flex-shrink-0 rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50'
+            className='border-primary bg-secondary hover:bg-tertiary text-secondary flex-shrink-0 rounded-md border px-3 py-1.5 text-sm font-medium disabled:cursor-not-allowed disabled:opacity-50'
           >
             {isUpdating ? (
               <span className='flex items-center gap-1.5'>
@@ -106,7 +105,7 @@ const CheckStatus = ({
 
 const CheckGroup = ({ title, checks }: CheckGroupProps) => (
   <div className='mb-2'>
-    <h4 className='px-2 py-1 text-xs font-bold uppercase text-gray-500'>
+    <h4 className='text-tertiary px-2 py-1 text-xs font-bold uppercase'>
       {title} ({checks.length})
     </h4>
     <div>
@@ -141,25 +140,25 @@ const getStatusIcon = (status: AdditionalCheckStatus) => {
 }
 
 const AdditionalCheckItemComponent = ({ check }: AdditionalCheckItemProps) => (
-  <div className='flex items-start border-b border-gray-100 px-2 py-2 last:border-b-0'>
+  <div className='border-primary flex items-start border-b px-2 py-2 last:border-b-0'>
     <div className='mr-3 mt-0.5 flex-shrink-0'>{getStatusIcon(check.result)}</div>
     <div className='min-w-0 flex-1'>
       <div className='flex items-center justify-between'>
-        <h5 className='text-sm font-medium text-gray-900'>{ADDITIONAL_CHECK_LABELS[check.type]}</h5>
+        <h5 className='text-primary text-sm font-medium'>{ADDITIONAL_CHECK_LABELS[check.type]}</h5>
         <span
           className={`rounded-full px-2 py-1 text-xs font-medium ${
             check.result === 'PASSED'
-              ? 'bg-green-100 text-green-800'
+              ? 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200'
               : check.result === 'FAILED'
-                ? 'bg-red-100 text-red-800'
-                : 'bg-gray-100 text-gray-800'
+                ? 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200'
+                : 'bg-secondary text-secondary'
           }`}
         >
           {check.result.toLowerCase()}
         </span>
       </div>
       {check.result === 'FAILED' && (
-        <ul className='mt-1 list-inside list-disc text-sm text-red-600'>
+        <ul className='mt-1 list-inside list-disc text-sm text-red-600 dark:text-red-400'>
           <li className='list-inside'>{check.message}</li>
         </ul>
       )}
@@ -178,7 +177,7 @@ const AdditionalChecksSection = ({ additionalChecks }: AdditionalChecksSectionPr
 
   return (
     <div className='mt-2 border-t pt-2'>
-      <h4 className='mb-2 px-2 py-1 text-xs font-bold uppercase text-gray-500'>
+      <h4 className='text-tertiary mb-2 px-2 py-1 text-xs font-bold uppercase'>
         Additional Checks ({additionalChecks.length})
       </h4>
       <div className='space-y-1'>
@@ -236,7 +235,7 @@ export function ChecksSection({ checks, onStatusChange, additionalChecks, clLink
     <>
       <Collapsible.Root open={open} onOpenChange={setOpen}>
         {/* CheckStatus section */}
-        <Collapsible.Trigger className='flex w-full cursor-pointer rounded-md hover:bg-gray-100'>
+        <Collapsible.Trigger className='hover:bg-tertiary flex w-full cursor-pointer rounded-md'>
           <CheckStatus
             hasFailures={hasFailures}
             failureCount={failureCount}

moon/apps/web/components/ClBox/MergeBox.tsx

@@ -65,13 +65,13 @@ export const MergeBox = React.memo<{ prId: string; status?: string }>(({ prId, s
 
   return (
     <div className='flex'>
-      <FeedMergedIcon size={24} className='ml-1 text-gray-500' />
+      <FeedMergedIcon size={24} className='text-tertiary ml-1' />
       {isReviewerLoading && isAdditionLoading ? (
         <div className='flex h-[400px] items-center justify-center'>
           <LoadingSpinner />
         </div>
       ) : (
-        <div className='ml-3 w-full divide-y rounded-lg border bg-white'>
+        <div className='border-primary bg-primary ml-3 w-full divide-y rounded-lg border'>
           <ReviewerSection required={required} actual={actual} />
           <ChecksSection
             checks={checks}

moon/apps/web/components/ClBox/ReviewerSection.tsx

@@ -10,7 +10,7 @@ export function ReviewerSection({ required, actual }: ReviewerSectionProps) {
 
   if (isApproved) {
     return (
-      <div className='flex items-center p-3 text-green-700'>
+      <div className='flex items-center p-3 text-green-700 dark:text-green-400'>
         <CheckCircleIcon className='mr-3 h-5 w-5' />
         <div>
           <span className='font-semibold'>All required reviewers have approved</span>
@@ -20,11 +20,11 @@ export function ReviewerSection({ required, actual }: ReviewerSectionProps) {
   }
 
   return (
-    <div className='flex items-center p-3 text-gray-800'>
-      <AlertIcon className='mr-3 h-5 w-5 text-yellow-600' />
+    <div className='text-primary flex items-center p-3'>
+      <AlertIcon className='mr-3 h-5 w-5 text-yellow-600 dark:text-yellow-500' />
       <div>
         <div className='font-semibold'>Review required</div>
-        <div className='ml-auto text-sm text-gray-500'>
+        <div className='text-tertiary ml-auto text-sm'>
           {`At least ${required} reviewer${required > 1 ? 's' : ''} required with write access, now has ${actual}`}
         </div>
       </div>

moon/apps/web/components/ClBox/components/CheckGroup.tsx

@@ -26,18 +26,18 @@ export function CheckGroup({ title, summary, status, children }: CheckGroupProps
   return (
     <div className={`border-l-4 ${color} rounded`}>
       <Collapsible.Root open={isOpen} onOpenChange={setIsOpen}>
-        <Collapsible.Trigger className='flex w-full items-center justify-between rounded-t bg-gray-50 p-3'>
+        <Collapsible.Trigger className='bg-secondary flex w-full items-center justify-between rounded-t p-3'>
           <div className='flex items-center'>
-            <h4 className='font-bold text-gray-900'>{title}</h4>
-            <span className='ml-4 text-sm text-gray-600'>{summary}</span>
+            <h4 className='text-primary font-bold'>{title}</h4>
+            <span className='text-tertiary ml-4 text-sm'>{summary}</span>
           </div>
           {isOpen ? (
-            <ArrowUpIcon className='h-5 w-5 text-gray-500' />
+            <ArrowUpIcon className='text-tertiary h-5 w-5' />
           ) : (
-            <ArrowDownIcon className='h-5 w-5 text-gray-500' />
+            <ArrowDownIcon className='text-tertiary h-5 w-5' />
           )}
         </Collapsible.Trigger>
-        <Collapsible.Content className='rounded-b bg-white p-2'>{children}</Collapsible.Content>
+        <Collapsible.Content className='bg-primary rounded-b p-2'>{children}</Collapsible.Content>
       </Collapsible.Root>
     </div>
   )

moon/apps/web/components/ClBox/components/MergeCheckItem.tsx

@@ -3,23 +3,23 @@ import { AlertIcon, CheckCircleIcon, WarningTriangleIcon } from '@gitmono/ui'
 import { TaskData } from '../types/mergeCheck.config'
 
 const statusMap = {
-  Pending: { Icon: WarningTriangleIcon, className: 'text-yellow-600' },
-  Success: { Icon: CheckCircleIcon, className: 'text-green-600' },
-  Failure: { Icon: AlertIcon, className: 'text-red-600' },
-  Warning: { Icon: WarningTriangleIcon, className: 'text-yellow-600' } // GitHub 通常用黄点表示 in-progress 或 warning
+  Pending: { Icon: WarningTriangleIcon, className: 'text-yellow-600 dark:text-yellow-500' },
+  Success: { Icon: CheckCircleIcon, className: 'text-green-600 dark:text-green-400' },
+  Failure: { Icon: AlertIcon, className: 'text-red-600 dark:text-red-400' },
+  Warning: { Icon: WarningTriangleIcon, className: 'text-yellow-600 dark:text-yellow-500' }
 }
 
 export function MergeCheckItem({ check }: { check: TaskData }) {
   const { Icon, className } = statusMap[check.status]
 
   return (
-    <div className='flex items-center rounded-md p-2 hover:bg-gray-100'>
+    <div className='hover:bg-tertiary flex items-center rounded-md p-2'>
       <Icon className={`h-5 w-5 flex-shrink-0 ${className}`} />
       <div className='ml-3 flex-grow'>
-        <span className='font-semibold text-gray-800'>{check.repo_name}</span>
-        {check.arguments && <span className='ml-2 text-sm text-gray-500'>{check.arguments}</span>}
+        <span className='text-primary font-semibold'>{check.repo_name}</span>
+        {check.arguments && <span className='text-tertiary ml-2 text-sm'>{check.arguments}</span>}
       </div>
-      <button className='text-gray-500 hover:text-gray-800'></button>
+      <button className='text-tertiary hover:text-primary'></button>
     </div>
   )
 }

moon/apps/web/components/ClView/CLComment.tsx

@@ -45,8 +45,8 @@ const Comment = React.memo<CommentProps>(({ conv, id, whoamI, editorRef }: Comme
   const [refresh, setRefresh] = useAtom(refreshAtom)
 
   return (
-    <div className='overflow-hidden rounded-lg border border-gray-300 bg-white'>
-      <div className='flex items-center justify-between border-b border-gray-300 px-4 py-2'>
+    <div className='border-primary bg-primary overflow-hidden rounded-lg border'>
+      <div className='border-primary flex items-center justify-between border-b px-4 py-2'>
         <div className='flex items-center space-x-3'>
           <div className='cursor-pointer'>
             <ConditionalWrap
@@ -76,7 +76,7 @@ const Comment = React.memo<CommentProps>(({ conv, id, whoamI, editorRef }: Comme
               </UIText>
             </ConditionalWrap>
           </div>
-          <div className='text-sm text-gray-500 hover:text-gray-700'>
+          <div className='text-tertiary hover:text-secondary text-sm'>
             <HandleTime created_at={conv.created_at} />
           </div>
         </div>

moon/apps/web/components/ClView/ConversationTab.tsx

@@ -192,11 +192,13 @@ export const ConversationTab = React.memo<ConversationTabProps>(
           emptyExtra={
             clDetail &&
             clDetail.status === 'Open' && (
-              <div className='mt-2 text-xs text-gray-900'>
+              <div className='text-primary mt-2 text-xs'>
                 <span>Still in progress? </span>
                 <ConvertToDraftDialog
                   trigger={
-                    <span className='cursor-pointer text-gray-500 underline hover:text-gray-700'>Convert to draft</span>
+                    <span className='text-tertiary hover:text-secondary cursor-pointer underline'>
+                      Convert to draft
+                    </span>
                   }
                   link={clDetail.link}
                 />
@@ -214,12 +216,14 @@ export const ConversationTab = React.memo<ConversationTabProps>(
                   const isApproved = reviewer?.approved ?? false
 
                   return (
-                    <div key={i} className='mb-4 flex items-center gap-2 px-4 text-sm text-gray-500'>
+                    <div key={i} className='text-tertiary mb-4 flex items-center gap-2 px-4 text-sm'>
                       <MemberAvatar size='sm' member={memberMap.get(i)} />
                       <span className='flex-1'>{i}</span>
                       <span
                         className={`ml-2 inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${
-                          isApproved ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                          isApproved
+                            ? 'bg-green-100 text-green-800 dark:bg-green-950 dark:text-green-200'
+                            : 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200'
                         }`}
                       >
                         {isApproved ? 'Approved' : 'Pending'}
@@ -241,7 +245,7 @@ export const ConversationTab = React.memo<ConversationTabProps>(
                             e.stopPropagation()
                             handleDeleteReviewer(i)
                           }}
-                          className='pointer-events-auto cursor-pointer rounded-full border-2 hover:bg-red-800'
+                          className='pointer-events-auto cursor-pointer rounded-full border-2 hover:bg-red-800 hover:text-white'
                         >
                           <TrashIcon />
                         </span>
@@ -250,11 +254,11 @@ export const ConversationTab = React.memo<ConversationTabProps>(
                   )
                 })}
                 {clDetail && clDetail.status === 'Open' && (
-                  <div className='pointer-events-auto mt-2 px-4 text-xs text-gray-900'>
+                  <div className='text-primary pointer-events-auto mt-2 px-4 text-xs'>
                     <span>Still in progress? </span>
                     <ConvertToDraftDialog
                       trigger={
-                        <span className='cursor-pointer text-gray-500 underline hover:text-gray-700'>
+                        <span className='text-tertiary hover:text-secondary cursor-pointer underline'>
                           Convert to draft
                         </span>
                       }
@@ -281,7 +285,7 @@ export const ConversationTab = React.memo<ConversationTabProps>(
             return (
               <>
                 {names.map((i) => (
-                  <div key={i} className='mb-4 flex items-center gap-2 px-4 text-sm text-gray-500'>
+                  <div key={i} className='text-tertiary mb-4 flex items-center gap-2 px-4 text-sm'>
                     <MemberAvatar size='sm' member={memberMap.get(i)} />
                     <span>{i}</span>
                   </div>
@@ -327,7 +331,7 @@ export const ConversationTab = React.memo<ConversationTabProps>(
         <BadgeItem title='Type' items={labels} />
         <BadgeItem title='Projects' items={labels} />
         <BadgeItem title='Milestones' items={labels} />
-        <div className='w-full' style={{ marginTop: '24px' }}>
+        <div className='mt-6 w-full'>
           <WorkWithChatDialog />
         </div>
       </div>

moon/apps/web/components/ClView/ReviewComment.tsx

@@ -105,20 +105,22 @@ const ReviewComment = React.memo<ReviewCommentProps>(
 
     return (
       <div
-        className={`overflow-hidden rounded-lg border-2 bg-white ${
-          isResolved ? 'border-green-200 bg-green-50' : 'border-blue-200 bg-blue-50'
+        className={`overflow-hidden rounded-lg border-2 ${
+          isResolved
+            ? 'border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950'
+            : 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950'
         }`}
       >
-        <div className='bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800'>
+        <div className='bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200'>
           📝 Review Comment
           {isResolved && (
-            <span className='ml-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800'>
+            <span className='ml-2 inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200'>
               ✓ Resolved
             </span>
           )}
         </div>
 
-        <div className='flex items-center justify-between border-b border-blue-200 px-4 py-2'>
+        <div className='border-primary flex items-center justify-between border-b px-4 py-2'>
           <div className='flex items-center space-x-3'>
             <div className='cursor-pointer'>
               <ConditionalWrap
@@ -148,7 +150,7 @@ const ReviewComment = React.memo<ReviewCommentProps>(
                 </UIText>
               </ConditionalWrap>
             </div>
-            <div className='text-sm text-gray-500 hover:text-gray-700'>
+            <div className='text-tertiary hover:text-secondary text-sm'>
               <HandleTime created_at={conv.created_at} />
             </div>
           </div>
@@ -158,7 +160,7 @@ const ReviewComment = React.memo<ReviewCommentProps>(
                 size='sm'
                 variant='base'
                 onClick={handleResolve}
-                className='border-green-300 text-green-600 hover:bg-green-50'
+                className='border-green-300 text-green-600 hover:bg-green-50 dark:border-green-700 dark:text-green-400 dark:hover:bg-green-950'
               >
                 Resolve Conversation
               </Button>

moon/apps/web/components/ClView/TimelineItems.tsx

@@ -1,7 +1,4 @@
 import React, { useMemo } from 'react'
-
-import '@primer/primitives/dist/css/functional/themes/light.css'
-
 import {
   CheckCircleIcon,
   CommentIcon,
@@ -14,6 +11,7 @@ import {
   RepoPushIcon
 } from '@primer/octicons-react'
 import { BaseStyles, ThemeProvider, Timeline } from '@primer/react'
+import { useTheme } from 'next-themes'
 
 import { ConversationItem, ReviewerInfo } from '@gitmono/types/generated'
 
@@ -63,8 +61,10 @@ const TimelineItem = React.memo(({ badge, children, isOver }: TimelineItemProps)
 TimelineItem.displayName = 'TimelineItem'
 
 const TimelineWrapper = React.memo<TimelineWrapperProps>(({ convItems = [] }) => {
+  const { theme } = useTheme()
+
   return (
-    <ThemeProvider>
+    <ThemeProvider colorMode={theme === 'dark' ? 'dark' : 'light'}>
       <BaseStyles>
         <Timeline clipSidebar>
           {convItems?.map((item) => (
@@ -106,38 +106,38 @@ const TimelineItems = React.memo<{
               icon = <CommentIcon />
               children = <CLComment conv={conv} id={id} whoamI={type} editorRef={editorRef} />
             } else {
-              icon = <CheckCircleIcon size={24} className='text-blue-500' />
+              icon = <CheckCircleIcon size={24} className='text-blue-500 dark:text-blue-400' />
               children = <ReviewComment reviewers={reviewers} conv={conv} id={id} whoamI={type} editorRef={editorRef} />
             }
             break
           case 'Approve':
-            icon = <CheckCircleIcon size={24} className='text-green-500' />
+            icon = <CheckCircleIcon size={24} className='text-green-500 dark:text-green-400' />
             children = <ApproveItem conv={conv} />
             break
           case 'Merged':
-            icon = <FeedMergedIcon size={24} className='text-purple-500' />
+            icon = <FeedMergedIcon size={24} className='text-purple-500 dark:text-purple-400' />
             children = <MergedItem conv={conv} />
             isOver = true
             break
           case 'Closed':
-            icon = <FeedPullRequestClosedIcon size={24} className='text-red-600' />
+            icon = <FeedPullRequestClosedIcon size={24} className='text-red-600 dark:text-red-400' />
             children = <CloseItem conv={conv} />
             isOver = true
             break
           case 'Draft':
-            icon = <GitPullRequestDraftIcon size={16} className='text-[#6e7781]' />
+            icon = <GitPullRequestDraftIcon size={16} className='text-tertiary' />
             children = <EditItem conv={conv} />
             break
           case 'Reopen':
-            icon = <FeedPullRequestOpenIcon size={24} className='text-green-500' />
+            icon = <FeedPullRequestOpenIcon size={24} className='text-green-500 dark:text-green-400' />
             children = <ReopenItem conv={conv} />
             break
           case 'Assignee':
-            icon = <PersonIcon size={24} />
+            icon = <PersonIcon size={24} className='text-tertiary' />
             children = <AssigneeItem conv={conv} />
             break
           case 'Label':
-            icon = <FeedTagIcon size={24} className='text-cyan-500' />
+            icon = <FeedTagIcon size={24} className='text-cyan-500 dark:text-cyan-400' />
             children = <LabelItem conv={conv} />
             break
           case 'ForcePush':