feat(theme): theme foundation and dark mode

[Clupai8o0]

What this is

This adds Light, Dark and System themes to OnTrack. Colours come from shared light and dark tokens, so screens change together when the theme changes. The choice is kept in the browser, synced to the user's account when signed in, and applied before the app starts so the wrong theme does not flash.

What is in it

• src/app/common/theme/: the theme service, the settings control and toggle, a code editor theme directive, and a theme preview page.
• src/styles/tokens/_light.scss and _dark.scss, src/theme.scss, src/styles.scss, src/styles/_theme-special-surfaces.scss and tailwind.config.js: the colour tokens and the dark variant.
• src/index.html: a small script sets the theme before the app loads. It also sets a no-referrer policy and removes the Google Analytics tag.
• Token and layout updates to the header, footer, chips, status icon, page container, task comments, task cards and inbox dashboard.
• task-planner.component.*: readable bar text, a print-safe export palette and keyboard access to bars. Tasks above the target grade are now hidden unless the student turns them on.
• scripts/theme/ and docs/theme/: a colour audit script, a theme surfaces check, the theme contract, the validation plan and regression notes.
• 9 new spec files and 3 updated. authentication.service.spec.ts is here, but the service it tests is in the security PR.
• One more commit, "feat(theme): page redesign for the theme files", brings the page redesign to 40 of this PR's files (6 of them specs). It comes from feat(theme): reland dark mode and the page redesign on 11.0.x ontrack-features-t2-2026/doubtfire-web#280, merged into our org 11.0.x on 27 Sep 2026. The rest of the redesign is feat(theme): page redesign and dark mode for every page #545.
• Update, 28 Sep 2026: one more commit. Brings feat: land integration/t2-2026 (panels, notification links, a11y, Unit Hub rework) ontrack-features-t2-2026/doubtfire-web#281. It carries the contrast fixes for both themes, the new startup splash and the themed planner Gantt.

How this set of PRs works

This is one of 24 PRs from the Thoth Tech T2 2026 Features team (9 api, 14 web, 1 deploy), one per feature per repo. Each one carries that feature's files, taken from our team org's 11.0.x branch, and applied straight onto thoth-tech 11.0.x. Every file is in exactly one PR. Some files are shared between features, so a PR on its own may not build. The demo PR in each repo (api #127, web #544) is imported by earlier PRs too, so it has to go in with the rest, not be dropped. Merged in the order below, the set equals our org 11.0.x minus team docs, evidence files, org-only CI and dev setup files. No app code or tests are left out.

On 28 Sep 2026 the set was brought up to our org's latest merges (api ontrack-features-t2-2026/doubtfire-api#178, web ontrack-features-t2-2026#281 and ontrack-features-t2-2026#282, deploy ontrack-features-t2-2026/doubtfire-deploy#41). Most PRs got one more commit for that. Two web PRs are new, panels (#546) and celebrate (#547), for files that were in no PR before.

Merge order, api first, then web, then deploy. In web, panels goes before the pages that use it, and celebrate goes after a11y, whose confetti service it needs.

• api: chore: T2 2026 platform, CI and dependency updates doubtfire-api#119 platform, fix(security): T2 2026 permission and security fixes doubtfire-api#120 security, fix: T2 2026 task, comment and user fixes doubtfire-api#121 core, feat(notifications): in-app, email and push notifications doubtfire-api#122 notifications, feat(submissions): submission processing, DOCX feedback and upload rules doubtfire-api#123 submissions, feat(unit-hub): unit hub and Teams sync doubtfire-api#124 unit-hub, feat(calendar): unit calendar and iCal feeds doubtfire-api#125 calendar, feat(ppi): peer progress and cross-unit dashboard doubtfire-api#126 ppi-cpd, feat(demo): demo scenarios and sample data tasks doubtfire-api#127 demo
• web: chore: T2 2026 platform, CI and dependency updates #534 platform, fix(security): T2 2026 permission and security fixes #535 security, feat(panels): shared collapsible and resizable panel layout #546 panels, feat(theme): theme foundation and dark mode #536 theme, fix(a11y): accessibility fixes #543 a11y, feat(celebrate): submission, sign-off and portfolio confirmations #547 celebrate, feat(ui): shared UI wiring, layout fixes and Angular moves #537 ui, feat(notifications): in-app, email and push notifications #538 notifications, feat(submissions): submission processing, DOCX feedback and upload rules #539 submissions, feat(unit-hub): unit hub and Teams sync #540 unit-hub, feat(calendar): unit calendar and iCal feeds #541 calendar, feat(ppi): peer progress and cross-unit dashboard #542 ppi-cpd, feat(demo): demo mode and demo tools #544 demo, feat(theme): page redesign and dark mode for every page #545 redesign
• deploy: chore(deploy): T2 2026 deploy and dev stack updates doubtfire-deploy#43 deploy

Built against

• api: thoth-tech 11.0.x @ dc76a5a0e, taken from org 11.0.x @ a9589b302
• web: thoth-tech 11.0.x @ 20d1f380c, taken from org 11.0.x @ 0b8a20344
• deploy: thoth-tech 11.0.x @ 58905969e, taken from org 11.0.x @ 8e560f7e0

Testing

Checked on 28 Sep 2026 with all the branches merged together. This PR was not tested on its own, see above.

• web: with all 14 web branches merged onto thoth-tech 11.0.x, npm run test:ci runs 2603 tests in 290 files, all passing, and npm run lint and ng build pass. The merged set's app code is the same as our org 11.0.x after fix(profile): save a changed summary email cadence ontrack-features-t2-2026/doubtfire-web#282, where CI passed test, lint (22) and build (22).
• api: the full Minitest suite passes on the nine api PRs merged onto thoth-tech 11.0.x. 1799 tests, 20182 assertions, 0 failures, 0 errors, 0 skips. It ran through our CI on branch check/upstream-combined-28sep (run), and the database schema check and RuboCop pass there too. The set differs from our org 11.0.x only by the left-out docs, evidence, CI and dev setup files, none of them app code.
• deploy: production/tests/validate_test.sh, verify_pwa_test.py, publish_release_test.py and nginx_upload_test.py pass. The production compose file loads with docker compose config against .env.production.example, and the development and .devcontainer ones load as they are.

Contributors

Samridh Limbu, Maple Fox, Swyam Khare, Gaurav Myana, Tan Tai, baohuy-tran, sakethsram888, Niethin Shreedharan