Swagger themes

Change Swagger documentation theme easily.

💾 Install

With NuGet CLI:

nuget install oqo0.SwaggerThemes

Using NuGet Package Manager: https://www.nuget.org/packages/oqo0.SwaggerThemes/

📚 Usage

Select any theme from themes list and apply it using following ways:

📖 Using with Swashbuckle

app.UseSwagger();
app.UseSwaggerThemes(Theme.UniversalDark);
app.UseSwaggerUI();

Important

Don't use UseSwaggerUI() before UseSwaggerThemes() or themes are not going to get installed.

📖 Using with NSwag

app.UseOpenApi();
app.UseSwaggerUi(options =>
{
    options.CustomInlineStyles = SwaggerTheme.GetSwaggerThemeCss(Theme.UniversalDark);
});

🔧 Adding custom CSS

string customCss = "body {" +
                   "    background-color: red;" +
                   "}";

app.UseSwaggerThemes(Theme.UniversalDark, customCss );

🎨 Themes

Dracula Theme.Dracula	Gruvbox Theme.Gruvbox
Monokai Theme.Monokai	Nord Dark Theme.NordDark
One Dark Theme.OneDark	Universal Dark Theme.UniversalDark
X-Code Light Theme.XCodeLight	Sepia Theme.Sepia

💡 Creating your own themes

1. Create theme .css in Themes directory.
2. Add a placeholder for filename in Theme.cs:

public static Theme YourTheme => new("your-theme.css");

3. Add an embedded resource for your .css file:

    ...
    <EmbeddedResource Include="Themes\your-theme.css" />
</ItemGroup>

4. Use any other complete theme as a template.
5. Build project:

dotnet build -c Release

6. Package .nupkg file is going to appear in ./bin/Release