Add support for changing the theme dynamically
- Dominant language
- TypeScript
- Stars
- 510
- Forks
- 178
- Avg merge
- 5h 7m
- Merged PRs (30d)
- 5
Description
As per request via @brentvatne from the react-native website team, updating to docsaurus 2
> heya! some folks are working on rewriting the react native website on top of docusaurus 2 and part of that involves supporting light/dark mode. they're wanting a way to sync the theme on snack embeds with the site theme. i looked into this a bit and it seems like right now we only offer a way to set the theme once when initialized, via data-snack-theme.
i looked into using postMessage, eg: document.querySelector('iframe').contentWindow.postMessage(['expoDataEvent', { iframeId: '5kaybrx1d4', theme: 'dark' }], '*') - but it doesn't update the theme (maybe i'm doing this wrong? i extracted the iframe id from the target iframe src).
any suggestions on how they should proceed with this task of keeping snack embed theme in sync with the docusaurus theme?
Contributor guide
Research direction
Start by reproducing the existing data-snack-theme initialization and the proposed postMessage call against a Snack iframe. Trace how the iframe receives its initial theme and determine the supported message entry point. Done means an embedded Snack can update between light and dark themes after initialization and remains synchronized with the host site.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100