Skip to content

fix: follow DSH shell dark theme for code blocks and Mermaid - #1

Merged
zerob13 merged 1 commit into
zerob13:masterfrom
thaning0:fix/isdark-follow-dsh-theme
Aug 17, 2026
Merged

zerob13 merged 1 commit into
zerob13:masterfrom
thaning0:fix/isdark-follow-dsh-theme

Conversation

@thaning0

Copy link
Copy Markdown
Contributor

Problem

MarkstreamMarkdown never passed isDark to MarkdownRender, so markstream fell back to its light theme regardless of the page appearance. In a dark-themed DSH web profile:

  • Shiki code blocks rendered with a white background and light-theme token colors on a dark page
  • Mermaid diagrams used light-theme SVG colors inside a white panel while the rest of the chat was dark

Fix

Adds useDshIsDark() in src/client/renderer.tsx:

  1. Primary signal: luminance of the computed --dsw-alias-bg-base token (threshold 140/255). This is always fresh and independent of how DSH's theme system applies tokens.
  2. Fallbacks: the data-ds-dark-theme attribute on <body>, then OS preference via prefers-color-scheme.
  3. Live reactivity: a debounced (80 ms) MutationObserver on <html>/<body> (data-ds-dark-theme and style attributes) re-renders when the user switches themes without reloading.

The resolved value is passed as isDark to MarkdownRender, which propagates it to Shiki code blocks, the Mermaid renderer (dark SVG theme), math containers, and the root .markstream-react.dark CSS class.

Verification

  • New vitest case: renders with data-ds-dark-theme set → asserts .markstream-react.dark; removes the attribute → asserts the dark class goes away via the observer path. All 6 tests pass (pnpm run check).
  • Manually verified in a DSH 0.1.0-rc.6 web profile: patched bundle served from /plugins/dsh-better-markdown/client.js; code blocks and Mermaid follow the dark page, and theme switches apply live without reload.

Notes

  • No new dependencies; no API changes.
  • If upstream prefers a dedicated src/client/dsh-theme.ts module or an explicit isDark prop on MarkstreamMarkdown, happy to restructure.

MarkstreamMarkdown never passed isDark to MarkdownRender, so markstream
defaulted to its light theme regardless of the page appearance: Shiki
code blocks rendered with a white background on dark pages and Mermaid
diagrams used light-theme colors.

Add useDshIsDark(), which resolves the shell's current color scheme via
the computed --dsw-alias-bg-base token luminance (fallbacks: the
data-ds-dark-theme attribute, then prefers-color-scheme) and re-renders
on theme switches through a debounced MutationObserver.

Verified in DSH 0.1.0-rc.6 web profile with a patched bundle before
upstreaming.
@coderabbitai

coderabbitai Bot commented Aug 16, 2026

Copy link
Copy Markdown

Important

Review available on request

  • 🔍 Trigger review

Reviews should be triggered manually for repositories with fewer than 10 stars. Select Trigger review above or comment @coderabbitai review to review the latest changes. For a full review, comment @coderabbitai full review.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5c1ce786-8c8e-4a32-b721-a3aeb5649bfe


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.

@zerob13

zerob13 commented Aug 17, 2026

Copy link
Copy Markdown
Owner

LGTM

@zerob13
zerob13 merged commit df58fb0 into zerob13:master Aug 17, 2026
2 checks passed
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.

2 participants