Skip to content

Fix darkmode directly #482

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tstirrat15 wants to merge 2 commits into
base: main
Choose a base branch
from
+22 −294
Open

Fix darkmode directly #482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
46d8139
Back out "fix: dark mode styling for Swagger UI on HTTP API pages (#4…
tstirrat15 Jan 13, 2026
a15835b
Fix darkmode more directly
tstirrat15 Jan 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 0 additions & 276 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,279 +93,3 @@ body {
.swagger-ui .scheme-container {
display: none;
}

/* Base Swagger UI styling */
.swagger-ui {
background-color: transparent;
font-family: inherit;
}

/* ============================================
Dark mode styling for Swagger UI
Fixes issue #440: dark mode text was unreadable
Light mode uses Swagger UI defaults (works fine)
============================================ */

/* Dark mode text colors - excluding links (handled separately) */
html.dark .swagger-ui .opblock-summary-path,
html.dark .swagger-ui .opblock-summary-path span,
html.dark .swagger-ui .opblock-tag,
html.dark .swagger-ui .opblock-tag small,
html.dark .swagger-ui .info .title,
html.dark .swagger-ui .info .title small,
html.dark .swagger-ui .info .title small pre,
html.dark .swagger-ui .info li,
html.dark .swagger-ui .info p,
html.dark .swagger-ui .info table,
html.dark .swagger-ui .info h1,
html.dark .swagger-ui .info h2,
html.dark .swagger-ui .info h3,
html.dark .swagger-ui .info h4,
html.dark .swagger-ui .info h5,
html.dark .swagger-ui .tab li,
html.dark .swagger-ui .model-title,
html.dark .swagger-ui .model .property.primitive,
html.dark .swagger-ui .responses-inner h4,
html.dark .swagger-ui .responses-inner h5,
html.dark .swagger-ui .response-col_status,
html.dark .swagger-ui .response-col_links,
html.dark .swagger-ui .opblock .opblock-summary-description,
html.dark .swagger-ui .opblock-description-wrapper p,
html.dark .swagger-ui .opblock-external-docs-wrapper,
html.dark .swagger-ui .opblock-title_normal,
html.dark .swagger-ui .parameter__name,
html.dark .swagger-ui .parameter__type,
html.dark .swagger-ui .parameter__deprecated,
html.dark .swagger-ui .parameter__in,
html.dark .swagger-ui .response-col_description__inner p,
html.dark .swagger-ui .response-col_description__inner span,
html.dark .swagger-ui .prop-type,
html.dark .swagger-ui .prop-format,
html.dark .swagger-ui table thead tr th,
html.dark .swagger-ui table thead tr td,
html.dark .swagger-ui table tbody tr th,
html.dark .swagger-ui table tbody tr td,
html.dark .swagger-ui .renderedMarkdown p,
html.dark .swagger-ui .renderedMarkdown li,
html.dark .swagger-ui .renderedMarkdown code,
html.dark .swagger-ui .markdown p,
html.dark .swagger-ui .markdown li,
html.dark .swagger-ui .markdown code {
color: var(--color-primary-200);
}

/* Dark mode links - green for visibility */
html.dark .swagger-ui a {
color: #6ee7b7;
}

/* Dark mode code blocks */
html.dark .swagger-ui .highlight-code,
html.dark .swagger-ui .microlight {
background-color: var(--color-primary-800) !important;
}

html.dark .swagger-ui pre.microlight {
background-color: var(--color-primary-800) !important;
color: var(--color-primary-200) !important;
}

html.dark .swagger-ui pre.microlight code {
color: var(--color-primary-200) !important;
}

/* Dark mode operation blocks - GET */
html.dark .swagger-ui .opblock.opblock-get {
background: rgba(97, 175, 254, 0.15);
border-color: #61affe;
}

html.dark .swagger-ui .opblock.opblock-get .opblock-summary {
border-color: #61affe;
}

/* Dark mode operation blocks - POST */
html.dark .swagger-ui .opblock.opblock-post {
background: rgba(73, 204, 144, 0.15);
border-color: #49cc90;
}

html.dark .swagger-ui .opblock.opblock-post .opblock-summary {
border-color: #49cc90;
}

/* Dark mode operation blocks - PUT */
html.dark .swagger-ui .opblock.opblock-put {
background: rgba(252, 161, 48, 0.15);
border-color: #fca130;
}

html.dark .swagger-ui .opblock.opblock-put .opblock-summary {
border-color: #fca130;
}

/* Dark mode operation blocks - DELETE */
html.dark .swagger-ui .opblock.opblock-delete {
background: rgba(249, 62, 62, 0.15);
border-color: #f93e3e;
}

html.dark .swagger-ui .opblock.opblock-delete .opblock-summary {
border-color: #f93e3e;
}

/* Dark mode operation blocks - PATCH */
html.dark .swagger-ui .opblock.opblock-patch {
background: rgba(80, 227, 194, 0.15);
border-color: #50e3c2;
}

html.dark .swagger-ui .opblock.opblock-patch .opblock-summary {
border-color: #50e3c2;
}

/* Dark mode expanded operation block body */
html.dark .swagger-ui .opblock-body pre.microlight {
background-color: #1a1a1a !important;
border: 1px solid var(--color-primary-700);
}

/* Dark mode response section */
html.dark .swagger-ui .responses-wrapper,
html.dark .swagger-ui .response {
background-color: transparent;
}

html.dark .swagger-ui .response-col_description__inner {
background-color: transparent;
}

/* Dark mode models section */
html.dark .swagger-ui .models {
border-color: var(--color-primary-700);
}

html.dark .swagger-ui .model-container {
background-color: #1a1a1a;
border-color: var(--color-primary-700);
}

html.dark .swagger-ui .model-box {
background-color: var(--color-primary-800) !important;
}

html.dark .swagger-ui .model {
color: var(--color-primary-200);
}

/* Dark mode tables */
html.dark .swagger-ui table {
background-color: transparent;
}

html.dark .swagger-ui table thead tr th,
html.dark .swagger-ui table thead tr td {
border-bottom-color: var(--color-primary-700);
}

html.dark .swagger-ui table tbody tr td {
border-bottom-color: #333;
}

/* Dark mode buttons and interactive elements */
html.dark .swagger-ui .btn {
background-color: var(--color-primary-700);
color: var(--color-primary-200);
border-color: var(--color-primary-600);
}

html.dark .swagger-ui .btn:hover {
background-color: var(--color-primary-600);
}

/* Dark mode tab styling */
html.dark .swagger-ui .tab li {
background-color: transparent;
border-color: var(--color-primary-700);
}

html.dark .swagger-ui .tab li.active {
background-color: var(--color-primary-800);
}

/* Dark mode parameters table */
html.dark .swagger-ui .parameters-col_description {
color: var(--color-primary-400);
}

html.dark .swagger-ui .parameter__name.required::after {
color: #f87171;
}

/* Dark mode copy button - target the SVG inside */
html.dark .swagger-ui .copy-to-clipboard {
background-color: var(--color-primary-700);
}

html.dark .swagger-ui .copy-to-clipboard svg {
fill: var(--color-primary-200);
}

/* Dark mode expand/collapse icons */
html.dark .swagger-ui .expand-operation svg,
html.dark .swagger-ui .expand-methods svg {
fill: var(--color-primary-400);
}

/* Dark mode arrow icons */
html.dark .swagger-ui .arrow {
fill: var(--color-primary-400);
}

/* Dark mode loading spinner */
html.dark .swagger-ui .loading-container .loading::after {
border-color: var(--color-primary-700);
border-top-color: var(--color-primary-200);
}

/* Dark mode section borders */
html.dark .swagger-ui section.models.is-open {
border-color: var(--color-primary-700);
}

html.dark .swagger-ui .opblock-tag-section {
border-bottom-color: var(--color-primary-700);
}

/* Dark mode section headers (Parameters, Request body, Responses) */
html.dark .swagger-ui .opblock-section-header {
background-color: var(--color-primary-800);
border-bottom-color: var(--color-primary-700);
}

html.dark .swagger-ui .opblock-section-header h4,
html.dark .swagger-ui .opblock-section-header label {
color: var(--color-primary-200);
}

/* Dark mode Example Value / Model tabs */
html.dark .swagger-ui .tab li button,
html.dark .swagger-ui .tab li button.tablinks {
color: var(--color-primary-300);
background-color: transparent;
}

html.dark .swagger-ui .tab li button.tablinks.active,
html.dark .swagger-ui .tab li button:focus {
color: var(--color-primary-100);
}

/* Dark mode model/schema display */
html.dark .swagger-ui .model-toggle::after {
background-color: var(--color-primary-400);
}

html.dark .swagger-ui .model span,
html.dark .swagger-ui .model-title__text {
color: var(--color-primary-200);
}
5 changes: 5 additions & 0 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,11 @@ export default async function RootLayout({ children }) {
</Footer>
}
darkMode
nextThemes={{
value: {
dark: "dark dark-mode",
}
}}
docsRepositoryBase="https://github.com/authzed/docs/tree/main"
search={enableSearch && <Search />}
sidebar={{
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"react-dom": "^19.2.3",
"react-youtube": "^10.1.0",
"sharp": "^0.34.0",
"swagger-ui-react": "^5.30.2",
"swagger-ui-react": "^5.31.0",
"tailwind-merge": "^3.4.0",
"tailwindcss": "^4.1.17"
},
Expand Down
Loading
Loading