Skip to content

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

Merged
benjamin-747 merged 4 commits into
gitmono-dev:mainfrom
juanlou1217:main
Feb 2, 2026
Merged

feat(theme): Complete theme color migration for multiple modules#1875
benjamin-747 merged 4 commits into
gitmono-dev:mainfrom
juanlou1217:main

Conversation

@juanlou1217

Copy link
Copy Markdown
Contributor

完成 CL、Issue、Queue、OC 和 Settings 模块主题颜色迁移

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request completes the theme color migration for multiple modules (CL, Issue, Queue, OC, and Settings) to support dynamic theming with dark mode. The changes replace hardcoded color values with semantic theme tokens and integrate Primer's theme system.

Changes:

  • Imported Primer theme CSS files for light and dark mode support in global styles
  • Integrated useTheme hook and configured ThemeProvider with proper color modes in Issue and CL detail pages
  • Migrated hardcoded colors to semantic theme tokens (text-primary, text-secondary, text-tertiary, text-quaternary, bg-primary, bg-secondary, etc.) across Queue, Settings, Issue, ClView, and ClBox components
  • Added dark mode variants throughout components using Tailwind's dark: prefix
  • Cleaned up CSS comments and consolidated imports for better maintainability

Reviewed changes

Copilot reviewed 29 out of 29 changed files in this pull request and generated 11 comments.

Show a summary per file
File Description
moon/apps/web/styles/global.css Added Primer theme CSS imports for light and dark mode support
moon/apps/web/pages/[org]/issue/[link]/index.tsx Integrated useTheme hook and configured ThemeProvider with dynamic color mode
moon/apps/web/pages/[org]/cl/[link]/index.tsx Added useTheme hook, configured ThemeProvider, and migrated inline color to semantic token
moon/apps/web/components/Theme/ThemedMarkdown/ThemedMarkdown.module.css Removed CSS comments and font-family property from code elements
moon/apps/web/components/Setting/SSHKeys.tsx Updated background colors with dark mode support
moon/apps/web/components/Setting/PersonalToken.tsx Migrated to semantic tokens with comprehensive dark mode variants, improved layout structure
moon/apps/web/components/Setting/GPGKeys.tsx Updated background colors with dark mode support
moon/apps/web/components/QueueView/stats.tsx Migrated all colors to semantic tokens with dark mode variants for status indicators
moon/apps/web/components/QueueView/items.tsx Added dark mode variants to status icons and UI elements
moon/apps/web/components/OrionClient/ClientsTable.tsx Added !important flags to override conflicting styles
moon/apps/web/components/Issues/WorkWithChatDialog.tsx Migrated inline styles to semantic tokens with dark mode text colors, improved textarea styling
moon/apps/web/components/Issues/TitleInput.tsx Migrated text colors to semantic tokens
moon/apps/web/components/CodeView/Tags/NewMonoTagDialog.tsx Consolidated duplicate imports
moon/apps/web/components/ClView/index.tsx Migrated search bar styling to semantic tokens with dark mode support
moon/apps/web/components/ClView/filters/dropdown/ReviewDropdown.tsx Updated dropdown background to use semantic token
moon/apps/web/components/ClView/filters/dropdown/OrderDropdown.tsx Updated dropdown background to use semantic token
moon/apps/web/components/ClView/filters/FilterDropdown.tsx Updated dropdown backgrounds to use semantic tokens
moon/apps/web/components/ClView/filters/DropdownItems.tsx Migrated text colors to semantic tokens
moon/apps/web/components/ClView/components/Checks/index.tsx Comprehensive migration to semantic tokens across all loading states and UI elements
moon/apps/web/components/ClView/components/Checks/cpns/Task.tsx Migrated text colors to semantic tokens with dark mode variants for status icons
moon/apps/web/components/ClView/TimelineItems.tsx Removed duplicate CSS import, added useTheme hook and ThemeProvider integration, added dark mode variants to timeline icons
moon/apps/web/components/ClView/ReviewComment.tsx Added comprehensive dark mode support with proper border and background colors
moon/apps/web/components/ClView/ConversationTab.tsx Migrated text colors to semantic tokens with dark mode badge variants
moon/apps/web/components/ClView/CLComment.tsx Migrated border and text colors to semantic tokens
moon/apps/web/components/ClBox/components/MergeCheckItem.tsx Added dark mode variants to status icons and text colors
moon/apps/web/components/ClBox/components/CheckGroup.tsx Migrated background and text colors to semantic tokens
moon/apps/web/components/ClBox/ReviewerSection.tsx Added dark mode variants for success and warning states
moon/apps/web/components/ClBox/MergeBox.tsx Migrated icon and container colors to semantic tokens
moon/apps/web/components/ClBox/ChecksSection.tsx Comprehensive migration to semantic tokens with dark mode variants for all check states

