From 46d81398c24164c1b6ea281a8e50387769784a1d Mon Sep 17 00:00:00 2001 From: Tanner Stirrat Date: Tue, 13 Jan 2026 12:51:54 -0700 Subject: [PATCH 1/2] Back out "fix: dark mode styling for Swagger UI on HTTP API pages (#465)" This backs out commit b3fc8701f4da23ff3a4d4f2193d64336f9779c5b. --- app/globals.css | 276 ------------------------------------------------ 1 file changed, 276 deletions(-) diff --git a/app/globals.css b/app/globals.css index da1927b1..1c64aeb6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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); -} From a15835bfd62227c488badbbcec865c25bcb0a2d8 Mon Sep 17 00:00:00 2001 From: Tanner Stirrat Date: Tue, 13 Jan 2026 12:52:10 -0700 Subject: [PATCH 2/2] Fix darkmode more directly --- app/layout.tsx | 5 +++++ package.json | 2 +- pnpm-lock.yaml | 33 ++++++++++++++++----------------- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 22034822..6aea8122 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -81,6 +81,11 @@ export default async function RootLayout({ children }) { } darkMode + nextThemes={{ + value: { + dark: "dark dark-mode", + } + }} docsRepositoryBase="https://github.com/authzed/docs/tree/main" search={enableSearch && } sidebar={{ diff --git a/package.json b/package.json index 33c80e15..4886fb20 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 49da5c29..58d58a93 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -72,8 +72,8 @@ importers: specifier: ^0.34.0 version: 0.34.1 swagger-ui-react: - specifier: ^5.30.2 - version: 5.30.2(@types/react@19.1.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + specifier: ^5.31.0 + version: 5.31.0(@types/react@19.1.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3) tailwind-merge: specifier: ^3.4.0 version: 3.4.0 @@ -2881,6 +2881,10 @@ packages: resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==} hasBin: true + js-yaml@4.1.1: + resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==} + hasBin: true + jsesc@0.5.0: resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==} hasBin: true @@ -3990,8 +3994,8 @@ packages: swagger-client@3.36.0: resolution: {integrity: sha512-9fkjxGHXuKy20jj8zwE6RwgFSOGKAyOD5U7aKgW/+/futtHZHOdZeqiEkb97sptk2rdBv7FEiUQDNlWZR186RA==} - swagger-ui-react@5.30.2: - resolution: {integrity: sha512-0tS9GOcswKuQrIpCyvDoCDs6xS8B6MRC+iE7P99WfVXDhAIU+U7iFHuS4e7zucSh9qXvcL7KsXs623c+4oBe6w==} + swagger-ui-react@5.31.0: + resolution: {integrity: sha512-E/sTgKADThzpVksaGXbhED0pQCYdajiBNOzvSAan+RhV7pdoi2qvdwWhZsIo8nRvHk9UXJ0nkuxrud854ICr7A==} peerDependencies: react: '>=16.8.0 <20' react-dom: '>=16.8.0 <20' @@ -4195,11 +4199,6 @@ packages: url-parse@1.5.10: resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==} - use-sync-external-store@1.5.0: - resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==} - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - use-sync-external-store@1.6.0: resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==} peerDependencies: @@ -7560,6 +7559,10 @@ snapshots: dependencies: argparse: 2.0.1 + js-yaml@4.1.1: + dependencies: + argparse: 2.0.1 + jsesc@0.5.0: {} jsesc@2.5.2: {} @@ -8665,7 +8668,7 @@ snapshots: dependencies: '@types/use-sync-external-store': 0.0.6 react: 19.2.3 - use-sync-external-store: 1.5.0(react@19.2.3) + use-sync-external-store: 1.6.0(react@19.2.3) optionalDependencies: '@types/react': 19.1.6 redux: 5.0.1 @@ -9145,7 +9148,7 @@ snapshots: '@swaggerexpert/cookie': 2.0.2 deepmerge: 4.3.1 fast-json-patch: 3.1.1 - js-yaml: 4.1.0 + js-yaml: 4.1.1 neotraverse: 0.6.18 node-abort-controller: 3.1.1 node-fetch-commonjs: 3.3.2 @@ -9156,7 +9159,7 @@ snapshots: transitivePeerDependencies: - debug - swagger-ui-react@5.30.2(@types/react@19.1.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3): + swagger-ui-react@5.31.0(@types/react@19.1.6)(react-dom@19.2.3(react@19.2.3))(react@19.2.3): dependencies: '@babel/runtime-corejs3': 7.27.4 '@scarf/scarf': 1.4.0 @@ -9169,7 +9172,7 @@ snapshots: ieee754: 1.2.1 immutable: 3.8.2 js-file-download: 0.4.12 - js-yaml: 4.1.0 + js-yaml: 4.1.1 lodash: 4.17.21 prop-types: 15.8.1 randexp: 0.5.3 @@ -9416,10 +9419,6 @@ snapshots: querystringify: 2.2.0 requires-port: 1.0.0 - use-sync-external-store@1.5.0(react@19.2.3): - dependencies: - react: 19.2.3 - use-sync-external-store@1.6.0(react@19.2.3): dependencies: react: 19.2.3