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)
[x] 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).
[x] are not breaking changes.
Documentation
[x] 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.
[x] My changes can and should be tested by unit and/or integration tests.
[x] If yes to above: I have added tests to cover my changes.
[x] If yes to above: I have taken care to cover edge cases in my tests.
AllanOcelot
commented
1 week ago
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
Motivation and Context
How Has This Been Tested?
Screenshots (if appropriate):
Checklist
My PR contains...
src/is unmodified: changes to documentation, CI, metadata, etc.)package.json)My changes...
Documentation
Automated tests