Skip to content

Commit b3fc870

Browse files
ivanauthivanauth
authored
fix: dark mode styling for Swagger UI on HTTP API pages (#465)
1 parent f018fb3 commit b3fc870

File tree

1 file changed

+276
-0
lines changed

1 file changed

+276
-0
lines changed

‎app/globals.css‎

Lines changed: 276 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,3 +93,279 @@ body {
9393
.swagger-ui .scheme-container {
9494
display: none;
9595
}
96+
97+
/* Base Swagger UI styling */
98+
.swagger-ui {
99+
background-color: transparent;
100+
font-family: inherit;
101+
}
102+
103+
/* ============================================
104+
Dark mode styling for Swagger UI
105+
Fixes issue #440: dark mode text was unreadable
106+
Light mode uses Swagger UI defaults (works fine)
107+
============================================ */
108+
109+
/* Dark mode text colors - excluding links (handled separately) */
110+
html.dark .swagger-ui .opblock-summary-path,
111+
html.dark .swagger-ui .opblock-summary-path span,
112+
html.dark .swagger-ui .opblock-tag,
113+
html.dark .swagger-ui .opblock-tag small,
114+
html.dark .swagger-ui .info .title,
115+
html.dark .swagger-ui .info .title small,
116+
html.dark .swagger-ui .info .title small pre,
117+
html.dark .swagger-ui .info li,
118+
html.dark .swagger-ui .info p,
119+
html.dark .swagger-ui .info table,
120+
html.dark .swagger-ui .info h1,
121+
html.dark .swagger-ui .info h2,
122+
html.dark .swagger-ui .info h3,
123+
html.dark .swagger-ui .info h4,
124+
html.dark .swagger-ui .info h5,
125+
html.dark .swagger-ui .tab li,
126+
html.dark .swagger-ui .model-title,
127+
html.dark .swagger-ui .model .property.primitive,
128+
html.dark .swagger-ui .responses-inner h4,
129+
html.dark .swagger-ui .responses-inner h5,
130+
html.dark .swagger-ui .response-col_status,
131+
html.dark .swagger-ui .response-col_links,
132+
html.dark .swagger-ui .opblock .opblock-summary-description,
133+
html.dark .swagger-ui .opblock-description-wrapper p,
134+
html.dark .swagger-ui .opblock-external-docs-wrapper,
135+
html.dark .swagger-ui .opblock-title_normal,
136+
html.dark .swagger-ui .parameter__name,
137+
html.dark .swagger-ui .parameter__type,
138+
html.dark .swagger-ui .parameter__deprecated,
139+
html.dark .swagger-ui .parameter__in,
140+
html.dark .swagger-ui .response-col_description__inner p,
141+
html.dark .swagger-ui .response-col_description__inner span,
142+
html.dark .swagger-ui .prop-type,
143+
html.dark .swagger-ui .prop-format,
144+
html.dark .swagger-ui table thead tr th,
145+
html.dark .swagger-ui table thead tr td,
146+
html.dark .swagger-ui table tbody tr th,
147+
html.dark .swagger-ui table tbody tr td,
148+
html.dark .swagger-ui .renderedMarkdown p,
149+
html.dark .swagger-ui .renderedMarkdown li,
150+
html.dark .swagger-ui .renderedMarkdown code,
151+
html.dark .swagger-ui .markdown p,
152+
html.dark .swagger-ui .markdown li,
153+
html.dark .swagger-ui .markdown code {
154+
color: var(--color-primary-200);
155+
}
156+
157+
/* Dark mode links - green for visibility */
158+
html.dark .swagger-ui a {
159+
color: #6ee7b7;
160+
}
161+
162+
/* Dark mode code blocks */
163+
html.dark .swagger-ui .highlight-code,
164+
html.dark .swagger-ui .microlight {
165+
background-color: var(--color-primary-800) !important;
166+
}
167+
168+
html.dark .swagger-ui pre.microlight {
169+
background-color: var(--color-primary-800) !important;
170+
color: var(--color-primary-200) !important;
171+
}
172+
173+
html.dark .swagger-ui pre.microlight code {
174+
color: var(--color-primary-200) !important;
175+
}
176+
177+
/* Dark mode operation blocks - GET */
178+
html.dark .swagger-ui .opblock.opblock-get {
179+
background: rgba(97, 175, 254, 0.15);
180+
border-color: #61affe;
181+
}
182+
183+
html.dark .swagger-ui .opblock.opblock-get .opblock-summary {
184+
border-color: #61affe;
185+
}
186+
187+
/* Dark mode operation blocks - POST */
188+
html.dark .swagger-ui .opblock.opblock-post {
189+
background: rgba(73, 204, 144, 0.15);
190+
border-color: #49cc90;
191+
}
192+
193+
html.dark .swagger-ui .opblock.opblock-post .opblock-summary {
194+
border-color: #49cc90;
195+
}
196+
197+
/* Dark mode operation blocks - PUT */
198+
html.dark .swagger-ui .opblock.opblock-put {
199+
background: rgba(252, 161, 48, 0.15);
200+
border-color: #fca130;
201+
}
202+
203+
html.dark .swagger-ui .opblock.opblock-put .opblock-summary {
204+
border-color: #fca130;
205+
}
206+
207+
/* Dark mode operation blocks - DELETE */
208+
html.dark .swagger-ui .opblock.opblock-delete {
209+
background: rgba(249, 62, 62, 0.15);
210+
border-color: #f93e3e;
211+
}
212+
213+
html.dark .swagger-ui .opblock.opblock-delete .opblock-summary {
214+
border-color: #f93e3e;
215+
}
216+
217+
/* Dark mode operation blocks - PATCH */
218+
html.dark .swagger-ui .opblock.opblock-patch {
219+
background: rgba(80, 227, 194, 0.15);
220+
border-color: #50e3c2;
221+
}
222+
223+
html.dark .swagger-ui .opblock.opblock-patch .opblock-summary {
224+
border-color: #50e3c2;
225+
}
226+
227+
/* Dark mode expanded operation block body */
228+
html.dark .swagger-ui .opblock-body pre.microlight {
229+
background-color: #1a1a1a !important;
230+
border: 1px solid var(--color-primary-700);
231+
}
232+
233+
/* Dark mode response section */
234+
html.dark .swagger-ui .responses-wrapper,
235+
html.dark .swagger-ui .response {
236+
background-color: transparent;
237+
}
238+
239+
html.dark .swagger-ui .response-col_description__inner {
240+
background-color: transparent;
241+
}
242+
243+
/* Dark mode models section */
244+
html.dark .swagger-ui .models {
245+
border-color: var(--color-primary-700);
246+
}
247+
248+
html.dark .swagger-ui .model-container {
249+
background-color: #1a1a1a;
250+
border-color: var(--color-primary-700);
251+
}
252+
253+
html.dark .swagger-ui .model-box {
254+
background-color: var(--color-primary-800) !important;
255+
}
256+
257+
html.dark .swagger-ui .model {
258+
color: var(--color-primary-200);
259+
}
260+
261+
/* Dark mode tables */
262+
html.dark .swagger-ui table {
263+
background-color: transparent;
264+
}
265+
266+
html.dark .swagger-ui table thead tr th,
267+
html.dark .swagger-ui table thead tr td {
268+
border-bottom-color: var(--color-primary-700);
269+
}
270+
271+
html.dark .swagger-ui table tbody tr td {
272+
border-bottom-color: #333;
273+
}
274+
275+
/* Dark mode buttons and interactive elements */
276+
html.dark .swagger-ui .btn {
277+
background-color: var(--color-primary-700);
278+
color: var(--color-primary-200);
279+
border-color: var(--color-primary-600);
280+
}
281+
282+
html.dark .swagger-ui .btn:hover {
283+
background-color: var(--color-primary-600);
284+
}
285+
286+
/* Dark mode tab styling */
287+
html.dark .swagger-ui .tab li {
288+
background-color: transparent;
289+
border-color: var(--color-primary-700);
290+
}
291+
292+
html.dark .swagger-ui .tab li.active {
293+
background-color: var(--color-primary-800);
294+
}
295+
296+
/* Dark mode parameters table */
297+
html.dark .swagger-ui .parameters-col_description {
298+
color: var(--color-primary-400);
299+
}
300+
301+
html.dark .swagger-ui .parameter__name.required::after {
302+
color: #f87171;
303+
}
304+
305+
/* Dark mode copy button - target the SVG inside */
306+
html.dark .swagger-ui .copy-to-clipboard {
307+
background-color: var(--color-primary-700);
308+
}
309+
310+
html.dark .swagger-ui .copy-to-clipboard svg {
311+
fill: var(--color-primary-200);
312+
}
313+
314+
/* Dark mode expand/collapse icons */
315+
html.dark .swagger-ui .expand-operation svg,
316+
html.dark .swagger-ui .expand-methods svg {
317+
fill: var(--color-primary-400);
318+
}
319+
320+
/* Dark mode arrow icons */
321+
html.dark .swagger-ui .arrow {
322+
fill: var(--color-primary-400);
323+
}
324+
325+
/* Dark mode loading spinner */
326+
html.dark .swagger-ui .loading-container .loading::after {
327+
border-color: var(--color-primary-700);
328+
border-top-color: var(--color-primary-200);
329+
}
330+
331+
/* Dark mode section borders */
332+
html.dark .swagger-ui section.models.is-open {
333+
border-color: var(--color-primary-700);
334+
}
335+
336+
html.dark .swagger-ui .opblock-tag-section {
337+
border-bottom-color: var(--color-primary-700);
338+
}
339+
340+
/* Dark mode section headers (Parameters, Request body, Responses) */
341+
html.dark .swagger-ui .opblock-section-header {
342+
background-color: var(--color-primary-800);
343+
border-bottom-color: var(--color-primary-700);
344+
}
345+
346+
html.dark .swagger-ui .opblock-section-header h4,
347+
html.dark .swagger-ui .opblock-section-header label {
348+
color: var(--color-primary-200);
349+
}
350+
351+
/* Dark mode Example Value / Model tabs */
352+
html.dark .swagger-ui .tab li button,
353+
html.dark .swagger-ui .tab li button.tablinks {
354+
color: var(--color-primary-300);
355+
background-color: transparent;
356+
}
357+
358+
html.dark .swagger-ui .tab li button.tablinks.active,
359+
html.dark .swagger-ui .tab li button:focus {
360+
color: var(--color-primary-100);
361+
}
362+
363+
/* Dark mode model/schema display */
364+
html.dark .swagger-ui .model-toggle::after {
365+
background-color: var(--color-primary-400);
366+
}
367+
368+
html.dark .swagger-ui .model span,
369+
html.dark .swagger-ui .model-title__text {
370+
color: var(--color-primary-200);
371+
}

0 commit comments

Comments
 (0)