DEV Community

Romans Pokrovskis
Romans Pokrovskis

Posted on • Originally published at amoenus.dev on

25 3

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (5)

Collapse
 
carlhugom profile image
Carl-Hugo Marcotte • Edited

Thanks a lot for sharing!

In case someone don't want to enable serving static files, you can also add a endpoint that serves only that CSS, like this:

Program.cs

if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "MyAPI");
        c.InjectStylesheet("/swagger-ui/SwaggerDark.css");
    });
    app.MapGet("/swagger-ui/SwaggerDark.css", async (CancellationToken cancellationToken) =>
    {
        var css = await File.ReadAllBytesAsync("SwaggerDark.css", cancellationToken);
        return Results.File(css, "text/css");
    }).ExcludeFromDescription();
}
Enter fullscreen mode Exit fullscreen mode

In the .csproj file (or using the VS Properties menu), ensure the SwaggerDark.css file is copied to the output directory (in this case, the file is at the root of the project, next to Program.cs):

    <ItemGroup>
      <None Update="SwaggerDark.css">
        <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
      </None>
    </ItemGroup>
Enter fullscreen mode Exit fullscreen mode

Hopefully this helps someone some day 🙂

Collapse
 
robiii profile image
Rob Janssen

This should make it even easier.

Collapse
 
tommerhaugland profile image
Tommer Haugland

Thanks a bunch!

Collapse
 
wellitontoledo profile image
Wat (Welliton A. Toledo)

Thank you!

Collapse
 
truesolarflame profile image
truesolarflame

Thank you!

I signed up just to say that.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay