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

Add folder structure with custom CSS

wwwroot/
   └──swagger-ui/
      └── 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. https://github.com/Amoenus/SwaggerDark/

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

Comments

[truesolarflame]

Thank you!

I signed up just to say that.

[Wat (Welliton A. Toledo)]

Thank you!

[Tommer Haugland]

Thanks a bunch!

[Carl-Hugo Marcotte]

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

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>

Hopefully this helps someone some day 🙂

[Rob Janssen]

This should make it even easier.