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

OAS 3.1 Dark Mode Contrast #22

Closed busches closed 4 months ago

busches commented 6 months ago

The color contrast in some spots when reading OAS 3.1 is very low and hard to read.

Using the sample OAS 3.1 sample as an example: https://blueswen.github.io/mkdocs-swagger-ui-tag/demo/openapi-v3.1/ image All of this text is very difficult for me to read, but I focused on the property name and put it into a whocanuse.com comparison: https://www.whocanuse.com/?bg=1e2129&fg=3b4150&fs=16&fw=

It gives it a 1.58:1 contrast ratio, compared to the light theme of 6.89:1, https://www.whocanuse.com/?bg=d4e1db&fg=414757&fs=16&fw=

Compare to this to OAS 3.0, which has great contrast of the property names: https://blueswen.github.io/mkdocs-swagger-ui-tag/demo/static-file/ image 13.93:1 - https://www.whocanuse.com/?bg=1c1f27&fg=e9ebfc&fs=16&fw=

Any chance we increase the contrast used in dark mode for OAS 3.1?

blueswen commented 6 months ago

Thanks for advising. I will add some style for OAS 3.1 schema elements(json-schema-2020-12) in the latest version. The new effect on OAS 3.1 looks as follows:

CSS Demo

JSON Key https://www.whocanuse.com/?bg=1e2129&fg=e9ebfc&fs=16&fw= Data Type https://www.whocanuse.com/?bg=1e2129&fg=c2c2e0&fs=16&fw=

And https://www.whocanuse.com/ is a pretty cool tool. Thanks for sharing!

busches commented 6 months ago

Awesome, looks much improved, can we also style the open/close arrow? It's still black on almost black in your screenshot.