fix: critical error message visibility bug in dark mode

[georgewrmarshall]

Description

This PR fixes critical error message visibility in dark mode. Previously, error messages used a hardcoded color value that didn't respect theme preferences.

The improvement changes the color property to inherit in the critical error component, ensuring proper color inheritance from the parent theme based on the user's prefers-color-scheme setting.

Related issues

Fixes: #30569

Manual testing steps

1. Open app/scripts/ui.js
2. Locate the initializeUiWithTab function
3. Throw an error

   // To test critical error display, uncomment the next line:
   throw new Error('Test Critical Error');

4. Enable dark mode in your system preferences or via dev tools (see recording)
5. Verify error message text properly inherits dark theme colors
6. Switch to light mode and verify error message remains visible

Screenshots/Recordings

Before

before720.mov

After

after720.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I've included tests if applicable
• I've documented my code using JSDoc format if applicable
• I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [1009e63]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1845 ± 78 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	336	2290	1774	369	177
		domContentLoaded	1612	2196	1815	140	67
		load	1620	2282	1845	162	78
		domInteractive	27	94	44	20	10
		backgroundConnect	10	83	34	28	13
		firstReactRender	16	76	36	22	10
		getState	5	68	18	18	8
		initialActions	0	1	0	0	0
		loadScripts	1171	1693	1353	136	65
		setupStore	8	62	22	21	10
		uiStartup	1806	2589	2111	170	82

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)