Stub out support for macOS/Windows theming and theme variants

[noisysocks]

Reviewer: @shakyShane
Asana Task: https://app.asana.com/1/137249556945/project/1209121419454298/task/1211790481771802
Tech Design: https://app.asana.com/1/137249556945/project/1209121419454298/task/1212083006586484?focus=true

Description:

Similar to duckduckgo/content-scope-scripts#2065 and duckduckgo/content-scope-scripts#2066.

Adds:

• Support for calling onChangeTheme in macOS and Windows. (Previously only available in iOS/Android.)
• Support for passing an object with theme and themeVariant to onChangeTheme so that can set theme variant.
• Adjusts the default background colour according to the set variant so that something observable happens when setting a theme.

I didn’t end up updating resolveInitialRender as planned because it’s easier for handling compatibility with the native apps if themeVariant is optional. We can add this later if it proves to be necessary (e.g. flashes of un-themed content).

Intention here is to do the minimal amount needed to unblock the native apps. In follow up PRs I’ll import theme variables from the design-tokens repo and update more than just the background colour.

Steps to test this PR:

1. npm run preview
2. Navigate to http://127.0.0.1:3220/html/windows.html?screen=primaryScreen&state=with-overrides.
3. Test that dashboard switches to light/dark when system preference changes.
4. Test that can override theme using &theme=dark or &theme=light query param.
5. Test that can set variant using e.g. &themeVariant=rose or &themeVariant=desert.
6. Check again on the other platforms:

• http://127.0.0.1:3220/html/macos.html?screen=primaryScreen&state=with-overrides
• http://127.0.0.1:3220/html/ios.html?screen=primaryScreen&state=with-overrides – themeVariant shouldn’t have any affect here
• http://127.0.0.1:3220/html/android.html?screen=primaryScreen&state=with-overrides – themeVariant shouldn’t have any affect here

---

Note

Adds cross‑platform theming with optional variants, wiring onChangeTheme({ theme, themeVariant }) across platforms, updating schemas/CSS, and adding integration tests; also migrates Playwright config.

• Theme support:
  • Introduces setColorScheme and updates onChangeTheme to accept a string or { theme, themeVariant }, applying body--theme-* and body--theme-variant-* classes.
  • Wires onChangeTheme in macOS and Windows; refactors Android/iOS setup to use common handler and setupColorScheme.
  • Adds SCSS for theme variants (light/dark) and sets a loading background color in shared/html/popup.html.
• Schema:
  • Adds ThemeVariant enum and extends WindowsViewModel with optional theme and themeVariant fields.
  • Updates generated parsers/types accordingly.
• Tests & mocks:
  • Adds theme tests for Android/iOS/macOS/Windows; new mock states (theme-light, theme-dark, variant cases).
  • Mocks accept theme/themeVariant via state and URL params and dispatch onChangeTheme.
• Config:
  • Migrates Playwright config to defineConfig.

^{Written by Cursor Bugbot for commit 1494718. This will update automatically on new commits. Configure here.}

[netlify]

✅ Deploy Preview for ddgdash ready!

Name	Link
🔨 Latest commit	1494718
🔍 Latest deploy log	https://app.netlify.com/projects/ddgdash/deploys/692fb3be0f52ea0008c0eb86
😎 Deploy Preview	https://deploy-preview-596--ddgdash.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

• Branch Name: pr-releases/pr-596
• Commit Hash: c8aa803ff799aeb97fb47f2fa5e7033a279d2888

NPM

npm i github:duckduckgo/privacy-dashboard#c8aa803ff799aeb97fb47f2fa5e7033a279d2888

Git submodule:

git submodule update --remote --init submodules/privacy-dashboard
cd submodules/privacy-dashboard
git fetch origin
git checkout pr-releases/pr-227
git reset --hard origin/pr-releases/pr-227

Swift

.package(url: "https://github.com/duckduckgo/privacy-dashboard", revision: "c8aa803ff799aeb97fb47f2fa5e7033a279d2888"),

[noisysocks]

Had Claude add themeVariant to PrivacyDashboardViewModel in Windows so could test it in a real browser:

Kapture.2025-12-03.at.14.42.04.mp4