/swagger-themes

Change Swagger documentation theme easily

Primary LanguageCSSMIT LicenseMIT

Logo Swagger themes

github issues github last commits

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

alt text

Theme.Dracula

Gruvbox

alt text

Theme.Gruvbox

Monokai

alt text

Theme.Monokai

Nord Dark

alt text

Theme.NordDark

One Dark

alt text

Theme.OneDark

Universal Dark

alt text

Theme.UniversalDark

X-Code Light

alt text

Theme.XCodeLight

Sepia

alt text

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");
  1. Add an embedded resource for your .css file:
    ...
    <EmbeddedResource Include="Themes\your-theme.css" />
</ItemGroup>
  1. Use any other complete theme as a template.
  2. Build project:
dotnet build -c Release
  1. Package .nupkg file is going to appear in ./bin/Release