<div className='flex items-center gap-2 rounded-t-lg px-3 py-2' style={{ backgroundColor: '#e6e8ea' }}>
<div className='bg-secondary flex items-center gap-2 rounded-t-lg px-3 py-2'>
<div className='flex h-6 w-6 items-center justify-center rounded' style={{ backgroundColor: '#52b5f2' }}>
<DiscussionClosedIcon size={14} className='text-black' />

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The icon uses 'text-black' which won't adapt to theme changes. In dark mode, this black icon on the blue background might have insufficient contrast. Consider using a theme-aware text color.

Copilot uses AI. Check for mistakes.

return (
<ThemeProvider>
<ThemeProvider colorMode={theme === 'dark' ? 'night' : 'day'}>

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colorMode values 'night' and 'day' are inconsistent with the rest of the codebase. Other components use 'dark' and 'light' (e.g., in Issue and CL detail pages). This inconsistency could lead to theme not being applied correctly. Consider using 'dark' and 'light' to match the pattern used elsewhere.

Suggested change
<ThemeProvider colorMode={theme === 'dark' ? 'night' : 'day'}>
<ThemeProvider colorMode={theme === 'dark' ? 'dark' : 'light'}>

Copilot uses AI. Check for mistakes.
background-color: var(--bgColor-neutral-muted);
border-radius: 6px;
font-family: var(--fontStack-monospace);
}

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The removal of the font-family property referencing --fontStack-monospace may cause code blocks to lose their monospace font styling. The variable is still defined (line 16) but no longer used. Consider either keeping the font-family property or removing the unused CSS variable definition as well.

Copilot uses AI. Check for mistakes.
Comment on lines 43 to 46
<div
className='mb-3 flex h-16 w-16 items-center justify-center rounded-lg'
style={{ backgroundColor: '#52b5f2' }}
>

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The background color is still hardcoded as '#52b5f2' using inline styles. For consistency with the theme migration, consider using a semantic color token or defining this color in a theme-aware way.

Suggested change
<div
className='mb-3 flex h-16 w-16 items-center justify-center rounded-lg'
style={{ backgroundColor: '#52b5f2' }}
>
<div className='mb-3 flex h-16 w-16 items-center justify-center rounded-lg bg-primary'>

Copilot uses AI. Check for mistakes.
Comment on lines 58 to 59
<div className='flex h-6 w-6 items-center justify-center rounded' style={{ backgroundColor: '#52b5f2' }}>
<DiscussionClosedIcon size={14} className='text-black' />

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The background color '#52b5f2' is still hardcoded using inline styles. For consistency with the theme migration, consider using a semantic color token or defining this color in a theme-aware way.

Copilot uses AI. Check for mistakes.
Comment on lines +301 to 302
className='border-primary h-full w-1 flex-shrink-0 cursor-col-resize transition-colors hover:bg-blue-400'
style={{ backgroundColor: isDragging ? '#60a5fa' : undefined }}

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The inline style for backgroundColor is conditionally set but still uses a hardcoded color '#60a5fa'. Consider using a theme-aware class or CSS variable to support dark mode properly.

