Skip to content

feat: add dark mode #10653

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
glowcloud merged 16 commits into from
Dec 11, 2025
Merged

feat: add dark mode #10653

glowcloud merged 16 commits into from
Dec 11, 2025

Conversation

@glowcloud
Copy link
Contributor

@glowcloud glowcloud commented Dec 8, 2025 •
edited
Loading

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.

AllanOcelot and others added 14 commits November 14, 2024 22:06
@glowcloud glowcloud marked this pull request as ready for review December 9, 2025 13:49
@glowcloud glowcloud self-assigned this Dec 9, 2025
@glowcloud glowcloud mentioned this pull request Dec 9, 2025
Closed
17 tasks
robert-hebel-sb
robert-hebel-sb approved these changes Dec 9, 2025
View reviewed changes
src/style/_topbar.scss Outdated
opacity: 1;
}
}
}
Copy link
Contributor

@robert-hebel-sb 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

@AllanOcelot
Copy link
Contributor

AllanOcelot commented Dec 9, 2025

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

@glowcloud glowcloud merged commit 5f42eee into master Dec 11, 2025
7 checks passed
This was referenced Dec 11, 2025
Closed
Closed
@landsman
Copy link

landsman commented Dec 11, 2025

what a Christmas present, thanks!

swagger-bot pushed a commit that referenced this pull request Dec 11, 2025
@semantic-release-bot
chore(release): cut the 5.31.0 release
e52faf8 
# [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)
swagger-bot pushed a commit that referenced this pull request Dec 11, 2025
@semantic-release-bot
chore(release): cut the 5.31.0 release
61dddd4 
# [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
Copy link
Contributor

swagger-bot commented Dec 11, 2025

🎉 This PR is included in version 5.31.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

@simPod
Copy link
Contributor

simPod commented Dec 12, 2025

How to use it with react?

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

@glowcloud
Copy link
Contributor Author

glowcloud commented Dec 12, 2025

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

@glowcloud glowcloud deleted the feat/dark-mode branch December 12, 2025 12:48
@simPod
Copy link
Contributor

simPod commented Dec 12, 2025

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

image

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

@simPod simPod mentioned this pull request Dec 15, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cka121 cka121 cka121 approved these changes

@robert-hebel-sb robert-hebel-sb robert-hebel-sb approved these changes

@lukaszzazulak lukaszzazulak Awaiting requested review from lukaszzazulak

Assignees

@glowcloud glowcloud

Labels

cat: style & presentation released type: enhancement

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

8 participants

@glowcloud @AllanOcelot @landsman @swagger-bot @simPod @cka121 @robert-hebel-sb