Modifications to Swagger UI header

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

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

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".

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