UX: dark mode (nothing exists yet)

Part of the UX backlog. Raised on 2026-06-11 as a dark-mode audit, against the old static site; re-scoped here for course-v2.

There is currently no dark-mode support at all: zero dark: variants across components/ and app/, and no prefers-color-scheme handling in app/globals.css. Every colour is a light-mode Tailwind utility (bg-white, text-gray-900, bg-gray-900 for the sidebar, and so on), so a reader with a dark system theme gets a full-brightness page.

Scope

• Decide the mechanism first: follow prefers-color-scheme only, or an explicit toggle with a stored preference. A toggle means persisting a choice, which is the same class of client-only state as progress.
• Then audit every component. The module player is the important one — the sidebar is already dark, and the .prose overrides in globals.css hardcode bg-gray-100, text-pink-600, bg-gray-900 for code blocks and bg-blue-50 for blockquotes.

Watch out

If a toggle is chosen, reading the stored preference on the client causes a flash of the wrong theme before hydration. Next's own guide covers the fix (an inline script that runs before first paint): node_modules/next/dist/docs/01-app/02-guides/preventing-flash-before-hydration.md.

Done when

Both themes are legible across the catalog, level pages and module player, including code blocks, blockquotes and the beta banner, with no flash on load.

Start by auditing the Tailwind utilities in components/ and app/, then inspect app/globals.css for the existing .prose overrides. Decide whether the implementation follows prefers-color-scheme or adds a stored toggle, consulting Next's preventing-flash-before-hydration.md if client state is used. Done means both themes are legible across the catalog, level pages and module player, including code blocks, blockquotes and the beta banner, without a flash on load.