:boom: A collection of css themes to spice up your Swagger docs
Swagger Docs are awesome. Why not make them look better!
Download the swagger-ui-themes project and place the desired stylesheet into the source of your swagger-ui html. Use the
2.xdirectories depending on what version of Swagger UI you have.
├── 2.x │ ├── theme-feeling-blue.css │ ├── theme-flattop.css │ ├── theme-material.css │ ├── theme-monokai.css │ ├── theme-muted.css │ ├── theme-newspaper.css │ └── theme-outline.css └── 3.x ├── theme-feeling-blue.css ├── theme-flattop.css ├── theme-material.css ├── theme-monokai.css ├── theme-muted.css ├── theme-newspaper.css └── theme-outline.css
In theof your html, reference the location to your [theme].css
3.x, make sure to either remove/comment out the link to
swagger-ui.cssor load the desired theme after to override the default Swagger UI styles.
If you have issues loading themes with 3.x, try modifying the index.html to load the theme.css absolutely last right before the closing body or html tag. - [workaround] 3.x theme loading issue (#25)
2.x, make sure to either remove/comment out the link to
screen.cssor load the desired theme after to override the default Swagger UI styles.
$ bower install swagger-ui-themes
$ npm install swagger-ui-themes
| Name | Description | |------|-------------| | swagger-ui-themes-extensions | Chrome extension to apply swagger-ui themes (https://github.com/AMoreaux/swagger-ui-themes-extension) |
If you want to add theme ideas or other fixes/changes, feel free to submit an issue.