Method Inline CSS

Inline CSS Styles

The quickest way to apply custom styles - pass CSS directly as a string.

Overview

Inline CSS is the simplest customization method, perfect for quick tweaks and prototyping. Pass CSS directly as a string without needing separate files.

Warning

Inline CSS is the most limited method. It doesn't support CSS variables, advanced features, or theme switcher. For production use, consider Theme Classes or Embedded Files.

Example

var cssContent = @"
    :root {
        --swagger-main-color: #ff6b35;
    }
    body {
        background-color: #1a1a2e;
    }
";

// Swashbuckle
app.UseSwaggerUI(cssContent, options => { });

// NSwag
app.UseSwaggerUi(cssContent, settings => { });

Limitations

Important

Inline styles have limitations:

• ❌ No CSS Variables support
• ❌ No Advanced Options (pinnable topbar, etc.)
• ❌ Cannot inherit from base themes
• ✅ Only for simple, quick customizations

Prefer Theme Classes, Embedded Files or Standalone Themes.

When to Use

Use inline CSS when:

• ✅ Prototyping or testing quick style changes
• ✅ Making simple color or spacing adjustments
• ✅ You need immediate results without file setup
• ✅ The project is small and doesn't require advanced features

Don't use inline CSS when:

• ❌ Building production applications
• ❌ You need CSS variables or advanced options
• ❌ The styles are complex or lengthy
• ❌ You want maintainable, organized code

Example Use Cases

Basic Background Change

var css = @"
    body {
        background-color: #f0f0f0 !important;
    }
    .swagger-ui .topbar {
        background-color: #333 !important;
    }
";

app.UseSwaggerUI(css, options => { });

Custom Font

var css = @"
    body {
        font-family: 'Arial', sans-serif !important;
    }
";

app.UseSwaggerUI(css, options => { });

Next Steps

For more powerful customization:

• Theme Classes - Type-safe with full features
• Embedded CSS Files - Good balance of simplicity and power
• Standalone Themes - Complete control from scratch
• CSS Variables Reference - See all available variables

---

← Custom Themes Overview