MetaMask / MetaMask/metamask-design-system
Epic: Pure Black Theme and Provider
@georgewrmarshall is already working on this.
Since Jul 3, 2026.
- Dominant language
- TypeScript
- Stars
- 37
- Forks
- 14
- Avg merge
- 1d 9h
- Merged PRs (30d)
- 60
Description
### Description
Track implementation of Pure Black Theme and Provider across the MetaMask Design System.
This epic mirrors Jira [TMCU-622](https://consensyssoftware.atlassian.net/browse/TMCU-622).
**Note:** Pure-black scaffolding is temporary until mobile ships to production. After rollout, consolidate into `darkTheme` and remove parallel theme/provider code (see TMCU-987–991).
### Shared constraint (all child issues)
- `isPureBlack=false` uses the existing grey dark theme
- `isPureBlack=true` uses `pureBlackDarkTheme`
### Design system implementation (MMDS)
- [x] #1272 Add `pureBlackDarkTheme` to `@metamask/design-tokens`
- [x] #1273 Add shared pure-black provider contract to `@metamask/design-system-shared`
- [x] #1274 Add pure-black support to `@metamask/design-system-twrnc-preset` ThemeProvider
- [x] #1275 Add `PureBlackProvider` and `usePureBlack` to `@metamask/design-system-react`
- [x] #1276 Adopt pure-black surface elevation behavior in MMDS components
- [x] #1280 Update `ModalContent` for pure-black elevated surface
- [x] #1281 Update `BottomSheetDialog` for pure-black elevated surface
- [ ] #1288 Add design-token shadow utilities to `@metamask/design-system-twrnc-preset`
- [x] #1277 Add pure-black POC to `apps/storybook-react`
- [x] #1278 Add pure-black POC to `apps/storybook-react-native`
- [ ] #1279 Add validation coverage for pure-black theme and provider flow
- [ ] #1357 [TMCU-992] Pre-prod fix: Storybook CSS variable audit for pure-black selectors
- [x] #1356 [TMCU-940] Replace per-callsite elevation hooks with PureBlackProvider (PR #1282)
### Jira mirror — mobile / extension / cleanup
- [ ] #1317 [TMCU-623] Identify components broken by Pure Black color scheme (Audit)
- [x] #1318 [TMCU-624] Implement Pure Black home page background
- [x] #1319 [TMCU-625] Create A/B testing feature flag (Canceled in Jira)
- [x] #1320 [TMCU-635] Move BottomSheet child items to bg-section
- [x] #1321 [TMCU-636] Merge PR #28731 into main
- [ ] #1322 [TMCU-637] Update Swaps Extension client border
- [ ] #1323 [TMCU-638] Trade NavBar + Blue Button needs update
- [x] #1324 [TMCU-639] Legacy toast component audit
- [x] #1325 [TMCU-743] Spike: Feature-flag strategy
- [x] #1326 [TMCU-790] Migrate TouchableOpacity to Pressable (Canceled in Jira)
- [x] #1327 [TMCU-798] DS components: ListItemSelect & TextField collapse
- [x] #1328 [TMCU-799] mobile-core-ux high-traffic surfaces
- [ ] #1329 [TMCU-800] confirmations surfaces
- [ ] #1330 [TMCU-801] engagement GlobalAlert / SimpleNotification
- [x] #1331 [TMCU-802] unowned surfaces: alerts, modals, permission cards
- [ ] #1332 [TMCU-803] accounts-engineers QR / hardware wallet sheets
- [ ] #1333 [TMCU-804] card PIN / KYC / CardWelcome hardcoded colors
- [ ] #1334 [TMCU-805] swaps-engineers SlippageSlider / Bridge / quote skeleton
- [ ] #1335 [TMCU-806] rewards CampaignTile / Dashboard
- [ ] #1336 [TMCU-807] money-movement Ramp deposit / aggregator
- [ ] #1337 [TMCU-808] perps TradingView chart / TPSL overlay
- [ ] #1338 [TMCU-809] predict feed and chart masks
- [ ] #1339 [TMCU-810] earn input surfaces / stablecoin convert RGBA
- [ ] #1340 [TMCU-811] social-ai TraderPriceChart
- [ ] #1341 [TMCU-812] metamask-assets AdvancedChart / PriceChart
- [ ] #1342 [TMCU-821] Remove Pure Black feature flags
- [ ] #1343 [TMCU-982] Update extension background to pure black
- [ ] #1344 [TMCU-983] Update legacy Modal in extension
- [ ] #1345 [TMCU-984] Update legacy BottomSheet in mobile
- [ ] #1346 [TMCU-985] Update Toast in extension
- [ ] #1347 [TMCU-986] Update Toast in mobile
- [ ] #1348 [TMCU-987] Post-prod: fold pureBlackDarkTheme into darkTheme
- [ ] #1349 [TMCU-988] Post-prod: remove PureBlackContext from shared API
- [ ] #1350 [TMCU-989] Post-prod: remove PureBlackProvider from react
- [ ] #1351 [TMCU-990] Post-prod: remove extension preview flag/provider
- [ ] #1352 [TMCU-991] Post-prod: remove mobile feature flag wiring
- [ ] #1353 [TMCU-994] Add funds pay with modal hardcodes bg-default
- [ ] #1354 [TMCU-995] Withdraw fail toast AvatarIcon background
- [ ] #1355 [TMCU-996] Add border-muted to trade menu and modals
### Stack PR
- #1282 Temporary pure-black theme stack for mobile preview
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.