search

blueswen / mkdocs-swagger-ui-tag

A MkDocs plugin supports adding Swagger UI to the page.
https://blueswen.github.io/mkdocs-swagger-ui-tag/
MIT License
75 stars 7 forks source link

Dark theme #1

Closed pawamoy closed 2 years ago

pawamoy commented 2 years ago

Hi! Did you try with the slate theme of Material for MkDocs enabled?

I actually integrated the Swagger UI in some projects docs (with a few lines of Javascript), and it looks nice with a light theme, but is unreadable with a dark theme. Maybe you found a way to improve that.

blueswen commented 2 years ago

Yes, I have tried with the slate theme of Material for MkDocs, then I found it was unreadable. So I add a body background color(default: white) to prevent Swagger UI's transparent background as a workaround.

dark-mode-demo

I also have tried some dark mode css for Swagger UI, but they does not look good for me. Maybe https://github.com/swagger-api/swagger-ui/pull/5964 could solve this. I will try this PR's css latter.

pawamoy commented 2 years ago

I see, thanks! Feel free to close :slightly_smiling_face:

blueswen commented 2 years ago

@pawamoy Swagger UI Tag supports synchronized dark mode with mkdocs-material in v0.2.1 🎉. I used the Swagger UI dark mode css from Amoenus Swagger Dark Theme and modified some value to fit slate theme of Material.

dark-mode

Since Material changes body's attribute data-md-color-scheme to switch light mode and dark mode. I observe data-md-color-scheme value to trigger enable or disable dark mode css in iframe. https://github.com/blueswen/mkdocs-swagger-ui-tag/blob/v0.2.1/mkdocs_swagger_ui_tag/swagger-ui/swagger.html#L38 https://github.com/blueswen/mkdocs-swagger-ui-tag/blob/v0.2.1/mkdocs_swagger_ui_tag/plugin.py#L134

pawamoy commented 2 years ago

Woohoo, great job! Looks nice :slightly_smiling_face: Closing :smile: !