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

Not able to customize the swagger UI iframe with website dark and light mode #21

Open swarna1101 opened 6 months ago

swarna1101 commented 6 months ago

The problem I am facing is , I am not able to customize the swagger UI iframe in the page.

For better readability, I want to change the colour of text inside the swagger UI which is rendered in light and dark mode.

Right now, I am not able to do that, I added some custom css for the swagger UI texts, and although it is readable, but still the colour of text of the swagger UI iframe (which is rendered using this pluggin) does not changes as i change the mode from dark to light.

can you tell me a way, how I can customize the text colour of swagger UI which is rendered as per light and dark mode and for better readability.

To sum up: I want to change the colour of the text inside the swagger UI rendered docs as per light and dark mode. I want this customization for better readability. Currently, I added some css and made the things readable, but I want the texts of the swagger UI changes as per light and dark mode. If possible, pls help me in this or tell a way to make it work.

Thanks

blueswen commented 6 months ago

Currently, we can customize CSS with extra_css options, which is discussed in https://github.com/blueswen/mkdocs-swagger-ui-tag/issues/7. The extra_css options usage is as follows:

plugins:
  swagger-ui-tag:
    extra_css:
      - stylesheets/extra.css

The directory structure would be like:

.
├─ docs/
│  └─ stylesheets/
│     └─ extra.css
└─ mkdocs.yml

However, the extra CSS cannot be loaded dynamically according to the light mode or dark mode. I may take some time to check how to implement this feature.