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

[swarna1101]

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]

Currently, we can customize CSS with extra_css options, which is discussed in #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.