RocketChat / RocketChat/Rocket.Chat
[Improve] Implement Live Preview for theme selection in Accessibility & Appearance Settings
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
The current theme selection workflow in Accessibility & Appearance settings lacks real-time feedback.
Currently, when a user selects a theme (Light, Dark, High Contrast, or Match System), the change is not visible until the user clicks "Save Changes." This creates a BLIND selection process that forces users into a trial-and-error loop, significantly increasing the interaction cost.
This behavior deviates from modern design patterns found in major platforms (e.g., GitHub, Slack), where visual changes are reflected instantly to allow for immediate validation.
https://github.com/user-attachments/assets/1adc5ec1-6e5d-4630-90e6-690820b0ab6b
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the Accessibility & Appearance settings entry point and reproduce the current theme-selection workflow for Light, Dark, High Contrast, and Match System. Done means each selection provides immediate visual feedback before saving, while the existing Save Changes workflow continues to work.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100