Skip to content

Swagger Dark Theme

Learn how to switch your Swagger documentation to a sleek dark theme with a step-by-step guide for .NET Core and FastEndpoints projects.

Vukasin Vulovic 1 min read
Swagger Dark Theme

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!