feat: add dark mode by glowcloud · Pull Request #10653 · swagger-api/swagger-ui

glowcloud · 2025-12-08T14:33:49Z

Refs #5327, #9964, #10089
Supersedes #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, e.g.:

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

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.

- Add DarkMode component - Add darkmode comp styling

Co-authored-by: Ed Brannin (BW) <86373302+ebrannin-bw@users.noreply.github.com>

robert-hebel-sb · 2025-12-09T14:58:50Z

src/style/_topbar.scss

+      opacity: 1;
+    }
+  }
+}


nit: no empty line at the end

AllanOcelot · 2025-12-09T18:38:31Z

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

landsman · 2025-12-11T12:22:09Z

what a Christmas present, thanks!

# [5.31.0](v5.30.3...v5.31.0) (2025-12-11) ### Features * add dark mode ([#10653](#10653)) ([5f42eee](5f42eee)), closes [#5327](#5327) [#9964](#9964) [#10089](#10089)

# [5.31.0](v5.30.3...v5.31.0) (2025-12-11) ### Features * add dark mode ([#10653](#10653)) ([5f42eee](5f42eee)), closes [#5327](#5327) [#9964](#9964) [#10089](#10089) ### Reverts * Revert "chore(release): cut the 5.31.0 release" ([#10658](#10658)) ([cf11271](cf11271))

swagger-bot · 2025-12-11T15:57:57Z

🎉 This PR is included in version 5.31.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

simPod · 2025-12-12T09:38:38Z

How to use it with react?

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

glowcloud · 2025-12-12T12:48:17Z

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");

simPod · 2025-12-12T14:32:04Z

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.

avshatalov48 · 2026-02-09T08:52:16Z

Hi! Is it possible to specify a light theme by default? Because when opening/refreshing a page, a dark theme is always set, the choice is not remembered.

Closes swagger-api#5327, swagger-api#9964, swagger-api#10089 --------- Co-authored-by: Allan <workofcode@gmail.com> Co-authored-by: Ed Brannin (BW) <86373302+ebrannin-bw@users.noreply.github.com>

# [5.31.0](swagger-api/swagger-ui@v5.30.3...v5.31.0) (2025-12-11) ### Features * add dark mode ([swagger-api#10653](swagger-api#10653)) ([5f42eee](swagger-api@5f42eee)), closes [swagger-api#5327](swagger-api#5327) [swagger-api#9964](swagger-api#9964) [swagger-api#10089](swagger-api#10089)

# [5.31.0](swagger-api/swagger-ui@v5.30.3...v5.31.0) (2025-12-11) ### Features * add dark mode ([swagger-api#10653](swagger-api#10653)) ([5f42eee](swagger-api@5f42eee)), closes [swagger-api#5327](swagger-api#5327) [swagger-api#9964](swagger-api#9964) [swagger-api#10089](swagger-api#10089) ### Reverts * Revert "chore(release): cut the 5.31.0 release" ([swagger-api#10658](swagger-api#10658)) ([cf11271](swagger-api@cf11271))

AllanOcelot and others added 14 commits November 14, 2024 22:06

- start themeing dark

a19d12c

- continue

cd69965

- move scss outside of .swagger-ui to target all page elements

83b2cf3

- more styling, more darkness

d0bb934

- I believe the theme is finished

862574c

- refactor theme, make more legible

4fe1368

- restrict topbar to 600px width

70a382d

- Add SVG icons

5eb13da

- Add DarkMode component - Add darkmode comp styling

- add unit test for the darkMode component

2834f21

Update src/standalone/plugins/top-bar/components/DarkMode.jsx

5b09e0c

Co-authored-by: Ed Brannin (BW) <86373302+ebrannin-bw@users.noreply.github.com>

Merge branch 'master' into feat/dark-mode

bb6a0cb

feat: additional elements and color update

79f83a9

fix: fix issue with duplicate react by rewriting to class component

3949e55

fix: bind function in constructor

2319a0d

glowcloud marked this pull request as ready for review December 9, 2025 13:49

glowcloud self-assigned this Dec 9, 2025

glowcloud added type: enhancement cat: style & presentation labels Dec 9, 2025

glowcloud requested review from cka121, lukaszzazulak and robert-hebel-sb December 9, 2025 13:50

glowcloud mentioned this pull request Dec 9, 2025

Feature - New - Dark Mode Toggle #10216

Closed

17 tasks

chore: move unit test under standalone

01b8ac5

robert-hebel-sb approved these changes Dec 9, 2025

View reviewed changes

src/style/_topbar.scss Outdated

opacity: 1;

}

}

} No newline at end of file

Copy link

Contributor

robert-hebel-sb Dec 9, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: no empty line at the end

chore: add empty line

08726e4

cka121 approved these changes Dec 11, 2025

View reviewed changes

glowcloud merged commit 5f42eee into master Dec 11, 2025
7 checks passed

This was referenced Dec 11, 2025

Add a dark mode for the page #9964

Closed

Add Dark Mode #10089

Closed

swagger-bot added the released label Dec 11, 2025

glowcloud deleted the feat/dark-mode branch December 12, 2025 12:48

simPod mentioned this pull request Dec 15, 2025

Improve Dark Mode support and add configuration options for default theme #10663

Open

tstirrat15 mentioned this pull request Dec 19, 2025

Fix darkmode styling of swagger UI on http API pages authzed/docs#440

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add dark mode#10653

feat: add dark mode#10653
glowcloud merged 16 commits intomasterfrom
feat/dark-mode

glowcloud commented Dec 8, 2025 •

edited

Loading

Uh oh!

robert-hebel-sb Dec 9, 2025

Uh oh!

AllanOcelot commented Dec 9, 2025

Uh oh!

Uh oh!

landsman commented Dec 11, 2025

Uh oh!

swagger-bot commented Dec 11, 2025

Uh oh!

simPod commented Dec 12, 2025

Uh oh!

glowcloud commented Dec 12, 2025

Uh oh!

simPod commented Dec 12, 2025

Uh oh!

avshatalov48 commented Feb 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

Conversation

glowcloud commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

robert-hebel-sb Dec 9, 2025

Choose a reason for hiding this comment

Uh oh!

AllanOcelot commented Dec 9, 2025

Uh oh!

Uh oh!

landsman commented Dec 11, 2025

Uh oh!

swagger-bot commented Dec 11, 2025

Uh oh!

simPod commented Dec 12, 2025

Uh oh!

glowcloud commented Dec 12, 2025

Uh oh!

simPod commented Dec 12, 2025

Uh oh!

avshatalov48 commented Feb 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

glowcloud commented Dec 8, 2025 •

edited

Loading