Search code examples
swagger-uinestjs

Change the logo and header colour of nestjs and swagger-ui

I have installed nestjs and I would like to use swagger-ui. I am not sure what the best way is to change the logo and header.

In main.ts

  const options = new DocumentBuilder()
    .setTitle('Data Service API')
    .setDescription('Data Service API')
    .setVersion('1.0')
    .addTag('OD')
    .build();
  const document = SwaggerModule.createDocument(app, options);
  SwaggerModule.setup('api', app, document);
Solution

  • I managed to figure out.

    const options2 = {
// customCss: '.swagger-ui .topbar { display: none }'
  customCss: `
  .topbar-wrapper img {content:url(\'../assets/img/lbglogo.png\'); width:300px; height:auto;}
  .swagger-ui .topbar { background-color: white; }
  `
};

SwaggerModule.setup('api', app, document, options2);

app.useStaticAssets(join(__dirname,'..', 'public'), {prefix: '/assets'});

    Reference: https://www.npmjs.com/package/swagger-ui-express