UX: dark mode (nothing exists yet)
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 42/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- nextjs, tailwindcss, typescript
- Domain
- accessibility, design, frontend
Research direction
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.
Written by the indexing model from the issue text.
Description
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-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. - Then audit every component. The module player is the important one — the sidebar is already dark, and the
.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.
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 2
- Avg merge
- 21h 48m
- Merged PRs (30d)
- 1
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nextcloud/academy
-
bug content
Difficulty 2/5 1-3 hours Newbie friendliness 88/100
-
bug content
Difficulty 1/5 Under an hour Newbie friendliness 90/100
-
Difficulty 1/5 Under an hour Newbie friendliness 85/100
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
All issues in nextcloud/academy
Similar issues
-
afk-ok area:data-quality importer size:S
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
enorm-labs/event-junkie#3301 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 62/100
one-zero-eight/apply-bot#39 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
bigbluebutton/bbb-ui-components-react#108 ·
Maintainers usually reply within 2 days
-
area: app type: bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
ExpidetGames/code-reviewer#308 ·
Maintainers usually reply within 1 day
-
Difficulty 2/5 1-3 hours Newbie friendliness 82/100
Maintainers usually reply within 1 day