Skip to content

Fix dark mode unreadability for auth sections and polymorphic dropdowns#439

Draft
Copilot wants to merge 2 commits intomainfrom
copilot/fix-dark-mode-authentication-visibility
Draft

Fix dark mode unreadability for auth sections and polymorphic dropdowns#439
Copilot wants to merge 2 commits intomainfrom
copilot/fix-dark-mode-authentication-visibility

Conversation

Copy link
Copy Markdown

Copilot AI commented Mar 30, 2026

In dark mode, the expanded authentication section and oneOf/anyOf discriminator dropdowns render with near-white backgrounds, making light-colored text completely unreadable.

Root Causes

  • Auth section / nested backgrounds: DARK_THEME_OPTIONS.colors.gray was set to #FAFAFA/#F5F5F5 — identical to the light theme defaults. Redoc's SecuritiesColumn (expanded auth), Uc (nested content areas), and Qc (operation buttons) all derive their backgrounds from these values.
  • Polymorphic dropdown: Redoc's Dropdown styled-component has background: white hardcoded — not overridable via theme options, requires a CSS override.

Changes

  • redocData.ts — Replace near-white gray values in DARK_THEME_OPTIONS with actual dark colors:

    + surface: 'rgb(36, 37, 38)',   // added to DOCUSAURUS.dark
    
      gray: {
    -   50: '#FAFAFA',
    -   100: '#F5F5F5',
    +   50: DOCUSAURUS.dark.backgroundColor,   // rgb(24, 25, 26)
    +   100: DOCUSAURUS.dark.surface,           // rgb(36, 37, 38)
      },
  • styles.css — Add a dark-mode CSS override targeting the dropdown container (identified by its child select.dropdown-select) to override the hardcoded white background:

    html[data-theme='dark'] .redocusaurus :has(> select.dropdown-select) {
      background-color: var(--ifm-background-surface-color);
      color: var(--ifm-font-color-base);
      border-color: var(--ifm-toc-border-color);
    }

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • https://api.github.com/repos/Redocly/redoc/contents/src/common-elements
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 30, 2026

⚠️ No Changeset found

Latest commit: db06abd

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot AI linked an issue Mar 30, 2026 that may be closed by this pull request
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
redocusaurus Error Error Mar 30, 2026 10:32pm

Copilot AI changed the title [WIP] Fix dark mode readability for authentication section Fix dark mode unreadability for auth sections and polymorphic dropdowns Mar 30, 2026
Copilot AI requested a review from rohit-gohri March 30, 2026 22:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark mode - authentication section unreadable

2 participants