Fix swagger css #306
Fix swagger css #306
Conversation
|
Visit the preview URL for this PR (updated for commit 747e611): https://golioth-docs-dev--pr306-szczys-fix-swagger-c-ss7gk3o1.web.app (expires Thu, 28 Dec 2023 17:13:05 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: f53b02bdc98ce6f5593931ec4c339aa96bac84df |
szczys
force-pushed
the
szczys/fix-swagger-css
branch
2 times, most recently
from
98cc405
to
5b8971c
Compare
|
I spent some time trying to use an existing swagger-ui dark mode library but the issue is that Docusaurus is handling the dark mode switch, not the browser. All of the swagger themes I found use Because of that, if your system/browser prefers dark, but the Docusaurus toggle is set to light, it breaks the light mode styling. Fixing it the way I have done here is brittle--a game of whack-a-mole where anything not anticipated will be styled incorrectly. But it will be hard to solve this correctly unless proper support becomes available. |
|
I wonder if we could use this plugin to replace our openAPI section: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs Demo: https://docusaurus-openapi.tryingpan.dev/petstore/get-pet-by-id Update: this is promising but they have not yet merged support for Docusaurus v3 and changing to this will be non-trivial. I think we should merge the changes in this PR as a fix for current styling and consider this plugin in future improvements. |
szczys
force-pushed
the
szczys/fix-swagger-css
branch
from
5b8971c
to
383cda7
Compare
src/css/custom-swagger-ui.css
Outdated
| html[data-theme="dark"] .loading-container .loading { | ||
| filter: invert(100%); | ||
| } |
There was a problem hiding this comment.
Noticed this one is not restricted to the .swagger-ui class -- is that intentional?
There was a problem hiding this comment.
Good catch, I've added and tested that change as working.
Remove swagger-ui styling that placed white text on a light background in the Authorize dialog Signed-off-by: Mike Szczys <mike@golioth.io>
* Change order of css include so swagger styles can be overridden * Add css file for fixing swagger-ui styles (especially in dark mode) Signed-off-by: Mike Szczys <mike@golioth.io>
Change the codeblock background from the blue tint to use a grey from our new branding colors. Signed-off-by: Mike Szczys <mike@golioth.io>
szczys
force-pushed
the
szczys/fix-swagger-css
branch
from
925e1b1
to
747e611
Compare
Swagger CSS has been broken, especially in dark mode. This PR fixes the style and closes #253
Before:
After: