In this post we are going to discuss how to add custom css to your Swagger documentation. I always wanted to change the default navigation bar and the Swagger logo on top of your documentation.

Before you go through this post, check out our previous posts on how to add Swagger to express APIs and add authentication to Swagger.

You can pass your custom CSS to your swagger UI setup method using the property called customCss,

var cssOptions = {
  customCss: `
  .topbar-wrapper img {content:url(https://img.icons8.com/doodle/2x/-freelancefirm.png); width:50px; height:auto;}
  .swagger-ui .topbar { background-color: #000000; border-bottom: 20px solid #5dc6d1; }`,
  customSiteTitle: "Poopcode APIs"
};

You can also change your title using the property customSiteTitle. I just randomly copied an icon url from icons8 the logo.

app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec, cssOptions));

When you restart your node, your Swagger would look like this.