Files
gitea/web_src/js/standalone/swagger.ts
silverwind 6372cd7c7d Enable native dark mode for swagger-ui (#36899)
Enable swagger-ui's dark mode support added in
https://github.com/swagger-api/swagger-ui/pull/10653. Background colors
match gitea, link colors match swagger-ui.

Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>
2026-03-14 09:50:23 +01:00

49 lines
1.6 KiB
TypeScript

import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle.js';
import 'swagger-ui-dist/swagger-ui.css';
import {load as loadYaml} from 'js-yaml';
import {GET} from '../modules/fetch.ts';
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
const apply = () => document.documentElement.classList.toggle('dark-mode', prefersDark.matches);
apply();
prefersDark.addEventListener('change', apply);
window.addEventListener('load', async () => {
const elSwaggerUi = document.querySelector('#swagger-ui')!;
const url = elSwaggerUi.getAttribute('data-source')!;
let spec: any;
if (url) {
const res = await GET(url);
spec = await res.json();
} else {
const elSpecContent = elSwaggerUi.querySelector<HTMLTextAreaElement>('.swagger-spec-content')!;
const filename = elSpecContent.getAttribute('data-spec-filename');
const isJson = filename?.toLowerCase().endsWith('.json');
spec = isJson ? JSON.parse(elSpecContent.value) : loadYaml(elSpecContent.value);
}
// Make the page's protocol be at the top of the schemes list
const proto = window.location.protocol.slice(0, -1);
if (spec?.schemes) {
spec.schemes.sort((a: string, b: string) => {
if (a === proto) return -1;
if (b === proto) return 1;
return 0;
});
}
SwaggerUI({
spec,
dom_id: '#swagger-ui',
deepLinking: true,
docExpansion: 'none',
defaultModelRendering: 'model', // don't show examples by default, because they may be incomplete
presets: [
SwaggerUI.presets.apis,
],
plugins: [
SwaggerUI.plugins.DownloadUrl,
],
});
});