Add light/dark toggle to default app

[wbt]

Goals

1. Add a dark/light mode toggle element to the default app root-path page.
2. Allow developers to easily preview the site in light or dark mode with a toggle button on the page.
3. Have this be a separate element, demonstrating how to include React components on the page.

Non-Goals

1. Store the toggle preference locally, especially in a way that would trigger legal obligations for cookie consent.

Background

The default app created when starting fresh detects and responds to browser-set dark mode preferences. This is great, but developers will want to see how their site looks in both light and dark modes. Adding a toggle to the default would save folks lots of work trying to figure out how to implement this each time in a new app. There used to be documentation on this in the learn section, but it didn't work and was removed.

Proposal

I'm willing to contribute, but contributing to the Next.JS looks like a moderately steep learning-curve barrier meant to keep things to folks more expert in the Next.JS codebase than I am, and collaboration to ensure it's well tested would be welcome.

See also

Blog post by @sreetamdas (source here).