feat(FR-1573): Add theme setting section in maintenance page #4638

ironAiken2 · 2025-11-14T05:26:18Z

Add theme customization feature to user settings

This PR adds a new theme customization section to the user settings page, allowing users to personalize the UI colors for both light and dark modes. Users can customize:

Primary color (used for buttons, key actions, and logo background)
Header background color
Link color
Info color
Error color
Success color
Text color

The implementation includes:

New theme customization UI with color pickers for both light/dark modes
Reset functionality at both group and individual setting levels
Storage of custom theme configurations in user settings
Improved layout for settings components with proper alignment and spacing
Added translations for all theme customization options

Next Steps

Provides preview functionality using session storage via a dedicated preview mode browser
Transfers and applies config stored in local storage to the preview browser

Checklist:

Documentation
Minium required manager version
Specific setting for review (User Settings page > Theme section)
Minimum requirements to check during review
Test case(s) to demonstrate the difference of before/after

ironAiken2 · 2025-11-14T05:26:36Z

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

flow:merge-queue - adds this PR to the back of the merge queue
flow:hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

_{An organization admin has required the Graphite Merge Queue in this repository.} _{Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.}

This stack of pull requests is managed by Graphite. Learn more about stacking.

github-actions · 2025-11-14T05:28:35Z

Coverage report for `./react`

St.^❔	Category	Percentage	Covered / Total
🔴	Statements	4.45%	517/11628
🔴	Branches	3.6%	297/8246
🔴	Functions	2.58%	92/3560
🔴	Lines	4.42%	503/11375

Test suite run success

118 tests passing in 13 suites.

Report generated by 🧪jest coverage report action from eacf860

Copilot

Pull Request Overview

This PR adds a comprehensive theme customization feature to the user settings page, enabling users to personalize UI colors for both light and dark modes. The implementation includes color customization for 7 theme aspects (primary, header background, link, info, error, success, and text colors), with reset functionality at both individual setting and group levels, and full internationalization support across 18 languages.

Key Changes

New theme customization UI with dual color pickers (light/dark mode) for 7 different theme tokens
Group-level and individual-level reset functionality with confirmation modal
Storage of custom theme configurations in user settings via custom_theme_config field
Complete i18n translations for theme customization options across all supported languages

Reviewed Changes

