Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Screen icon toggles theme instead of switching to desktop preview [1 comments, 2 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#91164•Fetched 2026-04-08 00:18:52
View on GitHub
Comments
1
Participants
2
Timeline
5
Reactions
0
Author
Muzzammil-HussainMuzzammil-Hussain
Participants
github-actions[bot]github-actions[bot]Muzzammil-HussainMuzzammil-Hussain
Timeline (top)
closed ×1commented ×1issue_type_added ×1labeled ×1

Code Example

None
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

None

To Reproduce

On the Next.js website, the screen icon in the bottom-right toolbar appears to behave incorrectly.

When clicking the screen icon, it is expected to switch the preview to a desktop screen size. However, instead of changing the screen size, it toggles the theme (light/dark mode).

I have attached a screenshot showing the icon that triggers the issue.

<img width="1584" height="714" alt="Image" src="https://github.com/user-attachments/assets/0fc49933-598e-47a8-bf67-3e155dc05c1c" />

Current vs. Expected behavior

None

Provide environment information

None

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), Other (Deployed)

Additional context

No response

extent analysis

Fix: Separate the “Screen size” button from the “Theme toggle” button

The toolbar’s Screen icon is wired to the same click‑handler that toggles the theme (light/dark).
Give the screen button its own handler that changes the preview viewport (or the CSS class that drives the responsive preview) and make sure the theme button only calls toggleTheme().

1️⃣ Locate the toolbar component

Typical path: components/DevToolbar.tsx (or `components/

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#ssr#installation#tensor shape#autograd error#retrieval issue#search optimization#API routing#API middleware#SSR setup

Still need to ship something?

×6

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

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix Screen icon toggles theme instead of switching to desktop preview [1 comments, 2 participants]