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

To change the color, you can inject a new stylesheet

Qoute from the SwaggerConfig.cs file

Use the "InjectStylesheet" option to enrich the UI with one or more a dditional CSS stylesheets. The file must be included in your project as an "Embedded Resource", and then the resource's "Logical Name" is passed to the method as shown below. c.InjectStylesheet(containingAssembly,"Swashbuckle.Dummy.SwaggerExtensions.testStyles1.css");

Remember to set Build Action of the stylesheet to "Embedded Resource".

Answer 2

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;
}

Answer 3

Startup

 public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
           

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseStaticFiles();
            
            .....................
            .....................

            app.UseSwagger();

            app.UseSwaggerUI(c =>
            {
              
                c.SwaggerEndpoint("/swagger/v1/swagger.json",  "API V1");
            
                c.InjectStylesheet("/css/swagger-custom.css");
            });

            
        }

Swagger custom css

img[alt="Swagger UI"] {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    content: url('../images/logo.png');
    max-width: 100%;
    max-height: 100%;
}
.swagger-section #header {
    background-color: #fff !important;
   
}

.swagger-ui .topbar {
    padding: 10px 0;
    background-color: #fff !important;
    border-bottom: 1px solid #dee2e6 !important;
}
    .swagger-ui .topbar .download-url-wrapper .select-label {
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 600px;
        margin: 0;
        color: #121416 !important;
        
    }

Answer 4

1. First step is to add a new css file in your project, with your custom rules. For example :

   .swagger-section #header { background-color: #fadc00; }
   

2. Right click on the new file and go Properties. In "Build Actions" select "Embedded Ressources".

3. Inside the SwaggerConfig file, inject the stylesheet. The resource name should be the "Logical Name" for the resource. That is where I got stuck, but thanks to this Swashbuckle doc I could infer the logical name following the rule :

   Default Namespace for your project "dot" folder containing the resource "dot" file name with extension.

It's based on the Project's default namespace, file location and file extension. For example, given a default namespace of "YourWebApiProject" and a file located at "/SwaggerExtensions/index.html", then the resource will be assigned the name - "YourWebApiProject.SwaggerExtensions.index.html"

For example :

.EnableSwaggerUi(c =>
{
    c.InjectStylesheet(thisAssembly, "Some.Default.Namespace.App_Start.swagger.css");
});