feat(settings): put Vijay's dark mode behind feature flag

[MagentaManifold]

Because

• we want to put dark mode on stage

This Pull Request

• Rebases Vijay's dark mode branch onto latest main and put it behind the feature flag.
• enables theme selection in storybook

Issue that this pull request solves

Closes: FXA-13026 FXA-13027

Checklist

Put an x in the boxes that apply

• My commit is GPG signed.
• If applicable, I have modified or added tests which pass locally.
• I have added necessary documentation (if appropriate).
• I have verified that my changes render correctly in RTL (if appropriate).

Screenshots (Optional)

Please attach the screenshots of the changes made in case of change in user interface.

Other information (Optional)

Any other information that is important to this pull request.

[MagentaManifold]

Based on #20179, which needs to be merged first

[Copilot]

Pull request overview

This PR rebases and integrates dark mode across FxA Settings (and some content-server UI) while gating user-facing theme switching behind a new darkMode.enabled feature flag, and adds a Storybook toolbar for theme selection.

Changes:

• Add theme persistence + resolution (ThemeContext, theme-storage) and wire ThemeProvider into the app.
• Add a footer theme selector (DarkModeToggle) and gate it via config.darkMode.enabled.
• Extend Tailwind/CSS styles and a few assets to support dark: variants; add Storybook theme toolbar support.

Reviewed changes

Copilot reviewed 52 out of 53 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
packages/fxa-settings/src/styles/unit-row.css	Add dark-mode border color for unit row divider.
packages/fxa-settings/src/styles/tailwind.css	Add dark-mode body/nav/progress styling.
packages/fxa-settings/src/styles/switch.css	Add dark-mode borders/backgrounds for switch states.
packages/fxa-settings/src/styles/drop-down-menu.css	Add dark-mode dropdown styling + caret coloring.
packages/fxa-settings/src/pages/Signin/SigninPasskeyFallback/snapshots/index.test.tsx.snap	Snapshot updates for new dark-mode classes/footer markup.
packages/fxa-settings/src/models/index.ts	Re-export ThemeContext.
packages/fxa-settings/src/models/contexts/ThemeContext.tsx	New theme context/provider applying dark class and tracking preference.
packages/fxa-settings/src/models/contexts/ThemeContext.test.tsx	Unit tests for theme provider behavior.
packages/fxa-settings/src/lib/theme-storage.ts	New localStorage-backed theme preference helpers.
packages/fxa-settings/src/lib/config.ts	Add darkMode.enabled config flag with default false.
packages/fxa-settings/src/components/Settings/SettingsLayout/index.tsx	Pass dark-mode toggle props into shared Footer.
packages/fxa-settings/src/components/Settings/Security/index.tsx	Add dark-mode background class to card.
packages/fxa-settings/src/components/Settings/Profile/index.tsx	Add dark-mode background class to card.
packages/fxa-settings/src/components/Settings/ProductPromo/index.tsx	Update promo card for dark mode + SVG component usage.
packages/fxa-settings/src/components/Settings/Modal/index.tsx	Add dark-mode background for modal container.
packages/fxa-settings/src/components/Settings/LinkedAccounts/index.tsx	Add dark-mode background class to card.
packages/fxa-settings/src/components/Settings/HeaderLockup/index.tsx	Add dark-mode hover and icon colors.
packages/fxa-settings/src/components/Settings/FlowContainer/index.tsx	Add dark-mode background to flow container.
packages/fxa-settings/src/components/Settings/DataCollection/index.tsx	Add dark-mode background class to card.
packages/fxa-settings/src/components/Settings/ConnectedServices/index.tsx	Add dark-mode background class to card.
packages/fxa-settings/src/components/Settings/ConnectedServices/Service.tsx	Add dark-mode icon/border colors for service cards.
packages/fxa-settings/src/components/Settings/BentoMenu/index.tsx	Add dark-mode styling and icon inversion support.
packages/fxa-settings/src/components/PromotionBanner/index.tsx	Add dark-mode close icon color.
packages/fxa-settings/src/components/InputText/index.tsx	Add dark-mode styling for input container/label/input.
packages/fxa-settings/src/components/InputText/snapshots/index.test.tsx.snap	Snapshot updates for new dark-mode classes.
packages/fxa-settings/src/components/InputPassword/eye-open.svg	Switch SVG fill to currentColor for theming.
packages/fxa-settings/src/components/DarkModeToggle/index.tsx	New theme selection dropdown component.
packages/fxa-settings/src/components/DarkModeToggle/index.test.tsx	Unit tests for DarkModeToggle.
packages/fxa-settings/src/components/DarkModeToggle/index.stories.tsx	Storybook story for DarkModeToggle.
packages/fxa-settings/src/components/DarkModeToggle/en.ftl	Fluent strings for dark mode toggle.
packages/fxa-settings/src/components/AppLayout/index.tsx	Add dark-mode styling and render dark-mode toggle in footer.
packages/fxa-settings/src/components/AppLayout/snapshots/index.test.tsx.snap	Snapshot updates for dark-mode classes.
packages/fxa-settings/src/components/App/index.tsx	Wrap app in ThemeProvider keyed off config.darkMode.enabled.
packages/fxa-settings/.storybook/preview.js	Add Storybook toolbar + decorator to sync theme preference.
packages/fxa-settings/.storybook/main.js	Add @storybook/addon-toolbars.
packages/fxa-react/styles/inputs.css	Add dark-mode variants for radio input styles.
packages/fxa-react/styles/flows.css	Add dark-mode background for .card.
packages/fxa-react/styles/ctas.css	Add dark-mode variants for neutral CTA states.
packages/fxa-react/configs/tailwind.js	Enable Tailwind class-based dark mode (darkMode: 'class').
packages/fxa-react/configs/storybooks.js	Adjust TS Babel preset config (JSX runtime automatic).
packages/fxa-react/components/LoadingSpinner/index.tsx	Add dark-mode full-screen background color.
packages/fxa-react/components/Header/index.tsx	Add dark-mode header background.
packages/fxa-react/components/Footer/index.tsx	Add dark-mode styling + dark-mode toggle slot/props.
packages/fxa-content-server/server/lib/routes/react-app/route-definition-index.js	Expose darkMode.enabled to the React app config payload.
packages/fxa-content-server/server/lib/configuration.js	Add convict config for DARK_MODE_ENABLED.
packages/fxa-content-server/server/lib/beta-settings.js	Include darkMode.enabled in beta settings config response.
packages/fxa-content-server/server/config/local.json-dist	Enable dark mode by default for local config template.
packages/fxa-content-server/app/styles/tailwind/state.css	Add dark-mode variants to state info styles.
packages/fxa-content-server/app/styles/tailwind.css	Add dark-mode body colors.
packages/fxa-content-server/app/scripts/templates/pair/unsupported.mustache	Add dark-mode background for warning callouts.
packages/fxa-content-server/app/scripts/templates/pair/index.mustache	Add dark-mode text/hover/active classes.
packages/fxa-content-server/app/scripts/head/startup-styles.js	Add early dark class application to avoid flicker.
libs/shared/assets/src/styles/flows.css	Add dark-mode background for shared .card.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.