swagger-api / swagger-api/swagger-ui
Improve Dark Mode support and add configuration options for default theme
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 29k
- Forks
- 9.3k
- Avg merge
- 2d 23h
- Merged PRs (30d)
- 25
Description
Dark mode was introduced in PR #10653 and is currently available via the Standalone layout toggle or by manually adding the dark-mode class to the <html> element.
However, the current implementation has a few limitations that make it hard to use in real-world and embedded scenarios.
Current limitations
- There is no configuration option to enable dark mode by default via Swagger UI configuration.
- The dark mode toggle is only available in
StandaloneLayoutPreset, which limits usability in custom or embedded builds. - Enabling dark mode by adding a
dark-modeclass to<html>can interfere with host application styles. - There is no official documentation or examples for enabling dark mode in:
- embedded / iframe usage
swagger-ui-react- custom NPM or Docker deployments
Proposed improvements
- Add a configuration flag (e.g.
defaultDarkMode: true) to enable dark mode without DOM manipulation. - Scope dark mode styles to Swagger UI containers to prevent CSS bleed into host applications.
- Expose dark mode support consistently across all layouts, not only the standalone one.
- Add documentation and examples covering common integration patterns.
- (Optional) Allow basic theme customization (custom colors, high-contrast mode, etc.).
Example configuration (proposal)
SwaggerUI({
dom_id: '#swagger-ui',
url: '/openapi.json',
presets: [SwaggerUIBundle.presets.apis],
theme: {
defaultMode: 'dark'
}
});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 by reading PR #10653 and the current dark-mode implementation in StandaloneLayoutPreset. Review how configuration, custom or embedded builds, swagger-ui-react, and documentation examples are organized. Done would require an agreed scope covering the configuration behavior, layout support, style scoping, and integration guidance; the optional customization ideas need a decision first.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- documentation, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 28/100