Add native support for dark theme
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 25.9k
- Forks
- 2.4k
- Avg merge
- 13h 10m
- Merged PRs (30d)
- 4
Description
Describe the problem to be solved
The component currently offers no support for dark theme, which all modern browsers implement through the prefer-color-scheme css media query:
.theme-a {
background: #dca;
color: #731;
}
@media (prefers-color-scheme: dark) {
.theme-a.adaptive {
background: #753;
color: #dcb;
outline: 5px dashed #000;
}
}
This results in poor rendering when users are running their OS and/or browsers in dark mode, which kills UX.
Pretty much all major component libraries offer light/dark theme support for their components, so it is not unreasonable to include such support for a major component like this one with almost 1M downloads/wk. It is also not practical to expect library users to properly customize all 100+ options in the Theme object themselves just to make a basic dark theme work, when that can be implemented directly and correctly in the component here, and then easily made available to everyone.
There has been multiple issues raised in this repo regarding this topic, so there is high demand for it:
Describe the solution you'd like
Redoc should provide native light and dark theme objects that can be customized by the user, along with an option like themeType: light | dark | system to toggle the theme based on what's provided.
Describe alternatives you've considered
The only thing I've seen is one 3rd-party repo here with their own custom theme: https://github.com/dilanx/redark
But it's not clear whether they still maintain it or are willing to fix issues that may arise in future versions of redoc, so it's not a great solution.
Additional context
N/A
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
No files or tests are named. Start by tracing the component's Theme object and current theme configuration, then determine how light, dark, and system selection should be exposed and customized. Done means the component provides native configurable themes and system selection based on prefers-color-scheme.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react, typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100