Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix Docs UX: Main navigation overlay uses pure black background, inconsistent with site theme [1 pull requests, 9 comments, 5 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#85088•Fetched 2026-04-08 02:17:29
View on GitHub
Comments
9
Participants
5
Timeline
20
Reactions
0
Author
prdaiprdai
Participants
ABDUL-RAHMAN-9ABDUL-RAHMAN-9d3varajad3varajagithub-actions[bot]github-actions[bot]icyJosephicyJosephprdaiprdai
Assignees
icyJosephicyJoseph
Timeline (top)
commented ×9labeled ×2unsubscribed ×2assigned ×1

Fix Action

Fixed

PR fix notes

PR #85093: Fix navigation overlay background consistency in new docs app

Description (problem / solution / changelog)

What?

Fixes the navigation overlay background color in the new documentation app (apps/docs) to match the site's
theme.

Why?

Context: There are currently two separate Next.js documentation systems:

  1. Current live nextjs.org/docs - Runs on Vercel's private monorepo (not this repo)
  2. New WIP docs at /apps/docs - Open-source fumadocs-based platform (this repo, not yet live)

This PR fixes issue #85088 in the new docs app (/apps/docs), which will eventually replace the current
live site. The navigation overlay currently uses pure black (#000000), while the rest of the docs uses a soft
dark-gray background (hsl(0, 0%, 7.04%)) from the fumadocs neutral theme, creating a jarring visual inconsistency.

How?

Added CSS overrides in apps/docs/app/global.css that target:

  • Radix UI dialog overlays (used by fumadocs for navigation)
  • Vaul drawer overlays (mobile navigation)
  • Various overlay states and wrappers

The overlay now uses hsla(0, 0%, 7.04%, 0.8) in light mode and hsla(0, 0%, 7.04%, 0.95) in dark mode, matching the fumadocs neutral theme background for visual consistency.

Note: This does not fix the current live nextjs.org/docs site, as that runs on a separate codebase. The
Vercel team will need to apply a similar fix to their private monorepo to address the live site.

Fixes #85088

Improving Documentation

Changed files

  • apps/docs/app/global.css (modified, +25/-0)
RAW_BUFFERClick to expand / collapse

What is the documentation issue?

When browsing the site in dark mode, the documentation pages use a soft dark-gray background. But when the main hamburger navigation menu is opened, the overlay uses pure black (#000000) as its background. The sudden switch from dark-gray to pure black is visually jarring and inconsistent with the rest of the site’s theme.

Is there any context that might help us understand?

  • Dark mode is active.
  • On a docs page (for example: /docs/app/building-your-application/routing/defining-routes).
  • Click the hamburger icon (top right) to open the navigation overlay.
  • You’ll observe the overlay background is pure black, while the page background remains a dark-gray shade.
  • This is purely a UX/visual issue — it doesn’t break functionality, but it impacts visual polish and consistency.
  • A smoother transition or matching background color would improve the user experience.

https://github.com/user-attachments/assets/14412550-81d5-41c7-99c3-f30f2139ab5f

Does the docs page already exist? Please link to it.

the recording was taken on https://nextjs.org/docs/app/getting-started/partial-prerendering

Env

Browser: Zen OS: Mac OS

extent analysis

TL;DR

Update the CSS to use a consistent background color for the navigation overlay in dark mode.

Guidance

  • Verify the CSS styles applied to the navigation overlay and the documentation pages to identify the source of the inconsistency.
  • Check if there is a specific CSS class or selector that targets the navigation overlay in dark mode and update its background color to match the dark-gray shade used on the documentation pages.
  • Consider adding a transition effect to smoothly change the background color when the navigation overlay is opened.
  • Review the CSS variables or themes used in the project to ensure consistency across different components and modes.

Example

No specific code example can be provided without access to the project's CSS code, but the fix would involve updating the relevant CSS selector, for example:

/* hypothetical example */
.navigation-overlay {
  background-color: #333; /* update to match the dark-gray shade */
  transition: background-color 0.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#API rate limit#retriever error#indexing error#inference speed#output truncation

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING