0
0
mirror of https://github.com/go-gitea/gitea.git synced 2026-03-15 09:56:59 +01:00

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>
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

View File

@ -10,7 +10,7 @@ body {
}
.swagger-back-link {
color: #1f69c0;
color: #4990e2;
text-decoration: none;
position: absolute;
top: 1rem;
@ -19,6 +19,18 @@ body {
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 {
text-decoration: underline;
}
@ -32,15 +44,3 @@ body {
.swagger-spec-content {
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);
}
}

View File

@ -3,6 +3,11 @@ 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')!;