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?

The color can be changed by injecting css through the swaggerconfig.cs file. — VisualBean, Mar 29 '16 at 19:43

score 18 · Accepted Answer · edited Oct 03 '18 at 15:14

18

These are the steps I took:

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

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

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

edited Oct 03 '18 at 15:14

Peska

3,980
3
23
40

answered Mar 30 '16 at 14:51

Richard

381
2
4
22

2

In `ProjectName.FolderName.SwaggerHeader.css`, what's `ProjectName.FolderName` ? Is it the assembly namespace? – Shiva Feb 19 '18 at 20:57
In #3, you're missing a double-quote before "ProjectName" – user2023861 May 03 '18 at 14:20
#5, add image to dir – Judy007 Nov 11 '20 at 21:17

score 6 · Answer 2 · answered Aug 22 '20 at 18:06

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

score 4 · Answer 3 · answered Mar 22 '19 at 15:31

First step is to add a new css file in your project, with your custom rules. For example :
```
.swagger-section #header { background-color: #fadc00; }
```
Right click on the new file and go Properties. In "Build Actions" select "Embedded Ressources".
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");
});

VisualBean · Answer 4 · 2016-04-05T20:35:28.007

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

score 1 · Answer 5 · answered Nov 05 '19 at 10:05

1

Alternativelly, I have created a custom.css in my wwwroot folder and just added

options.InjectStylesheet("/custom.css");

and it worked as well.

answered Nov 05 '19 at 10:05

vidriduch

4,753
8
41
63

Modifications to Swagger UI header

5 Answers5

Linked