Skip to content

Swagger UI Dark Theme for .NET: Drop-in CSS Dark Mode (Step by Step)

Switch Swagger UI to dark mode in .NET Core and FastEndpoints with a drop-in CSS theme — step-by-step setup, no rebuild of your API docs required.

• Vukasin Vulovic • 1 min read
Swagger UI Dark Theme for .NET: Drop-in CSS Dark Mode (Step by Step)

This will be a short one.

So, if you are using Swagger with your project (for our example we will be using .NET Core), you might want to use the SwaggerUI with Dark Theme, since the default one can blind you.

Quick and easy way of doing this is adding this piece of css code that can be found here: SwaggerDark.css on GitHub

Big shoutout to the original blog post: Turn Swagger Theme to the Dark Mode - DEV Community

If you are using the standard Controller from the .NET Core Web Api, you just need to enable support for static files in the Configure method:

app.UseStaticFiles();

On the other hand, if you are using Fast Endpoints, you can simply do:

application.UseSwaggerUi(config => config.TransformToExternalPath = (internalUiRoute, request) =>
{
    config.CustomInlineStyles = swaggerDark;

    return internalUiRoute;
});

Where swaggerDark variable is the css copied from the website that I supplied, specifically this: SwaggerDark.css on GitHub

Happy Coding!