NTP: Stub out support for theme variants

[noisysocks]

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209121419454298/task/1211790481771801?focus=true

Description

• Updates initialSetup, customizer_setTheme and customizer_onThemeUpdate to allow setting a themeVariant per https://app.asana.com/1/137249556945/project/1209121419454298/task/1212083006586484?focus=true.

• Adjusts the default background colour according to the set variant so that something observable happens when sending customizer_setTheme.

• Marks customizer.defaultStyles as deprecated and updates the docs to remove references to this.

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.

Testing Steps

1. Browse to https://deploy-preview-2065--content-scope-scripts.netlify.app/build/pages/new-tab/.
2. Check that background colour is light grey (as before).
3. Switch theme to dark using Customize panel or by setting ?theme=dark.
4. Check that background colour is dark grey (as before).
5. Browse to https://deploy-preview-2065--content-scope-scripts.netlify.app/build/pages/new-tab/?themeVariant=rose. (Replace rose with any valid variant.)
6. Check that background colour is pink (or whatever).
7. Switch theme to dark using Customize panel or by setting ?theme=dark.
8. Check that background colour is purple (or whatever).

Checklist

Please tick all that apply:

• I have tested this change locally
• I have tested this change locally in all supported browsers
• This change will be visible to users
• I have added automated tests that cover this change
• I have ensured the change is gated by config
• This change was covered by a ship review
• This change was covered by a tech design
• Any dependent config has been merged

---

Note

Adds themeVariant to the New Tab customizer, wiring it through context, messaging, and CSS to change default background colors; updates schemas, mocks, docs, and tests.

• Customizer/Theming:
  • Propagate themeVariant via CustomizerThemesContext and useThemes (app/customizer/themes.js, CustomizerProvider.js, components/App.js, components/Components.jsx).
  • BackgroundConsumer now applies data-theme-variant to body and respects variant when default background is used.
• Styles:
  • Add variant-specific default background colors via body[data-theme-variant=…] in app/styles/ntp-theme.css.
• Messaging & Types:
  • Extend schemas and types to include optional themeVariant in CustomizerData, ThemeData, and customizer_setTheme (messages/types/*.json, messages/customizer_setTheme.notify.json, types/new-tab.ts).
  • Preserve existing variant when only theme changes in CustomizerProvider.
• Mocks/Boot:
  • Accept ?themeVariant= URL param and include in mock customizer data (app/customizer/mocks.js).
  • public/index.html: use $LOADING_COLOR$ token for initial background.
• Docs:
  • Document themeVariant and deprecate defaultStyles (app/customizer/customizer.md, readme.md).
• Tests:
  • Add Playwright tests for initial variant, subscription updates, dark mode, and override precedence; helper acceptsThemeVariantUpdate (integration-tests/*).

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

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	43f3691
🔍 Latest deploy log	https://app.netlify.com/projects/content-scope-scripts/deploys/6927cab71e732000089a605a
😎 Deploy Preview	https://deploy-preview-2065--content-scope-scripts.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-2065
• Commit Hash: 4f0333f48b9fe36fd277938a56faf20b1ed1e32d
• Last Updated: November 27, 2025 at 3:51:51 AM UTC
• Install Command: npm i github:duckduckgo/content-scope-scripts#4f0333f48b9fe36fd277938a56faf20b1ed1e32d

Please use the above install command to update to the latest version.

[github-actions]

[Beta] Generated file diff

Time updated: Thu, 27 Nov 2025 03:52:17 GMT

Apple

    - apple/pages/new-tab/dist/index.css

• apple/pages/new-tab/dist/index.js
• apple/pages/new-tab/index.html

File has changed

Integration

    - integration/pages/new-tab/dist/index.css

• integration/pages/new-tab/dist/index.js
• integration/pages/new-tab/index.html

File has changed

Windows

    - windows/pages/new-tab/dist/index.css

• windows/pages/new-tab/dist/index.js
• windows/pages/new-tab/index.html

File has changed