Swagger-ui: how to customize swagger UI 3.0.14 to add your own logo and color combination

[mksmanjit]

In my Java Project we used swagger UI for REST API documentation earlier we used swagger version 2.2.10-1 and did customization on logo and color combination but when we see that swagger latest version is there so we tried to update our system to the latest version of swagger UI i.e 3.0.14 but it structure is completely different from the previous one and it has some bundle things and all, i find difficulty to do customization as compare to the previous one.

Please suggest me simple way to do customization and in minimum time, So that i did not have to spend time again when we update swagger version in future.

[shockey]

@mksmanjit, Swagger-UI 3 is a complete rewrite (no common code between the versions), so it's par for the course that your customizations will need to be refactored.

You can customize the logo by customizing the Topbar (https://github.com/swagger-api/swagger-ui/blob/master/src/plugins/topbar/topbar.jsx).

Changing the color scheme is a bit more involved, as it affects a lot of things - but you should be able to write your own stylesheet that overrides the defaults. Alternatively, you can modify the color variables in colors.scss and build a custom version of swagger-ui.

If you need any more pointers, provide me with some specific examples and I'll do my best to help.

[shockey]

Closing due to inactivity.

This is simply to keep our issue tracker clean - feel free to comment if there are any further thoughts or concerns, and we'll be happy to reopen this issue.

[narendrasolanke]

can you please tell me how to change it in spring boot configuration??

[Aarbel]

@mksmanjit @shockey what is the best way to customize swagger-ui without editing directly the library code ? Can we add configuration while using it ?

For example in my code, how could i add a custom header, custom colors, and search filter ?
Thanks a lot !

const path = require('path')
const replace = require('replace');
const express = require('express')
const app = express()

const swaggerUiAssetPath = require("swagger-ui-dist").absolutePath()

const { LOCALHOST_URL } = process.env

replace({
    regex: 'http.*swagger.json',
    replacement : LOCALHOST_URL + ':3012/public/swagger.json',
    paths: [ path.join(swaggerUiAssetPath, 'index.html') ],
    recursive:false,
    silent:true,
})

app
    .use('/', express.static(swaggerUiAssetPath))
    .use('/public',express.static('/usr/src/documentation/public'))

    .listen(3000)

[shockey]

@Aarbel see my reply in the other thread: https://github.com/swagger-api/swagger-ui/pull/3196#issuecomment-378099439

[lock[bot]]

Locking due to inactivity.

This is done to avoid resurrecting old issues and bumping long threads with new, possibly unrelated content.

If you think you're experiencing something similar to what you've found here: please open a new issue, follow the template, and reference this issue in your report.

Thanks!