DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Romans Pokrovskis
Romans Pokrovskis

Posted on • Originally published at amoenus.dev on

Turn Swagger Theme to the Dark Mode

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();

Enter fullscreen mode Exit fullscreen mode

Add folder structure with custom CSS

wwwroot/
   └──swagger-ui/
      └── SwaggerDark.css

Enter fullscreen mode Exit fullscreen mode

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");
});

Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (3)

Collapse
wellitontoledo profile image
Wat (Welliton A. Toledo)

Thank you!

Collapse
truesolarflame profile image
truesolarflame

Thank you!

I signed up just to say that.

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.