Romans Pokrovskis
Amoenus Dev


Amoenus Dev

Turn Swagger Theme to the Dark Mode

Turn Swagger Theme to the Dark Mode

Romans Pokrovskis's photo
Romans Pokrovskis
·Jun 25, 2021·

1 min read

So you have Swagger integrated into your .NET Core Web API application. Maybe even using my previous guide . And now you want to customize it a bit.

I prefer my UI’s dark. So, when I am presented with a predominantly white screen from the Swagger default theme, I immediately want to change it. Luckily SwaggerUI supports CSS injection.

Here are the tweaks that we need to make:

Changes for Startup.cs

Enable support for static files in a Configure() method


Add folder structure with custom CSS

      └── SwaggerDark.css

Folder structure and location of SwaggerDark.css

Inject custom CSS

Now we can inject the custom CSS with InjectStylesheet()

app.UseSwaggerUI(c =>
    c.SwaggerEndpoint("/swagger/v1/swagger.json", "MyAPI");

You’ve read till the end, so as a thank you here’s the link to the dark theme I just mentioned. It even comes with a dark scroll bar and custom drop-down arrows.

Thank you for reading. Consider subscribing and leaving a comment.

Share this