Skip to content

Add native support for dark theme #2673

@takanuva15

Description

@takanuva15

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions