Modifications to Swagger UI header

Question

I have created a personal WEB API using Swashbuckle and Swagger API.

While I am able to integrate this successfully, I would like to modify the default UI for Swagger. Changing the color of the header and replacing the swagger image.

Is this possible by modifying existing files?

Answer 1

These are the steps I took:

1. Create a new file SwaggerHeader.css
2. Right click on SwaggerHeader.css, select Properties. Set Build action to Embedded Resource.
3. In SwaggerConfig.cs, add the below line of code:

      EnableSwaggerUi("Document/{*assetPath}", c =>
      {
          c.InjectStylesheet(typeof(SwaggerConfig).Assembly,
          "ProjectName.FolderName.SwaggerHeader.css");
      }

4. SwaggerHeader.css looks like the below:

/* swagger ui customization */
body.swagger-section #header {
    background-color: white;
    background: url(your-new-logo.png) no-repeat;
    background-position-x: 250px;
    height: 50px;
}

body.swagger-section #header .swagger-ui-wrap #logo {
        display: none;
}