Add first-class dark mode with token hardening and plugin iframe theme sync (resolves #157)

[Ayuxh-Pratap]

resolves #157

Requirements for a pull request

• Unit tests related to the change have been updated
• Documentation related to the change has been updated

Description of the Change

This PR implements dark mode in a phased, production-safe way across host UI and plugin iframes.

1. Theme foundation

   • Added theme runtime state (light | dark) with persistence (localStorage key: mf-theme).
   • Added pre-mount hydration in src/index.tsx to prevent initial light flash.
   • Added theme toggle in Help menu.
   • Added dark token scope via [data-theme='dark'].

2. Token hardening

   • Replaced hardcoded colors in high-visibility components with semantic tokens:
     • Modal, Tooltip, DAGContent, RenderMetadata, TimelineRow/LineElement, PluginGroup.
   • Added new semantic tokens for modal/tooltip/DAG/metadata/shimmer surfaces and dark overrides.

3. Plugin theme synchronization

   • Added host-to-plugin theme broadcast (MF_THEME_CHANGE).
   • Added deterministic plugin iframe selector (data-mf-plugin).
   • Injected plugin bootstrap listener to apply initial theme and stay synced on runtime changes.
   • Extended ReadyToRender.settings with theme (in addition to timezone).

Alternate Designs

• Styled-components ThemeProvider object migration was considered but not chosen.
  • Reason: current codebase is already CSS-variable-first, so data-theme + token overrides is lower-risk and lower-churn.
• Wildcard postMessage targetOrigin was considered but not used as primary path.
  • Reason: this PR resolves target origin from iframe src when available, with safe fallback.

Possible Drawbacks

• Some visual surfaces may need follow-up token tuning (especially DAG foreach tint/shimmer contrast) after broader UX review.
• Plugin theme sync relies on postMessage contract and iframe bootstrap script; third-party plugins with strict assumptions may need adaptation.
• Unit tests were not added in this PR; current validation is build + manual verification.

Verification Process

• Ran lint checks on modified files (ReadLints) and fixed formatting/import-order issues.
• Ran production build after each major phase:
  • yarn build
  • Result: compiled successfully.
• Manual verification checklist:
  • Toggle theme from Help menu and confirm immediate host UI update.
  • Reload page and confirm persisted theme is applied on first paint (no flash).
  • Verify key hardened surfaces in dark mode:
    • Tooltip panel and arrow
    • Modal backdrop and content contrast
    • DAG nodes/containers/icons
    • Metadata markdown tables
    • Timeline refining shimmer
    • Plugin header icon color
  • Verify plugin iframes receive and apply theme updates on toggle.

Release Notes

Added first-class dark mode support with persisted theme preference, tokenized UI styling for core views, and plugin iframe theme synchronization.