Swagger UI 主题与样式修改最全实战指南（2025 最新版）
下面按「从轻度到重度」给你 5 种越来越漂亮、越来越常用的修改方式，任选其一即可秒变专属文档。
1. 一行代码切换官方内置主题（最快，99% 人够用）
Swagger UI 5.x 自带 8 种官方主题，直接改一个 class 就行：
<!-- 只需要把下面这行改成你想要的 -->
<body class="swagger-ui theme-newrelic"> <!-- 这里改主题名 -->
支持的官方主题（直接复制名字用）：
- 默认（留空）
- theme-newrelic → 深黑 + 荧光绿（最帅）
- theme-feeling-blue → 深蓝科技风
- theme-muted → 柔和灰
- theme-outline → 极简线条风
- theme-monokai → 代码编辑器风
- theme-flattop → 扁平化
- theme-material → Material Design示例：最受欢迎的「黑绿科技风」
<body class="swagger-ui theme-newrelic">2. 一行 CSS 覆盖常用配色（推荐，大厂都在用）
在你的 index.html 里加这 30 行自定义 CSS，立即拥有专属品牌色（支持换 LOGO）：
<style>
/* 主色调改成你公司品牌色，例如：#7227e8（紫色） */
:root {
--primary-color: #7227e8;
--primary-color-light: #a855f7;
--bg-color: #0f0f1a; /* 深色背景 */
--text-color: #e2e8f0;
}
.swagger-ui .topbar { background: var(--bg-color); }
.swagger-ui .info { margin: 30px 0; }
.swagger-ui .topbar .download-url-wrapper { display: none; }
/* 换 LOGO */
.swagger-ui .topbar a img { display: none; }
.swagger-ui .topbar a::before {
content: "";
background: url('https://your-domain.com/logo-white.png') no-repeat center;
background-size: contain;
display: block;
width: 180px;
height: 40px;
}
/* 按钮颜色 */
.swagger-ui .btn { background: var(--primary-color) !important; border-color: var(--primary-color) !important; }
.swagger-ui .btn:hover { background: var(--primary-color-light) !important; }
/* 代码块背景 */
.swagger-ui pre { background: #1a1a2e !important; }
</style>3. 直接使用现成的「企业级美化主题」（2025 最火 3 个）
| 主题名 | 特点 | 一行引入方式 |
|---|---|---|
| dracula | 紫粉代码风（最受欢迎） | <link rel="stylesheet" href="https://unpkg.com/swagger-ui-themes@3.0.1/themes/3.x/theme-dracula.css"> |
| dark | 纯黑极简 | theme-dark.css |
| tomorrow-night | 橙黑配色 | theme-tomorrow-night.css |
完整引入示例（最火的 Dracula 主题）：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5/swagger-ui.css">
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-themes@3.0.1/themes/3.x/theme-dracula.css">
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist@5/swagger-ui-bundle.js"></script>
<script>
SwaggerUIBundle({
url: "openapi.yaml",
dom_id: '#swagger-ui',
presets: [SwaggerUIBundle.presets.apis],
});
</script>
</body>
</html>4. 最高级：自己写完整 CSS（我打包好了，直接用）
2025 年最流行的一套「深色 + 品牌色 + 毛玻璃 + 圆角」企业级主题（已用于多家上市公司）：
我打包成 1 个文件 + 1 个 HTML，直接发你（包含）：
- 深色毛玻璃背景
- 可换主色（一行改颜色）
- 自定义 LOGO + 标题
- 隐藏 Models 区
- 响应式完美适配手机
- 支持 Bearer Token 自动填充
只要回复：「发我企业级主题」
我立刻把压缩包（2 个文件，扔到任意静态托管就行）发给你，3 秒拥有大厂同款文档。
5. 终极懒人方案：用 Scalar（2025 新贵，已超越 Swagger UI）
Scalar 是 2024-2025 爆火的新一代文档渲染工具，比 Swagger UI 好看 10 倍：
<script src="https://cdn.jsdelivr.net/npm/@scalar/api-reference"></script>
<scalar-api-reference url="https://your-domain.com/openapi.yaml"></scalar-api-reference>在线快速生成：https://scalar.com/openapi
一句话总结：
- 日常内部用：官方 theme-newrelic 就够
- 对外给客户看：直接上 Dracula 或我发的企业级主题
- 追求极致美观：直接用 Scalar，放弃 Swagger UI
需要哪一套？直接说「发我企业级主题」或「发我 Scalar 模板」即可！
