Docs: Move Dark Mode Toggle from Footer to Header for Better UX
@icyJoseph is already working on this.
Since Nov 11, 2025.
- 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.
Does the docs page already exist? Please link to it.
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.