nextjs - 💡(How to fix) Fix Docs: Move Dark Mode Toggle from Footer to Header for Better UX [3 comments, 3 participants]

TL;DR

Moving the dark/light mode toggle from the footer to the header area of the Next.js documentation site is likely to improve discoverability and usability.

Guidance

• Review the current layout and functionality of the theme toggle in the footer to understand the potential impact of moving it to the header.
• Consider the common layouts used in other modern documentation sites, such as React, Vue, and MDN, where the theme toggle is often placed in the header for easier access.
• Assess the trade-offs of moving the toggle, including potential effects on the site's design and user experience.
• Evaluate the feasibility of implementing this change, including any necessary updates to the site's code or design.

Example

No specific code example is provided, as the issue focuses on the layout and design of the documentation site rather than a specific code implementation.

Notes

The success of this change depends on the specific design and implementation of the Next.js documentation site. It is essential to consider the site's overall user experience and design principles when making this change.

Recommendation

Apply workaround: Move the theme toggle to the header area, as this is a common and intuitive location for this control, making it easier for users to find and switch between themes.