Dark theme

[pawamoy]

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]

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.

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

[pawamoy]

I see, thanks! Feel free to close 🙂

[blueswen]

@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.

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]

Woohoo, great job! Looks nice 🙂 Closing 😄 !