Modifications to Swagger UI header
Solution 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;
}
Solution 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");
});
Solution 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;
}
Solution 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".
Solution 5
Alternativelly, I have created a custom.css in my wwwroot folder and just added
options.InjectStylesheet("/custom.css");
and it worked as well.
Richard
Updated on July 15, 2022Comments
-
Richard almost 2 years
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?
-
Shiva about 6 yearsIn
ProjectName.FolderName.SwaggerHeader.css
, what'sProjectName.FolderName
? Is it the assembly namespace? -
user2023861 about 6 yearsIn #3, you're missing a double-quote before "ProjectName"
-
jb007 over 3 years#5, add image to dir