Modifications to Swagger UI header - asp.net-web-api

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

Answer 2

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

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

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 5

Alternativelly, I have created a custom.css in my wwwroot folder and just added
options.InjectStylesheet("/custom.css");
and it worked as well.