Special Error: Stub out support for theming

[noisysocks]

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209121419454298/task/1211842297547582

• Updates initialSetup and adds onThemeUpdate to allow setting a theme and 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 setting a theme.

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-2076--content-scope-scripts.netlify.app/build/pages/special-error/.
2. Check that background colour is light grey (as before).
3. Switch theme to dark using System Settings panel or by setting ?theme=dark.
4. Check that background colour is dark grey (as before).
5. Browse to https://deploy-preview-2076--content-scope-scripts.netlify.app/build/pages/special-error/?themeVariant=rose. (Replace rose with any valid variant.)
6. Check that background colour is pink (or whatever).
7. Switch theme to dark using system settings 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 ThemeProvider-driven theming to Special Error, supporting theme/themeVariant via initialSetup and onThemeUpdate, updates CSS variables, and adds integration tests.

• Special Error app:
  • Introduces ThemeProvider to derive/apply data-theme and data-theme-variant on body (from initialSetup, onThemeUpdate, or system preference).
  • Wires ThemeProvider around App/Components; removes per-element theme on App.jsx.
  • Updates public/index.html to use a $LOADING_COLOR$ for initial background.
• Styling:
  • Reworks styles/variables.css to use body data attributes; adds theme variants (coolGray, slateBlue, green, violet, rose, orange, desert) and iOS dark default tweak.
• Messaging & Types:
  • Extends initialSetup.response with optional theme and themeVariant.
  • Adds onThemeUpdate.subscribe and enums for BrowserTheme/ThemeVariant; exposes onThemeUpdate API on SpecialErrorPage and subscribe in types.
  • Mock transport supports theme/themeVariant via URL params.
• Tests & config:
  • Adds special-error-theme.spec.js and helpers (hasTheme, hasBackgroundColor, acceptsThemeUpdate, additional initial setup overrides).
  • Includes new spec in Playwright projects.

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

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	c6fcae8
🔍 Latest deploy log	https://app.netlify.com/projects/content-scope-scripts/deploys/6930de81e86b34000831c6fb
😎 Deploy Preview	https://deploy-preview-2076--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-2076
• Commit Hash: 16e6d221a3d75e3893f3225d318d2424f75c59bf
• Last Updated: December 4, 2025 at 1:06:41 AM UTC
• Install Command: npm i github:duckduckgo/content-scope-scripts#16e6d221a3d75e3893f3225d318d2424f75c59bf

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

[github-actions]

[Beta] Generated file diff

Time updated: Thu, 04 Dec 2025 01:07:00 GMT

Apple

    - apple/pages/special-error/dist/index.css

• apple/pages/special-error/dist/index.js
• apple/pages/special-error/index.html

File has changed

Integration

    - integration/pages/special-error/dist/index.css

• integration/pages/special-error/dist/index.js
• integration/pages/special-error/index.html

File has changed

Windows

    - windows/pages/special-error/dist/index.css

• windows/pages/special-error/dist/index.js
• windows/pages/special-error/index.html

File has changed

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}