/* ═══════════════════════════════════════════════════════════════════════════ Swagger UI — Dark theme by default. Adding class "light-mode" to restores Swagger's native light theme. ═══════════════════════════════════════════════════════════════════════════ */ /* ── CSS variables ── */ :root { --bg-primary: #0a0a0a; --bg-secondary: #111111; --bg-tertiary: #1a1a1a; --bg-input: #0d0d0d; --bg-code: #141414; --text-primary: #e6edf3; --text-muted: #8b949e; --text-link: #58a6ff; --border: #2a2a2a; --accent: #1f6feb; } /* ══════════════════════ DARK (default) ══════════════════════════════════ */ body:not(.light-mode), body:not(.light-mode) .swagger-ui { background: var(--bg-primary) !important; color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .topbar { background: var(--bg-secondary) !important; border-bottom: 1px solid var(--border) !important; } body:not(.light-mode) .swagger-ui .topbar a { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .info .title, body:not(.light-mode) .swagger-ui .info h1, body:not(.light-mode) .swagger-ui .info h2, body:not(.light-mode) .swagger-ui .info h3, body:not(.light-mode) .swagger-ui .info p, body:not(.light-mode) .swagger-ui .info li { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .info a { color: var(--text-link) !important; } body:not(.light-mode) .swagger-ui .info .base-url { color: var(--text-muted) !important; } body:not(.light-mode) .swagger-ui .scheme-container { background: var(--bg-secondary) !important; box-shadow: none !important; border-bottom: 1px solid var(--border) !important; } body:not(.light-mode) .swagger-ui .opblock-tag { border-bottom: 1px solid var(--border) !important; color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .opblock-tag:hover { background: var(--bg-secondary) !important; } body:not(.light-mode) .swagger-ui .opblock-tag small, body:not(.light-mode) .swagger-ui .opblock-tag a, body:not(.light-mode) .swagger-ui .opblock-tag span { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui a.nostyle, body:not(.light-mode) .swagger-ui a.nostyle:visited { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .opblock { background: var(--bg-secondary) !important; border-color: var(--border) !important; box-shadow: none !important; } body:not(.light-mode) .swagger-ui .opblock .opblock-summary { border-color: var(--border) !important; } body:not(.light-mode) .swagger-ui .opblock .opblock-summary-description { color: var(--text-muted) !important; } /* Endpoint paths */ body:not(.light-mode) .swagger-ui .opblock-summary-path, body:not(.light-mode) .swagger-ui .opblock-summary-path span, body:not(.light-mode) .swagger-ui .opblock-summary-path a, body:not(.light-mode) .swagger-ui .opblock-summary-path a span, body:not(.light-mode) .swagger-ui .opblock-summary-path__deprecated, body:not(.light-mode) .swagger-ui .opblock-summary-operation-id { color: var(--text-primary) !important; } /* HTTP method tinted rows */ body:not(.light-mode) .swagger-ui .opblock.opblock-get .opblock-summary { background: rgba(97,175,254,.08) !important; } body:not(.light-mode) .swagger-ui .opblock.opblock-post .opblock-summary { background: rgba(73,204,144,.08) !important; } body:not(.light-mode) .swagger-ui .opblock.opblock-put .opblock-summary { background: rgba(252,161, 48,.08) !important; } body:not(.light-mode) .swagger-ui .opblock.opblock-patch .opblock-summary { background: rgba(80,227,194,.08) !important; } body:not(.light-mode) .swagger-ui .opblock.opblock-delete .opblock-summary { background: rgba(249,62, 62,.08) !important; } body:not(.light-mode) .swagger-ui .opblock-body-inner, body:not(.light-mode) .swagger-ui .opblock-section-header { background: var(--bg-primary) !important; } body:not(.light-mode) .swagger-ui .opblock-section-header h4, body:not(.light-mode) .swagger-ui .opblock-section-header label { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui table thead tr th, body:not(.light-mode) .swagger-ui table thead tr td { border-bottom: 1px solid var(--border) !important; color: var(--text-muted) !important; } body:not(.light-mode) .swagger-ui table tbody tr td { color: var(--text-primary) !important; border-bottom: 1px solid var(--border) !important; } body:not(.light-mode) .swagger-ui .parameters-col_description p, body:not(.light-mode) .swagger-ui .parameter__name, body:not(.light-mode) .swagger-ui .parameter__type { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .parameter__deprecated { color: #f78166 !important; } body:not(.light-mode) .swagger-ui .parameter__in { color: var(--text-muted) !important; } body:not(.light-mode) .swagger-ui input[type=text], body:not(.light-mode) .swagger-ui input[type=password], body:not(.light-mode) .swagger-ui input[type=search], body:not(.light-mode) .swagger-ui input[type=email], body:not(.light-mode) .swagger-ui textarea, body:not(.light-mode) .swagger-ui select { background: var(--bg-input) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; border-radius: 4px !important; } body:not(.light-mode) .swagger-ui input::placeholder, body:not(.light-mode) .swagger-ui textarea::placeholder { color: var(--text-muted) !important; } body:not(.light-mode) .swagger-ui select option { background: var(--bg-input) !important; } body:not(.light-mode) .swagger-ui .btn { color: var(--text-primary) !important; border-color: var(--border) !important; background: var(--bg-tertiary) !important; } body:not(.light-mode) .swagger-ui .btn:hover { opacity: 0.85 !important; } body:not(.light-mode) .swagger-ui .btn.execute { background: var(--accent) !important; border-color: var(--accent) !important; } body:not(.light-mode) .swagger-ui .btn.cancel { background: #b62324 !important; border-color: #b62324 !important; } body:not(.light-mode) .swagger-ui .btn.authorize { background: transparent !important; border-color: #3fb950 !important; color: #3fb950 !important; } body:not(.light-mode) .swagger-ui .authorization__btn svg { fill: #3fb950 !important; } body:not(.light-mode) .swagger-ui .highlight-code, body:not(.light-mode) .swagger-ui pre, body:not(.light-mode) .swagger-ui code, body:not(.light-mode) .swagger-ui .microlight { background: var(--bg-code) !important; color: #c9d1d9 !important; border-radius: 6px !important; } body:not(.light-mode) .swagger-ui .responses-inner h4, body:not(.light-mode) .swagger-ui .responses-inner h5 { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .response-col_status { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .response-col_links { color: var(--text-muted) !important; } body:not(.light-mode) .swagger-ui section.models { border: 1px solid var(--border) !important; background: var(--bg-secondary) !important; } body:not(.light-mode) .swagger-ui section.models h4, body:not(.light-mode) .swagger-ui section.models h5 { color: var(--text-primary) !important; border-bottom: 1px solid var(--border) !important; } body:not(.light-mode) .swagger-ui .model-box { background: var(--bg-code) !important; } body:not(.light-mode) .swagger-ui .model, body:not(.light-mode) .swagger-ui .model-title { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .prop-type { color: #79c0ff !important; } body:not(.light-mode) .swagger-ui .prop-format { color: var(--text-muted) !important; } body:not(.light-mode) .swagger-ui .dialog-ux .modal-ux { background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; } body:not(.light-mode) .swagger-ui .dialog-ux .modal-ux-header { border-bottom: 1px solid var(--border) !important; } body:not(.light-mode) .swagger-ui .dialog-ux .modal-ux-header h3, body:not(.light-mode) .swagger-ui .dialog-ux .modal-ux-content p, body:not(.light-mode) .swagger-ui .dialog-ux .modal-ux-content label { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .dialog-ux .modal-ux-content code { background: var(--bg-code) !important; } body:not(.light-mode) .swagger-ui .arrow, body:not(.light-mode) .swagger-ui svg.arrow path { fill: var(--text-muted) !important; } body:not(.light-mode) .swagger-ui .markdown p, body:not(.light-mode) .swagger-ui .markdown li, body:not(.light-mode) .swagger-ui .renderedMarkdown p, body:not(.light-mode) .swagger-ui .renderedMarkdown li { color: var(--text-primary) !important; } body:not(.light-mode) .swagger-ui .markdown code, body:not(.light-mode) .swagger-ui .renderedMarkdown code { background: var(--bg-code) !important; color: #79c0ff !important; padding: 1px 5px !important; border-radius: 4px !important; } body:not(.light-mode) .swagger-ui .markdown blockquote, body:not(.light-mode) .swagger-ui .renderedMarkdown blockquote { border-left: 3px solid var(--accent) !important; color: var(--text-muted) !important; padding-left: 12px !important; } body:not(.light-mode) .swagger-ui .filter .operation-filter-input { background: var(--bg-input) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; } body:not(.light-mode) ::-webkit-scrollbar { width: 8px; height: 8px; } body:not(.light-mode) ::-webkit-scrollbar-track { background: var(--bg-primary); } body:not(.light-mode) ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } body:not(.light-mode) ::-webkit-scrollbar-thumb:hover { background: #444; } /* ══════════════════════ TOGGLE BUTTON ═══════════════════════════════════ */ #theme-toggle-btn { padding: 6px 14px; font-size: 13px; font-weight: 600; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.15); color: #fff; transition: background 0.2s; } #theme-toggle-btn:hover { background: rgba(255,255,255,0.25); }