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

app.UseStaticFiles();

Add folder structure with custom CSS

wwwroot/
   └──swagger-ui/
      └── 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");
    c.InjectStylesheet("/swagger-ui/SwaggerDark.css");
});

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. github.com/Amoenus/SwaggerDark

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