Feature - New - Dark Mode Toggle

[AllanOcelot]

Please note, I am NOT a react developer, if you can improve this PR, please do so. I am happy to implement feedback!

I have provided a "dark mode" for swagger. Previously users have relied on third party provided stylesheets, or third party styling tools to achieve this. I believe it's a simple improvement that many users will actually find useful.

Description

• Added two SVG icons, provided via MDI open source icons.
• Created a new component "DarkMode", this is imported into "TopBar", when clicked, it toggle's the class "dark" onto the HTML root element ( this is due to the HTML being styled with a white background, and needing to overwrite this default style )
• Created a new SCSS file "DarkTheme" this is imported in main.scss, yet lives outside the main import, to allow us to target the root HTML element.

Motivation and Context

• Darkmode has been requested numerous times in issues, it's also something I'd personally like to see
• I wanted to contribute something back to swagger, since it's a tool I use often
• It was easy to implement, and I do not believe it causes issues with any existing feature
• It removes the need for users to fork/edit/ rely on third party tools to have dark mode

How Has This Been Tested?

• I have visually tested this myself
• I have run EXISTING tests and they pass

Screenshots (if appropriate):

( Screenshot shows the addition of the dark mode icon, in the Topbar )

( Screenshot showing darkmode theme active )

Checklist

My PR contains...

• No code changes (src/ is unmodified: changes to documentation, CI, metadata, etc.)
• Dependency changes (any modification to dependencies in package.json)
• Bug fixes (non-breaking change which fixes an issue)
• Improvements (misc. changes to existing features)
• Features (non-breaking change which adds functionality)

My changes...

• are breaking changes to a public API (config options, System API, major UI change, etc).
• are breaking changes to a private API (Redux, component props, utility functions, etc.).
• are breaking changes to a developer API (npm script behavior changes, new dev system dependencies, etc).
• are not breaking changes.

Documentation

• My changes do not require a change to the project documentation.
• My changes require a change to the project documentation.
• If yes to above: I have updated the documentation accordingly.

Automated tests

• My changes can not or do not need to be tested.
• My changes can and should be tested by unit and/or integration tests.
• If yes to above: I have added tests to cover my changes.
• If yes to above: I have taken care to cover edge cases in my tests.
• All new and existing tests passed.

[AllanOcelot]

Aim's to address:

• Add Dark Mode #10089
• Add a dark mode for the page #9964
• [Feature Request] Dark mode #5327

[Praskand]

How did you do it?

[AllanOcelot]

How did you do it?

From memory :

It's a new component added to the top bar, when clicked, adds a new class "theme-dark" to the page. We have a new style sheet that styles all descendants of "dark-theme" appropriately.

[pgridharan]

Hey,

this is something I would love to see merged. One suggestion from my side would be to include support for prefers-color-scheme.

[AllanOcelot]

@pgridharan I'd happily implement that, but I've heard no feedback from maintainers, so assumed PR was dead in the water :)

Great suggestion , thanks

[AllanOcelot]

Great suggestion @ebrannin-bw - but I doubt this work will ever see the light of day sadly !