Skip to content

[DX-1518] feat: dark mode for /examples (Sandpack previews)#3473

Open
jamiehenson wants to merge 2 commits into
mainfrom
examples-dark-mode
Open

[DX-1518] feat: dark mode for /examples (Sandpack previews)#3473
jamiehenson wants to merge 2 commits into
mainfrom
examples-dark-mode

Conversation

@jamiehenson

@jamiehenson jamiehenson commented Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Dark mode for /examples (Sandpack previews)

Extends the site-wide dark mode (#3466, now merged) to the /examples pages. The runnable examples are small Vite subprojects surfaced through Sandpack; until now they were light-only regardless of the docs theme. This makes each preview follow the docs theme and gives every example underlying dark-mode styling.

How it works

Preview theming — bake the theme in, reload on change (src/components/Examples/sandpackThemeSync.ts + ExamplesRenderer)

The examples run in a cross-origin Sandpack iframe, so the docs page can't restyle them directly. Rather than live cross-iframe messaging (an earlier attempt that proved timing-sensitive and flaky), the theme is baked into each example's files:

  • A hidden module injected into every example adds .dark and sets Tailwind darkMode:'class', and the <head> paints the dark canvas from the first frame (background + color-scheme) so there's no white flash before the bundle runs.
  • The files are regenerated per theme and the SandpackProvider is keyed on the resolved theme, so a theme change fully reloads the preview on a fresh iframe. A full reload (not an in-place hot reload) tears down the example's side effects — e.g. its Ably connection — rather than stacking a second instance on each toggle. Trade-off: a short reload when the theme changes.
  • The Sandpack preview container gets a dark background in dark mode (no white frame around the example).
  • One shared fix: the examples' --primary token is identical in light and dark, so uk-text-primary (body text) would stay low-contrast on dark — remapped to --foreground in dark via a single injected rule.

Example styling — all 49 variants (React + JavaScript)

  • Hardcoded light Tailwind utilities gain dark: counterparts (default grays); custom CSS gets .dark-scoped overrides via the shadcn CSS-variable blocks the examples already ship.
  • Covers both static markup (.tsx/.html/.css) and the dynamically-rendered markup in .ts files (e.g. the annotations components, presence/spaces scripts).
  • Semantic and per-user colours are preserved — status dots, toasts, avatar/cursor colours, annotation-type badge hues. pub-sub-live-voting (its own token set, not shadcn) got a dedicated .dark token block.

Docs-side — the example-page README renderer table chrome (examples.tsx) gained dark: variants.

Verification (review app)

The Sandpack preview only renders behind a logged-in API key, so it can't be verified locally — it needs a deployed, signed-in build (the review-app label is applied). Confirmed live on the review app:

  • Previews render in the docs theme with the dark canvas (no white container).
  • Toggling System / Dark / Light reloads the previews into the matching theme, both directions, no manual refresh.
  • A full reload on toggle (rather than a hot reload) — so no duplicate example instances / stacked presence members.

The latest first-frame-dark and full-reload fixes are deployed for a final pass. yarn lint clean; 196 unit tests pass.

Notes / follow-ups

  • React previews may still show a brief white frame during the raw bundle fetch on a language switch (Sandpack serves its own template HTML there, which the injected <head> can't reach); JS previews paint dark from the first frame.
  • A few card/row surfaces use dark:bg-gray-900 on a dark:bg-gray-900 parent and can blend; easy to bump to gray-800 where noticed.
  • The injected theme module import is visible at the top of the shown entry file, and the darkMode config in index.html — minor infra visible in the example code readers copy.
  • Pre-existing text-grey-500 (British spelling — not a real Tailwind class, no-op) left as-is in a couple of chat examples.

Testing

Add/keep the review-app label for a deployment, then sign in, open a few example pages across product families, and toggle System / Dark / Light in the footer.

🤖 Generated with Claude Code

@jamiehenson jamiehenson added the review-app Create a Heroku review app label Jul 17, 2026
@coderabbitai

coderabbitai Bot commented Jul 17, 2026 •
edited
Loading

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 8c064b09-3642-46ed-841a-591bd5f85f3e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch examples-dark-mode

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@ably-ci
ably-ci temporarily deployed to ably-docs-examples-dark-wnwuod July 17, 2026 09:53 Inactive
@ably-ci
ably-ci temporarily deployed to ably-docs-examples-dark-wnwuod July 17, 2026 10:15 Inactive
@ably-ci
ably-ci temporarily deployed to ably-docs-examples-dark-wnwuod July 17, 2026 10:26 Inactive
@ably-ci
ably-ci temporarily deployed to ably-docs-examples-dark-wnwuod July 17, 2026 11:12 Inactive
@ably-ci
ably-ci temporarily deployed to ably-docs-examples-dark-wnwuod July 17, 2026 11:33 Inactive
@ably-ci
ably-ci temporarily deployed to ably-docs-examples-dark-wnwuod July 17, 2026 11:42 Inactive
@ably-ci
ably-ci temporarily deployed to ably-docs-examples-dark-wnwuod July 17, 2026 12:02 Inactive
@ably-ci
ably-ci temporarily deployed to ably-docs-examples-dark-wnwuod July 17, 2026 12:28 Inactive
@ably-ci
ably-ci temporarily deployed to ably-docs-examples-dark-wnwuod July 17, 2026 12:29 Inactive
@jamiehenson jamiehenson changed the title feat: dark mode for /examples (Sandpack previews) [DX-1518] feat: dark mode for /examples (Sandpack previews) Jul 17, 2026
jamiehenson and others added 2 commits July 17, 2026 13:42
@jamiehenson @claude
feat(examples): add dark-mode styling to the example subprojects
5168e7b 
Convert every example variant (React + JavaScript, static markup and the
dynamically-rendered .ts/.tsx markup) to render correctly in dark: hardcoded
light Tailwind utilities gain `dark:` counterparts and custom CSS gets
`.dark`-scoped overrides via the shadcn vars the examples already ship.
Semantic and per-user colours (status dots, avatars, cursors, badge hues) are
preserved.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@jamiehenson @claude
feat(examples): follow the docs theme in Sandpack example previews
eeb928b 
Make the runnable /examples previews (Vite subprojects surfaced via Sandpack)
track the docs light/dark theme:
- Inject a hidden module into each example that bakes in the current theme
  (adds `.dark`, sets Tailwind darkMode:'class'); the files are regenerated per
  theme, so a theme change reloads the preview to match — no fragile
  cross-iframe messaging.
- Key the SandpackProvider on the resolved theme so a change fully reloads the
  preview on a fresh iframe, rather than a hot reload that stacks extra example
  instances.
- Paint the preview on the dark canvas from the first frame (head-injected
  background + color-scheme) and give the Sandpack preview container a dark
  background, so there's no white flash on load or language switch.
- Dark variants for the example-page README tables.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@jamiehenson
jamiehenson requested review from a team and AndyTWF and removed request for a team July 17, 2026 12:43
AndyTWF
AndyTWF reviewed Jul 17, 2026
View reviewed changes

@AndyTWF AndyTWF left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The colours seem fine, but looks like a few examples have lost their overall structure

Comment thread examples/ai-transport-message-per-response/javascript/index.html
<button
id="prompt-button"
class="px-3 py-2 text-sm border rounded-md transition-colors bg-white hover:bg-blue-50 border-gray-300 hover:border-blue-300 cursor-pointer"
class="px-3 py-2 text-sm border rounded-md transition-colors bg-white dark:bg-gray-900 hover:bg-blue-50 dark:hover:bg-blue-950 border-gray-300 dark:border-gray-700 hover:border-blue-300 dark:hover:border-blue-700 cursor-pointer"

@AndyTWF AndyTWF Jul 17, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This example looks... wrong on the demo site compared to prod. I can't see any buttons and it appears to have lost its structure?

@jamiehenson jamiehenson Jul 17, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Believable, I haven't scrutinised this. Will tell the bot to do better.

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

Reviewers

@AndyTWF AndyTWF AndyTWF left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

review-app Create a Heroku review app

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@jamiehenson @AndyTWF @ably-ci