arnaudne/Grow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(api-docs): full dark theme for Swagger UI — override all light sections

Browse Source
This commit is contained in:
Arnaud Nelissen
2026-06-15 19:31:54 +02:00
parent e5acf75cac
commit f1998d32c1
1 changed files with 90 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/api-docs/route.ts
+90 -2
View File
@@ -8,10 +8,98 @@ export async function GET() {
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist@5/swagger-ui.css" />
<style>
body { margin: 0; background: #0f172a; }
/* topbar + scheme bar */
.swagger-ui .topbar { background: #1e293b; border-bottom: 1px solid #334155; }
.swagger-ui .topbar .download-url-wrapper { display: none; }
.swagger-ui .info .title { color: #e2e8f0; }
.swagger-ui .scheme-container { background: #1e293b; border-bottom: 1px solid #334155; }
.swagger-ui .scheme-container { background: #1e293b; box-shadow: none; border-bottom: 1px solid #334155; padding: 12px 0; }
/* main wrapper */
.swagger-ui { background: #0f172a; color: #e2e8f0; }
.swagger-ui .wrapper { background: #0f172a; }
/* info block */
.swagger-ui .info .title,
.swagger-ui .info h1, .swagger-ui .info h2, .swagger-ui .info h3,
.swagger-ui .info p, .swagger-ui .info li,
.swagger-ui .info a { color: #e2e8f0; }
.swagger-ui .info .base-url { color: #94a3b8; }
/* operation blocks */
.swagger-ui .opblock { background: #1e293b; border-color: #334155; margin-bottom: 8px; }
.swagger-ui .opblock .opblock-summary { border-color: #334155; }
.swagger-ui .opblock .opblock-summary-description { color: #cbd5e1; }
.swagger-ui .opblock .opblock-summary-path { color: #e2e8f0; }
.swagger-ui .opblock-description-wrapper p,
.swagger-ui .opblock-external-docs-wrapper p,
.swagger-ui .opblock-title_normal p { color: #cbd5e1; }
/* section headers (Parameters / Responses) */
.swagger-ui .opblock-section-header { background: #263348; border-bottom: 1px solid #334155; }
.swagger-ui .opblock-section-header h4,
.swagger-ui .opblock-section-header label { color: #e2e8f0; }
/* tables */
.swagger-ui table thead tr td, .swagger-ui table thead tr th { color: #94a3b8; border-bottom: 1px solid #334155; }
.swagger-ui .parameters-col_description p,
.swagger-ui .parameter__name,
.swagger-ui .parameter__type,
.swagger-ui .parameter__in { color: #cbd5e1; }
.swagger-ui .response-col_status { color: #e2e8f0; }
.swagger-ui .response-col_description p { color: #cbd5e1; }
/* "Try it out" / Execute */
.swagger-ui .btn { color: #e2e8f0; border-color: #475569; background: #1e293b; }
.swagger-ui .btn:hover { background: #263348; }
.swagger-ui .btn.execute { background: #2563eb; border-color: #2563eb; color: #fff; }
.swagger-ui .btn.execute:hover { background: #1d4ed8; }
.swagger-ui .btn.cancel { background: #7f1d1d; border-color: #991b1b; color: #fca5a5; }
/* inputs */
.swagger-ui input[type=text], .swagger-ui textarea, .swagger-ui select {
background: #0f172a; color: #e2e8f0; border: 1px solid #475569;
}
/* models / schemas */
.swagger-ui section.models { background: #0f172a; border: 1px solid #334155; }
.swagger-ui section.models h4 { color: #e2e8f0; }
.swagger-ui .model-box { background: #1e293b; }
.swagger-ui .model { color: #cbd5e1; }
.swagger-ui .model-title { color: #e2e8f0; }
.swagger-ui .prop-type { color: #38bdf8; }
.swagger-ui .prop-format { color: #94a3b8; }
/* response bodies */
.swagger-ui .highlight-code { background: #0f172a; }
.swagger-ui .microlight { background: #0f172a !important; color: #e2e8f0 !important; }
.swagger-ui .responses-inner { background: #1e293b; }
.swagger-ui .response-controls { background: #263348; }
/* auth modal */
.swagger-ui .dialog-ux .modal-ux { background: #1e293b; border: 1px solid #334155; }
.swagger-ui .dialog-ux .modal-ux-header { background: #263348; border-bottom: 1px solid #334155; }
.swagger-ui .dialog-ux .modal-ux-header h3 { color: #e2e8f0; }
.swagger-ui .dialog-ux .modal-ux-content p,
.swagger-ui .dialog-ux .modal-ux-content label { color: #cbd5e1; }
.swagger-ui .auth-container .errors { background: #7f1d1d; color: #fca5a5; }
/* tag sections */
.swagger-ui .opblock-tag { color: #e2e8f0; border-bottom: 1px solid #334155; }
.swagger-ui .opblock-tag:hover { background: #1e293b; }
/* server selector */
.swagger-ui .servers > label select { background: #1e293b; color: #e2e8f0; border-color: #475569; }
/* authorize button */
.swagger-ui .authorization__btn { color: #38bdf8; }
.swagger-ui .btn.authorize { color: #38bdf8; border-color: #38bdf8; background: transparent; }
.swagger-ui .btn.authorize svg { fill: #38bdf8; }
.swagger-ui .btn.authorize.locked { color: #4ade80; border-color: #4ade80; }
.swagger-ui .btn.authorize.locked svg { fill: #4ade80; }
/* misc text */
.swagger-ui .markdown p, .swagger-ui .renderedMarkdown p { color: #cbd5e1; }
.swagger-ui .loading-container .loading::after { color: #94a3b8; }
</style>
</head>
<body>