Redocly / Redocly/redoc

Add native support for dark theme

Open
#2,673 0 comments 14 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Type: Enhancement
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.