Suggested change
className='border-primary h-full w-1 flex-shrink-0 cursor-col-resize transition-colors hover:bg-blue-400'
style={{ backgroundColor: isDragging ? '#60a5fa' : undefined }}
className={`border-primary h-full w-1 flex-shrink-0 cursor-col-resize transition-colors hover:bg-blue-400 ${isDragging ? 'bg-blue-400' : ''}`}

Copilot uses AI. Check for mistakes.
onChange={(v) => onStatusChange(v as OrionClientStatus | 'all')}
>
<SelectTrigger className='text-muted-foreground h-auto w-full justify-start gap-1 border-none bg-transparent p-0 text-[11px] font-semibold uppercase shadow-none ring-0 focus:outline-none focus:ring-0'>
<SelectTrigger className='text-muted-foreground h-auto w-full justify-start gap-1 !border-none !bg-transparent p-0 text-[11px] font-semibold uppercase !shadow-none ring-0 focus:outline-none focus:ring-0'>

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using !important flags (!border-none, !bg-transparent, !shadow-none) in Tailwind classes suggests there might be specificity conflicts with other styles. Consider investigating and resolving the underlying CSS specificity issue rather than relying on !important modifiers.

Suggested change
<SelectTrigger className='text-muted-foreground h-auto w-full justify-start gap-1 !border-none !bg-transparent p-0 text-[11px] font-semibold uppercase !shadow-none ring-0 focus:outline-none focus:ring-0'>
<SelectTrigger className='text-muted-foreground h-auto w-full justify-start gap-1 border-none bg-transparent p-0 text-[11px] font-semibold uppercase shadow-none ring-0 focus:outline-none focus:ring-0'>

Copilot uses AI. Check for mistakes.
className='mb-3 flex h-16 w-16 items-center justify-center rounded-lg'
style={{ backgroundColor: '#52b5f2' }}
>
<DiscussionClosedIcon size={24} className='text-black' />

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The icon uses 'text-black' which won't adapt to theme changes. In dark mode, this black icon on the blue background might have insufficient contrast. Consider using a theme-aware text color or ensuring the contrast ratio meets WCAG AA standards (at least 4.5:1) in both light and dark modes.

Suggested change
<DiscussionClosedIcon size={24} className='text-black' />
<DiscussionClosedIcon size={24} className='text-secondary' />

Copilot uses AI. Check for mistakes.
<div className='border-primary bg-primary dark:bg-tertiary text-secondary mx-auto max-w-4xl rounded-lg border p-8 font-sans'>
<header className='flex items-center justify-between pb-4'>
<h1 className='text-primary text-3xl font-bold'>SSH keys</h1>
<Button variant='primary' className='bg-[#1f883d]' leftSlot={<PlusIcon />} onClick={() => setOpen(true)}>

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The button background color '#1f883d' is hardcoded. For consistency with the theme migration, consider using a semantic color token. If this is intended to be GitHub's green, consider using a theme variable that can adapt to dark mode.

Suggested change
<Button variant='primary' className='bg-[#1f883d]' leftSlot={<PlusIcon />} onClick={() => setOpen(true)}>
<Button variant='primary' className='bg-primary' leftSlot={<PlusIcon />} onClick={() => setOpen(true)}>

Copilot uses AI. Check for mistakes.
Comment on lines +25 to +33
return <GitPullRequestIcon className='text-[#378f50] dark:text-green-400' />
case QueueStatus.Testing:
return <GitPullRequestIcon className='text-[#2f81f7]' />
return <GitPullRequestIcon className='text-[#2f81f7] dark:text-blue-400' />
case QueueStatus.Merging:
return <GitMergeIcon className='text-[#986ee2]' />
return <GitMergeIcon className='text-[#986ee2] dark:text-purple-400' />
case QueueStatus.Merged:
return <GitMergeIcon className='text-gray-500' />
return <GitMergeIcon className='text-tertiary' />
case QueueStatus.Failed:
return <GitPullRequestClosedIcon className='text-[#d1242f]' />
return <GitPullRequestClosedIcon className='text-[#d1242f] dark:text-red-400' />

