Skip to content

fix(markdown): preserve code backgrounds across theme changes - #1060

Open
xuzijian2019 wants to merge 1 commit into
agegr:mainfrom
xuzijian2019:fix/code-block-theme-background
Open

xuzijian2019 wants to merge 1 commit into
agegr:mainfrom
xuzijian2019:fix/code-block-theme-background

Conversation

@xuzijian2019

Copy link
Copy Markdown

Summary

Fix code-fence and Mermaid-source backgrounds being reset after a theme change.

Prism's vs pre style uses backgroundColor, while vscDarkPlus uses background. Combining either with the component's constant customStyle.background makes React's style diff remove/update a competing property. On main (6fcd7d4), light → dark clears the intended background to transparent; switching back applies Prism's white background rather than the app color mix. React reports the shorthand/longhand conflict.

  • Let the component own the pre's backgroundColor for highlighted and streaming code.
  • Copy the dark pre theme and remove its background shorthand, without mutating the imported Prism theme.
  • Add a static-render regression and real browser theme round trips for ordinary code and Mermaid source.

Refs xuzijian2019/pi-agent-desktop#8

Verification

  • npm test: 2,284 passed, 0 failed.
  • tsc --noEmit: passed.
  • npm run lint: passed.
  • Full npm run test:e2e (dev mode): passed, including new light/dark round trips at 1280px and 390px.
  • Additional isolated browser reproduction/fix checks at 1280×800, 390×844 and 390×480; after the fix the computed backgrounds equal the intended color mix and no style-conflict warning is emitted.

No product CSS/theme redesign, SDK policy changes or fork UI dependencies. No inference requests used in verification. Browser verification used Chromium on macOS, not real mobile hardware.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant