Customize Swagger UI With Custom Logo And Theme Color



Published On Monday June 22, 2020
Reading Time: 2 minutes

In my previous post, we discussed on how to Document an Asp.Net Core API with OpenApi/Swagger In Details but what if you want to change the default logo, the color of the UI itself?

We can simply change the theme by changing some lines of code. Before moving forward if you have not seen my previous post do follow the link.

Make the following amendments on the Configure method of Startup.cs file

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            app.UseStaticFiles();  //Added Code

            app.UseSwagger();
            app.UseSwaggerUI(c =>
            {
                c.SwaggerEndpoint("/swagger/V1/swagger.json", "Integrating Swagger");
                c.InjectStylesheet("/swagger-custom/swagger-custom-styles.css");  //Added Code
                c.InjectJavascript("/swagger-custom/swagger-custom-script.js", "text/javascript");  //Added Code
                c.RoutePrefix = string.Empty;
            });

            app.UseHttpsRedirection();



            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
            });
        }
app.UseStaticFiles()

The above line is used for serving static files so that we can add custom scripts and CSS files. Since it is missing on the API project we need to add this manually.

c.InjectStylesheet("/swagger-custom/swagger-custom-styles.css");
c.InjectJavascript("/swagger-custom/swagger-custom-script.js", "text/javascript");

The above 2 lines are for serving custom CSS and js files for customizing the UI.

For serving the static files we need to add a folder wwwroot on the root directory. (The folder is present by default in web application project but it should be manually added in case of API projects). The folder structure will look like the image below with the above-mentioned files (swagger-custom-styles.css and swagger-custom-script.js) and some images (For favicons).

Customize Swagger, Customize Swagger UI With Custom Logo And Theme Color

The favicon names need to be the same as that of the above image since we will replace the default image with our custom image.

The final look of my custom theme for swagger UI will look like

Customize Swagger, Customize Swagger UI With Custom Logo And Theme Color

For achieving the above result the swagger-custom-styles.css has the content

.swagger-ui .topbar {
    background: #4267B2;
}

And that of swagger-custom-script.js 

(function () {
    window.addEventListener("load", function () {
        setTimeout(function () {
            var logo = document.getElementsByClassName('link'); //For Changing The Link On The Logo Image
            logo[0].href = "https://rashik.com.np/";
            logo[0].target = "_blank";

            logo[0].children[0].alt = "Implemeting Swagger";
            logo[0].children[0].src = "https://blog.rashik.com.np/wp-content/uploads/2020/06/rashikLogo-2-300x113.png"; //For Changing The Logo Image
        });
    });
})();

You can customize the looks as you like after these configurations easily. I have also updated the code in my GitHub Repo.

Do share the post if you find the blog effective.

#SharingIsCaring 🙂

 

5 1 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x