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.
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 acrosscomponents/andapp/, and noprefers-color-schemehandling inapp/globals.css. Every colour is a light-mode Tailwind utility (bg-white,text-gray-900,bg-gray-900for the sidebar, and so on), so a reader with a dark system theme gets a full-brightness page.Scope
prefers-color-schemeonly, 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..proseoverrides inglobals.csshardcodebg-gray-100,text-pink-600,bg-gray-900for code blocks andbg-blue-50for 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.