swagger-ui feat: add dark mode

Refs https://github.com/swagger-api/swagger-ui/issues/5327, https://github.com/swagger-api/swagger-ui/issues/9964, https://github.com/swagger-api/swagger-ui/issues/10089 Supersedes https://github.com/swagger-api/swagger-ui/pull/10216

Adds dark mode toggle to the top bar in standalone preset. If not using standalone preset, dark mode can also be enabled by adding dark-mode class to the <html> element.

NOTE: Class component was used for DarkModeToggle as a workaround, as there were issues with duplicated React, causing hooks to be unusable. Alternative solution exists with the usage of Redux and dropping support for loading preferred colours, but opted for this one for now.

Dec 08 '25 14:12 glowcloud

Great work @glowcloud ! - happy to see this much needed feature making it's way toward being in swagger.

Dec 09 '25 18:12 AllanOcelot

what a Christmas present, thanks!

Dec 11 '25 12:12 landsman

:tada: This PR is included in version 5.31.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Dec 11 '25 15:12 swagger-bot

How to use it with react?

    <div
      ref={() => {
        SwaggerUIBundle({
          docExpansion: 'list',
          dom_id: '#swagger-ui',
          url: `${apiUri}/doc.json`,
        });
      }}
      id="swagger-ui"
    />

Dec 12 '25 09:12 simPod

How to use it with react?

    <div
      ref={() => {
        SwaggerUIBundle({
          docExpansion: 'list',
          dom_id: '#swagger-ui',
          url: `${apiUri}/doc.json`,
        });
      }}
      id="swagger-ui"
    />

Hi @simPod,

Currently there is no option to use the dark mode by default and the toggle button is displayed only in the top bar when using the StandaloneLayoutPreset. Since you are not using this preset, you will need to enable dark mode manually by adding the dark-mode class to the <html> element:

document.documentElement.classList.add("dark-mode");

Dec 12 '25 12:12 glowcloud

Adding a dark-mode class to html element fiddles with other app styles as well. E.g. this affects app's background

so it's kinda no go as styles are not isolated for swagger only.

Dec 12 '25 14:12 simPod