thegame_1980/xui-one-api-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dark mode colors for Swagger UI

Browse Source 
- Replaced filter invert method with proper CSS overrides
- Fixed light gray backgrounds showing in dark mode
- Improved text contrast and visibility for all Swagger elements
- Applied dark theme to inputs, buttons, tables, and code blocks
- Better color scheme with #1e1e1e, #2d2d2d backgrounds and #e0e0e0 text
This commit is contained in:
worldofiptvcom
2025-12-13 10:55:29 +03:00
parent a4a4bf11b3
commit 8e8c1d892b
1 changed files with 212 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+212 -4
View File
@@ -372,17 +372,225 @@
padding: 2rem;
}
/* Swagger UI Dark Theme */
/* Swagger UI Dark Theme - Proper Implementation */
[data-theme="dark"] .swagger-ui {
filter: invert(0.88) hue-rotate(180deg);
filter: none !important;
}
[data-theme="dark"] .swagger-ui .opblock-tag-section {
background: #2d2d2d !important;
}
[data-theme="dark"] .swagger-ui .opblock {
background: #1e1e1e !important;
border-color: #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui .opblock .opblock-summary {
background: #2d2d2d !important;
border-color: #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-description,
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-path,
[data-theme="dark"] .swagger-ui .opblock .opblock-summary-method,
[data-theme="dark"] .swagger-ui .info .title,
[data-theme="dark"] .swagger-ui .info .description,
[data-theme="dark"] .swagger-ui .scheme-container,
[data-theme="dark"] .swagger-ui .opblock-description-wrapper p,
[data-theme="dark"] .swagger-ui .opblock-external-docs-wrapper p,
[data-theme="dark"] .swagger-ui .opblock-title_normal p,
[data-theme="dark"] .swagger-ui table thead tr th,
[data-theme="dark"] .swagger-ui table tbody tr td,
[data-theme="dark"] .swagger-ui .parameter__name,
[data-theme="dark"] .swagger-ui .parameter__type,
[data-theme="dark"] .swagger-ui .response-col_status,
[data-theme="dark"] .swagger-ui .response-col_description,
[data-theme="dark"] .swagger-ui .tab li,
[data-theme="dark"] .swagger-ui select,
[data-theme="dark"] .swagger-ui label,
[data-theme="dark"] .swagger-ui .opblock-section-header h4,
[data-theme="dark"] .swagger-ui .opblock-section-header label {
color: #e0e0e0 !important;
}
[data-theme="dark"] .swagger-ui .info .title small,
[data-theme="dark"] .swagger-ui .info .description p {
color: #b0b0b0 !important;
}
[data-theme="dark"] .swagger-ui .opblock-body,
[data-theme="dark"] .swagger-ui .opblock-description-wrapper,
[data-theme="dark"] .swagger-ui .opblock-external-docs-wrapper,
[data-theme="dark"] .swagger-ui .opblock-section-header {
background: #1e1e1e !important;
}
[data-theme="dark"] .swagger-ui .scheme-container,
[data-theme="dark"] .swagger-ui .topbar,
[data-theme="dark"] .swagger-ui section.models {
background: #2d2d2d !important;
}
[data-theme="dark"] .swagger-ui input[type=text],
[data-theme="dark"] .swagger-ui input[type=password],
[data-theme="dark"] .swagger-ui input[type=search],
[data-theme="dark"] .swagger-ui input[type=email],
[data-theme="dark"] .swagger-ui input[type=file],
[data-theme="dark"] .swagger-ui textarea,
[data-theme="dark"] .swagger-ui select {
background: #1e1e1e !important;
border-color: #3a3a3a !important;
color: #e0e0e0 !important;
}
[data-theme="dark"] .swagger-ui .btn {
background: #3a3a3a !important;
color: #e0e0e0 !important;
border-color: #4a4a4a !important;
}
[data-theme="dark"] .swagger-ui .btn.execute {
background: #4a9eff !important;
color: white !important;
}
[data-theme="dark"] .swagger-ui .btn.cancel {
background: #e74c3c !important;
color: white !important;
}
[data-theme="dark"] .swagger-ui table thead tr th,
[data-theme="dark"] .swagger-ui table thead tr td {
background: #2d2d2d !important;
border-color: #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui table tbody tr td {
background: #1e1e1e !important;
border-color: #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui .model-box,
[data-theme="dark"] .swagger-ui .model {
background: #2d2d2d !important;
}
[data-theme="dark"] .swagger-ui .model-title {
background: #1e1e1e !important;
border-color: #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui section.models .model-container {
background: #2d2d2d !important;
}
[data-theme="dark"] .swagger-ui .model-box-control:focus,
[data-theme="dark"] .swagger-ui section.models .model-box {
background: #2d2d2d !important;
}
[data-theme="dark"] .swagger-ui .parameters-col_description input[type=text] {
background: #2d2d2d !important;
}
[data-theme="dark"] .swagger-ui .topbar .download-url-wrapper input[type=text] {
background: #1e1e1e !important;
border-color: #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui .topbar .download-url-wrapper .download-url-button {
background: #4a9eff !important;
color: white !important;
}
[data-theme="dark"] .swagger-ui .info .title small.version-stamp {
background-color: #4a9eff !important;
}
[data-theme="dark"] .swagger-ui .auth-wrapper {
background: #2d2d2d !important;
border-color: #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui .authorization__btn {
background: #4a9eff !important;
color: white !important;
border-color: #4a9eff !important;
}
[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux {
background: #1e1e1e !important;
border-color: #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-header {
background: #2d2d2d !important;
border-bottom: 1px solid #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content h4,
[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-content p {
color: #e0e0e0 !important;
}
[data-theme="dark"] .swagger-ui .dialog-ux .modal-ux-header h3 {
color: #e0e0e0 !important;
}
[data-theme="dark"] .swagger-ui .responses-inner h4,
[data-theme="dark"] .swagger-ui .responses-inner h5 {
color: #e0e0e0 !important;
}
[data-theme="dark"] .swagger-ui .response-col_links {
color: #4a9eff !important;
}
[data-theme="dark"] .swagger-ui .opblock-tag {
color: #e0e0e0 !important;
border-bottom-color: #3a3a3a !important;
}
[data-theme="dark"] .swagger-ui .parameter__name.required::after {
color: #e74c3c !important;
}
[data-theme="dark"] .swagger-ui .parameter__name.required span {
color: #e74c3c !important;
}
[data-theme="dark"] .swagger-ui .prop-type {
color: #4a9eff !important;
}
[data-theme="dark"] .swagger-ui .prop-format {
color: #b0b0b0 !important;
}
[data-theme="dark"] .swagger-ui a {
color: #4a9eff !important;
}
[data-theme="dark"] .swagger-ui a:hover {
color: #357abd !important;
}
[data-theme="dark"] .swagger-ui .microlight {
filter: invert(1) hue-rotate(180deg);
filter: none !important;
}
[data-theme="dark"] .swagger-ui .highlight-code {
background: #1e1e1e !important;
}
[data-theme="dark"] .swagger-ui .highlight-code .microlight {
background: #1e1e1e !important;
color: #e0e0e0 !important;
}
[data-theme="dark"] .swagger-ui img {
filter: invert(1) hue-rotate(180deg);
filter: none !important;
}
/* Responsive */