Copilot reviewed 26 out of 26 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
react/src/pages/UserSettingsPage.tsx	Adds theme customization section with 7 color settings and implements `ThemeColorPickerSettingItem` component for dual-mode color selection
react/src/components/SettingList.tsx	Enhances with group-level reset functionality, hover-based reset button visibility, and improved layout with `align="stretch"`
react/src/components/SettingItem.tsx	Updates alignment from `start` to `stretch` for better layout consistency and adds max-width constraint to select components
react/src/hooks/useBAISetting.tsx	Adds `custom_theme_config` field to UserSettings interface for theme persistence
react/src/helper/customThemeConfig.ts	Exports `CustomThemeConfig` type and updates `useCustomThemeConfig` return type annotation
resources/i18n/*.json	Adds translations for "Theme" and nested theme color descriptions across 18 language files

resources/i18n/en.json

resources/i18n/ja.json

react/src/pages/UserSettingsPage.tsx

react/src/components/SettingList.tsx

react/src/pages/MaintenancePage.tsx

react/src/helper/customThemeConfig.ts

react/src/components/SettingItem.tsx

nowgnuesLee

There's a duplicate reset button over there.

ironAiken2 · 2025-11-18T07:25:55Z

There's a duplicate reset button over there.

I added it for section resetting, However, there are many changes needed for the initialization UI and logic, so I will exclude them from this PR and work on them in a separate stack.

yomybaby

Please move the Branding tab under the /settings page.

react/src/pages/ConfigurationsPage.tsx

react/src/pages/MaintenancePage.tsx

nowgnuesLee

please resolve the merge conflicts

agatha197

LGTM

yomybaby

LGTM

nowgnuesLee

LGTM

graphite-app · 2025-11-19T06:53:49Z

Merge activity

Nov 19, 6:53 AM UTC: nowgnuesLee added this pull request to the Graphite merge queue.
Nov 19, 6:55 AM UTC: Merged by the Graphite merge queue.

resolves #4422 [FR-1573](https://lablup.atlassian.net/browse/FR-1573) ### Add theme customization feature to user settings This PR adds a new theme customization section to the user settings page, allowing users to personalize the UI colors for both light and dark modes. Users can customize: - Primary color (used for buttons, key actions, and logo background) - Header background color - Link color - Info color - Error color - Success color - Text color The implementation includes: - New theme customization UI with color pickers for both light/dark modes - Reset functionality at both group and individual setting levels - Storage of custom theme configurations in user settings - Improved layout for settings components with proper alignment and spacing - Added translations for all theme customization options ### Next Steps - Provides preview functionality using session storage via a dedicated preview mode browser - Transfers and applies config stored in local storage to the preview browser **Checklist:** - [x] Documentation - [ ] Minium required manager version - [x] Specific setting for review (User Settings page > Theme section) - [x] Minimum requirements to check during review - [ ] Test case(s) to demonstrate the difference of before/after [FR-1573]: https://lablup.atlassian.net/browse/FR-1573?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

github-actions bot added area:ux UI / UX issue. area:i18n Localization labels Nov 14, 2025

github-actions bot assigned ironAiken2 Nov 14, 2025

github-actions bot added the size:XL 500~ LoC label Nov 14, 2025

ironAiken2 requested review from agatha197, nowgnuesLee and yomybaby November 14, 2025 05:29

ironAiken2 marked this pull request as ready for review November 14, 2025 05:29

Copilot AI review requested due to automatic review settings November 14, 2025 05:29

Copilot started reviewing on behalf of ironAiken2 November 14, 2025 05:29 View session

Copilot finished reviewing on behalf of ironAiken2 November 14, 2025 05:31

Copilot AI reviewed Nov 14, 2025

View reviewed changes

ironAiken2 marked this pull request as draft November 14, 2025 06:52

ironAiken2 force-pushed the feat/theme-customization-in-user-settings branch 2 times, most recently from 8172d3e to d1a9094 Compare November 14, 2025 07:32

ironAiken2 marked this pull request as ready for review November 14, 2025 07:34

nowgnuesLee requested changes Nov 14, 2025

View reviewed changes

react/src/pages/MaintenancePage.tsx Outdated Show resolved Hide resolved

react/src/helper/customThemeConfig.ts Outdated Show resolved Hide resolved

react/src/components/SettingItem.tsx Show resolved Hide resolved

ironAiken2 changed the title ~~feat(FR-1573): Add theme setting section in user settings page~~ feat(FR-1573): Add theme setting section in main page Nov 17, 2025

ironAiken2 force-pushed the feat/theme-customization-in-user-settings branch from d1a9094 to 39cb448 Compare November 17, 2025 01:37

ironAiken2 requested a review from nowgnuesLee November 17, 2025 01:38

ironAiken2 force-pushed the feat/theme-customization-in-user-settings branch 4 times, most recently from c9b1606 to 23bb3ca Compare November 17, 2025 06:34

ironAiken2 mentioned this pull request Nov 17, 2025

feat(FR-1580): Implement custom theme preview mode feature #4653

Merged

5 tasks

nowgnuesLee requested changes Nov 18, 2025

View reviewed changes

ironAiken2 force-pushed the feat/theme-customization-in-user-settings branch from 23bb3ca to 983d66d Compare November 18, 2025 07:24

ironAiken2 requested a review from nowgnuesLee November 18, 2025 07:26

yomybaby requested changes Nov 18, 2025

View reviewed changes

ironAiken2 changed the title ~~feat(FR-1573): Add theme setting section in main page~~ feat(FR-1573): Add theme setting section in maintenance page Nov 19, 2025

ironAiken2 force-pushed the feat/theme-customization-in-user-settings branch from 983d66d to ebff6b8 Compare November 19, 2025 01:45

ironAiken2 requested a review from yomybaby November 19, 2025 01:45

ironAiken2 force-pushed the feat/theme-customization-in-user-settings branch from ebff6b8 to d3de3b8 Compare November 19, 2025 01:52

agatha197 requested changes Nov 19, 2025

View reviewed changes

react/src/pages/ConfigurationsPage.tsx Outdated Show resolved Hide resolved

react/src/pages/MaintenancePage.tsx Outdated Show resolved Hide resolved

nowgnuesLee requested changes Nov 19, 2025

View reviewed changes

ironAiken2 requested a review from agatha197 November 19, 2025 04:01

ironAiken2 force-pushed the feat/theme-customization-in-user-settings branch from d3de3b8 to 1510583 Compare November 19, 2025 04:01

ironAiken2 requested a review from nowgnuesLee November 19, 2025 04:01

agatha197 approved these changes Nov 19, 2025

View reviewed changes

yomybaby approved these changes Nov 19, 2025

View reviewed changes

ironAiken2 force-pushed the feat/theme-customization-in-user-settings branch from 1510583 to 39ad54d Compare November 19, 2025 06:46

nowgnuesLee approved these changes Nov 19, 2025

View reviewed changes

graphite-app bot force-pushed the feat/theme-customization-in-user-settings branch from 39ad54d to eacf860 Compare November 19, 2025 06:54

graphite-app bot merged commit eacf860 into main Nov 19, 2025
11 checks passed

graphite-app bot deleted the feat/theme-customization-in-user-settings branch November 19, 2025 06:55

github-pages bot temporarily deployed to github-pages November 19, 2025 07:05 Inactive

vercel bot temporarily deployed to Production November 19, 2025 07:46 Inactive

feat(FR-1573): Add theme setting section in maintenance page #4638

feat(FR-1573): Add theme setting section in maintenance page #4638

Uh oh!

Conversation

ironAiken2 commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Add theme customization feature to user settings

Next Steps

Uh oh!

ironAiken2 commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

github-actions bot commented Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Coverage report for ./react

Test suite run success

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nowgnuesLee left a comment

Choose a reason for hiding this comment

Uh oh!

ironAiken2 commented Nov 18, 2025

Uh oh!

yomybaby left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

nowgnuesLee left a comment

Choose a reason for hiding this comment

Uh oh!

agatha197 left a comment

Choose a reason for hiding this comment

Uh oh!

yomybaby left a comment

Choose a reason for hiding this comment

Uh oh!

nowgnuesLee left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Nov 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ironAiken2 commented Nov 14, 2025 •

edited

Loading

ironAiken2 commented Nov 14, 2025 •

edited

Loading

github-actions bot commented Nov 14, 2025 •

edited

Loading

Coverage report for `./react`

graphite-app bot commented Nov 19, 2025 •

edited

Loading