feat(theme): Complete theme color migration for multiple modules#1875
Conversation
…ue, OrionClient, and Settings modules
…ue, OrionClient, and Settings modules
There was a problem hiding this comment.
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
useThemehook and configuredThemeProviderwith 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' /> |
There was a problem hiding this comment.
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.
|
|
||
| return ( | ||
| <ThemeProvider> | ||
| <ThemeProvider colorMode={theme === 'dark' ? 'night' : 'day'}> |
There was a problem hiding this comment.
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.
| <ThemeProvider colorMode={theme === 'dark' ? 'night' : 'day'}> | |
| <ThemeProvider colorMode={theme === 'dark' ? 'dark' : 'light'}> |
| background-color: var(--bgColor-neutral-muted); | ||
| border-radius: 6px; | ||
| font-family: var(--fontStack-monospace); | ||
| } |
There was a problem hiding this comment.
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.
| <div | ||
| className='mb-3 flex h-16 w-16 items-center justify-center rounded-lg' | ||
| style={{ backgroundColor: '#52b5f2' }} | ||
| > |
There was a problem hiding this comment.
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.
| <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'> |
| <div className='flex h-6 w-6 items-center justify-center rounded' style={{ backgroundColor: '#52b5f2' }}> | ||
| <DiscussionClosedIcon size={14} className='text-black' /> |
There was a problem hiding this comment.
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.
| className='border-primary h-full w-1 flex-shrink-0 cursor-col-resize transition-colors hover:bg-blue-400' | ||
| style={{ backgroundColor: isDragging ? '#60a5fa' : undefined }} |
There was a problem hiding this comment.
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.
| 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' : ''}`} |
| 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'> |
There was a problem hiding this comment.
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.
| <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'> |
| className='mb-3 flex h-16 w-16 items-center justify-center rounded-lg' | ||
| style={{ backgroundColor: '#52b5f2' }} | ||
| > | ||
| <DiscussionClosedIcon size={24} className='text-black' /> |
There was a problem hiding this comment.
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.
| <DiscussionClosedIcon size={24} className='text-black' /> | |
| <DiscussionClosedIcon size={24} className='text-secondary' /> |
| <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)}> |
There was a problem hiding this comment.
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.
| <Button variant='primary' className='bg-[#1f883d]' leftSlot={<PlusIcon />} onClick={() => setOpen(true)}> | |
| <Button variant='primary' className='bg-primary' leftSlot={<PlusIcon />} onClick={() => setOpen(true)}> |
| 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' /> |
There was a problem hiding this comment.
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.
…ue, OrionClient, and Settings modules
…ue, OrionClient, and Settings modules
…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
…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
…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
…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>
…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>
完成 CL、Issue、Queue、OC 和 Settings 模块主题颜色迁移