Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-14 10:57:54 +02:00
Code Issues Activity

Enable native dark mode for swagger-ui (#36899)

Browse Source 
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>
This commit is contained in:
silverwind 2026-03-14 09:50:23 +01:00 committed by GitHub
parent e29d1b79d8
commit 6372cd7c7d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web_src/css/standalone/swagger.css
View File

@ -10,7 +10,7 @@ body {
} }
.swagger-back-link { .swagger-back-link {
color: #1f69c0; color: #4990e2;
text-decoration: none; text-decoration: none;
position: absolute; position: absolute;
top: 1rem; top: 1rem;
@ -19,6 +19,18 @@ body {
align-items: center; align-items: center;
} }
@media (prefers-color-scheme: dark) {
body {
background: #1c2022;
}
.swagger-back-link {
color: #51a8ff;
}
.swagger-ui table.headers td {
color: #aeb4c4; /** fix low contrast */
}
}
.swagger-back-link:hover { .swagger-back-link:hover {
text-decoration: underline; text-decoration: underline;
} }
@ -32,15 +44,3 @@ body {
.swagger-spec-content { .swagger-spec-content {
display: none; display: none;
} }
@media (prefers-color-scheme: dark) {
body {
background: #14171a;
}
.swagger-ui, .swagger-back-link {
filter: invert(88%) hue-rotate(180deg);
}
.swagger-ui .microlight {
filter: invert(100%) hue-rotate(180deg);
}
}

5
web_src/js/standalone/swagger.ts
View File

@ -3,6 +3,11 @@ import 'swagger-ui-dist/swagger-ui.css';
import {load as loadYaml} from 'js-yaml'; import {load as loadYaml} from 'js-yaml';
import {GET} from '../modules/fetch.ts'; 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 () => { window.addEventListener('load', async () => {
const elSwaggerUi = document.querySelector('#swagger-ui')!; const elSwaggerUi = document.querySelector('#swagger-ui')!;
const url = elSwaggerUi.getAttribute('data-source')!; const url = elSwaggerUi.getAttribute('data-source')!;