expo / expo/snack

Add support for changing the theme dynamically

Open
#27 0 comments 1 reaction 0 assignees View on GitHub
enhancement website
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.