Copilot AI Feb 1, 2026

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Several hardcoded hex colors remain in this component ('#378f50', '#2f81f7', '#986ee2', '#d1242f'). While dark mode variants have been added, consider using semantic color tokens consistently throughout the codebase for better maintainability.

Copilot uses AI. Check for mistakes.
@benjamin-747 benjamin-747 added this pull request to the merge queue Feb 2, 2026
Merged via the queue into gitmono-dev:main with commit 346c0ad Feb 2, 2026
7 checks passed
Chen-Rong-Zi pushed a commit to Chen-Rong-Zi/mega that referenced this pull request Feb 3, 2026
…mono-dev#1875)

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules
Chen-Rong-Zi pushed a commit to Chen-Rong-Zi/mega that referenced this pull request Feb 3, 2026
…mono-dev#1875)

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules
Chen-Rong-Zi pushed a commit to Chen-Rong-Zi/mega that referenced this pull request Feb 3, 2026
…mono-dev#1875)

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules
AidCheng pushed a commit to AidCheng/mega that referenced this pull request Feb 5, 2026
…mono-dev#1875)

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>
github-merge-queue Bot pushed a commit that referenced this pull request Feb 11, 2026
…d WebSocket (#1909)

* refactor: some modules (#4)

* feat: add refactor orion module for migration

Signed-off-by: Wangyan <topshihun@foxmail.com>

* fix: add CL for build

Signed-off-by: Wangyan <topshihun@foxmail.com>

* refactor: some modules

Signed-off-by: Wangyan <topshihun@foxmail.com>

---------

Signed-off-by: Wangyan <topshihun@foxmail.com>
Signed-off-by: Aid_C <57825561+AidCheng@users.noreply.github.com>
Co-authored-by: Aid_C <57825561+AidCheng@users.noreply.github.com>

* [orion]REFACTOR: Integrate generic jupiter model with refactored orion structure

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* fix: enforce mount_path semantics and stabilize builds (#1836)

* fix: enforce mount_path semantics and stabilize builds

Consolidate mount_path handling with buck2 prechecks and fix BuildDTO repo handling to avoid moves.

Signed-off-by: jerry609 <1772030600@qq.com>

style: format code with cargo fmt

Signed-off-by: jerry609 <1772030600@qq.com>

chore(orion): remove unused mount helpers

Signed-off-by: jerry609 <1772030600@qq.com>

fix(orion): retry buck2 targets once on failure

Signed-off-by: jerry609 <1772030600@qq.com>

fix(orion): remount and retry target discovery on failure

Signed-off-by: jerry609 <1772030600@qq.com>

style(orion): format buck_controller after retry changes

Signed-off-by: jerry609 <1772030600@qq.com>

fix(orion): annotate changes type for retry path

Signed-off-by: jerry609 <1772030600@qq.com>

fix(orion): appease clippy for mount guards

Signed-off-by: jerry609 <1772030600@qq.com>

test(common): avoid clippy field reassignment lint

Signed-off-by: jerry609 <1772030600@qq.com>

* test(ceres): fix clippy lints in tests

Signed-off-by: jerry609 <1772030600@qq.com>

---------

Signed-off-by: jerry609 <1772030600@qq.com>
Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* Feature/comment reanchor (#1874)

* refactor(code_review): add anchor and position to locat code thread

* feat: add reanchor thread function

* fix: seaORM repeated

* fix: rebase error

* fix: lcs_len error

* fix: fix CR problems

* fix: error

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* feat(theme): Complete theme color migration for multiple modules (#1875)

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

* feat(theme): Complete theme color system migration for CL, Issue, Queue, OrionClient, and Settings modules

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* refactor(mono): convert third-party and buckal-bundles init to script (#1876)

Signed-off-by: MYUU <1405758738@qq.com>
Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* chore: move log models under buck2 types (#1878)

Signed-off-by: lvy010 <17338770572@163.com>
Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* test(mono): add multi-user support and files-list API (#1881)

* test(mono): Add CL merge and update-branch integration test

Signed-off-by: miliu2cc <miliu2cc@gmail.com>

* test(mono): Add CL merge and update-branch integration test

Signed-off-by: miliu2cc <miliu2cc@gmail.com>

* test(mono): add multi-user support and files-list API

Signed-off-by: miliu2cc <miliu2cc@gmail.com>

* test(mono): add multi-user support and files-list API

Signed-off-by: miliu2cc <miliu2cc@gmail.com>

---------

Signed-off-by: miliu2cc <miliu2cc@gmail.com>
Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* fix(script):cleanup per-repo .git after processing (#1884)

Signed-off-by: MYUU <1405758738@qq.com>
Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* feat: implement build trigger system (#1880)

* feat: implement build trigger system

Signed-off-by: allure <1550220889@qq.com>

* feat: refactor build trigger system and fix error

Signed-off-by: allure <1550220889@qq.com>

---------

Signed-off-by: allure <1550220889@qq.com>
Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* fix(orion): skip incompatible targets for buck2 builds (#1885)

Signed-off-by: jerry609 <1772030600@qq.com>
Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* fixed(cl): update UI for checks log section (#1887)

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* refactor: some modules (#4)

* feat: add refactor orion module for migration

Signed-off-by: Wangyan <topshihun@foxmail.com>

* fix: add CL for build

Signed-off-by: Wangyan <topshihun@foxmail.com>

* refactor: some modules

Signed-off-by: Wangyan <topshihun@foxmail.com>

---------

Signed-off-by: Wangyan <topshihun@foxmail.com>
Signed-off-by: Aid_C <57825561+AidCheng@users.noreply.github.com>
Co-authored-by: Aid_C <57825561+AidCheng@users.noreply.github.com>
Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* [buck2]REFACTOR: Integrate orion and orion server with generic api and model interface

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* FIX: use correct ProjectRelativePath crate

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* UPDATE: cargo fmt

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* [orion] Replace worker-server commun with WS msg

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* [orion]FIX: update branch and fix conflicts

* [Orion]FIX: workflow error

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* [orion]UPDATE: fix based on copilot suggestions

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* cargo fmt

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* UPDATE: temporary allow unused started at in build info

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* FIX: remove unused import

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* fmt

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

* [jupiter]REMOVE: duplicate migration

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Aid_C <57825561+AidCheng@users.noreply.github.com>

* [jupiter]FIX: temporary remove task.rs

Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>

---------

Signed-off-by: Wangyan <topshihun@foxmail.com>
Signed-off-by: Aid_C <57825561+AidCheng@users.noreply.github.com>
Signed-off-by: AidCheng <cn.aiden.cheng@gmail.com>
Signed-off-by: jerry609 <1772030600@qq.com>
Signed-off-by: MYUU <1405758738@qq.com>
Signed-off-by: lvy010 <17338770572@163.com>
Signed-off-by: miliu2cc <miliu2cc@gmail.com>
Signed-off-by: allure <1550220889@qq.com>
Co-authored-by: TOP <89700178+topshihun@users.noreply.github.com>
Co-authored-by: Jerry Zhang <1772030600@qq.com>
Co-authored-by: TianYi <2739022972@qq.com>
Co-authored-by: zhaokang <zhaokang.r2cn@isrc.iscas.ac.cn>
Co-authored-by: MYUU <52773565+zhoujiaqi30@users.noreply.github.com>
Co-authored-by: lvy010 <17338770572@163.com>
Co-authored-by: miliu2cc <98928567+miliu2cc@users.noreply.github.com>
Co-authored-by: Yao <1550220889@qq.com>
Co-authored-by: zyd123-cmd <yingdong.r2cn@isrc.iscas.ac.cn>
Co-authored-by: Tianxing Ye <benjamin.747@outlook.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants