Skip to content

fix(dark-mode): indicate dark color-scheme for native browser controls#10844

Open
yogeshwaran-c wants to merge 1 commit intoswagger-api:masterfrom
yogeshwaran-c:fix/dark-mode-color-scheme
Open

fix(dark-mode): indicate dark color-scheme for native browser controls#10844
yogeshwaran-c wants to merge 1 commit intoswagger-api:masterfrom
yogeshwaran-c:fix/dark-mode-color-scheme

Conversation

@yogeshwaran-c
Copy link
Copy Markdown

What

Adds color-scheme: dark to the html.dark-mode selector in _dark-mode.scss so that UA-rendered controls (scrollbars, form inputs, date/color pickers, etc.) pick up the dark styling automatically when Swagger UI is in dark mode.

Why

Swagger UI ships its own dark theme via html.dark-mode, but the browser does not know about it — native widgets continue to render as light by default. Users currently have to work around this by injecting <meta name="color-scheme" content="light dark"> in their host HTML template.

Setting the CSS color-scheme property on the dark-mode root is the standard way to tell the UA to render its built-in controls in dark. Because it is scoped to html.dark-mode, the light theme is unaffected.

Closes #10718

Changes

  • src/style/_dark-mode.scss: add color-scheme: dark to the html.dark-mode block.

Test plan

  • Toggle Swagger UI into dark mode and confirm that native scrollbars, text inputs, and selects now render with the dark UA styling, matching the rest of the theme.
  • Toggle back to light mode and confirm no regression — light-mode native controls are unchanged.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Need to indicate dark mode support with color-scheme

3 participants