vercel / vercel/next.js

Docs: Move Dark Mode Toggle from Footer to Header for Better UX

Open
#86,002 3 comments 0 reactions 1 assignee View on GitHub

@icyJoseph is already working on this.

Since Nov 11, 2025.

Improvement
Dominant language
JavaScript
Stars
142k
Forks
32.5k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

What is the documentation issue?

The dark/light mode toggle on the Next.js documentation site is currently placed in the footer.
While it works well functionally, its position makes it a bit difficult to find—especially for new visitors exploring the docs for the first time.

Suggestion:
It might improve discoverability and overall usability if the theme toggle were moved to the header area.
This is a more common layout in modern documentation sites (such as React, Vue, and MDN) and helps users easily notice and switch between themes without needing to scroll to the bottom of the page.

Is there any context that might help us understand?

Here’s a screenshot of the current footer where the dark/light mode toggle appears:

When viewing longer documentation pages (for example, Installation), users need to scroll all the way down to find the toggle.
For newcomers visiting the documentation, this can be confusing — they may want to switch to dark mode immediately but can’t easily locate the control.

Placing the toggle in the header would make it immediately visible and provide a more intuitive, accessible experience for all users.

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

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.