Markdown preview that includes Mermaid diagrams renders the latter in an unreadable fashion when using dark theme

Open

#323,080 opened on Jun 26, 2026 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty: 3/5
Estimated time: 1-2 days
Newbie friendliness: 55/100

Issue type: Bug
Clarity: Mostly clear
Activity status: Quiet
Tech stack: typescript
Domain: frontend, web-dev

Research direction

Start by reproducing the issue with the supplied test.md in VS Code's Markdown preview, using a dark theme and extensions disabled. Trace the Mermaid diagram rendering path and verify the result against the reported expectations: a readable light-mode diagram or colors adapted to the dark background.

Written by the indexing model from the issue text.

Description

Does this issue occur when all extensions are disabled?: Yes

VS Code version: Code 1.126.0 (7e7950df89d055b5a378379db9ee14290772148a, 2026-06-23T01:46:13Z)
OS version: Windows_NT x64 10.0.26200

Steps to Reproduce:

Open a .md file (e.g., test.zip) that includes a Mermaid diagram in VScode configured with a dark theme
run "Markdown: Open Preview to the Side"

The result is some unreadable rendering of the diagram: the background of the diagram is dark grey, and text alongside message arrows is black.

What is expected is one of the following:

The diagram is rendered in "light mode" (with a white background and black text / lines)
The colors for lines, boxes, and text are adapted to the dark background

System Info

Item	Value
CPUs	Intel(R) Core(TM) Ultra 7 265H (16 x 3686)
GPU Status	2d_canvas: enabled GPU0: VENDOR= 0x8086, DEVICE=0x7d51 [Intel(R) Arc(TM) 140T GPU (16GB)], DRIVER_VENDOR=Intel, DRIVER_VERSION=32.0.101.8826 ACTIVE GPU1: VENDOR= 0x1414, DEVICE=0x008c [Microsoft Basic Render Driver], DRIVER_VERSION=10.0.26100.8521 Machine model name: Machine model version: direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_graphite: disabled_off trees_in_viz: disabled_off video_decode: enabled video_encode: enabled webgl: enabled webgpu: enabled webnn: disabled_off
Load (avg)	undefined
Memory (System)	31.46GB (5.02GB free)
Process Argv	--disable-extensions ./test.md --crash-reporter-id 6f4da706-e539-4a92-8ecb-f4982119e154
Screen Reader	no
VM	0%

Extensions disabled

A/B Experiments

vsliv368:30146709
binariesv615:30325510
nativeloc1:31344060
dwcopilot:31170013
dwoutputs:31242946
copilot_t_ci:31333650
e5gg6876:31282496
pythonrdcb7:31342333
6518g693:31463988
aj953862:31281341
6abeh943:31336334
envsdeactivate2:31538737
cloudbuttont:31379625
3efgi100_wstrepl:31403338
ec5jj548:31422691
cp_cls_t_966_ss:31526232
4je02754:31466945
c3h7c220:31478652
ge8j1254_inline_auto_hint_haiku:31490510
38bie571_auto:31478677
cp_cls_c_1081:31454833
conptydll_true:31498968
ia-use-proxy-models-svc:31452481
e9c30283:31461165
test_control1:31471004
c9b86496:31447327
idci7584:31464702
e3e4d672:31494082
ei9d7968:31496641
nes-extended-on:31455476
chat:31457767
8hig5102:31480529
89g7j272:31518289
7e187181:31503455
i2gc6536:31499202
52612955:31516516
ghj88844:31499326
ddid_c:31478207
hmra_i5g22:31518061
7df3h592:31512476
cp_cls_t_1082:31535311
logging_enabled_new:31498466
db5d2638:31499441
jb_cp_cls_t_632:31537244
56dj4588:31512888
32d76977:31512328
ha629193:31508444
cdk-lw-on:31524445
2cfga817_c:31522397
g4a0e106:31529594
41836166:31537719
prpt_ctrl:31518467
jbcp_cls_pctr_t:31531130
61138546:31518536
cp_intellij_c_nes:31533503
gf14b233:31526830
nes-curr-leftover-1500:31538366
h561g132:31533256
session_8:31532895
ihg5j128:31534457

Dominant language: TypeScript
Stars: 193k
Forks: 42.9k
PR merge metrics: PR metrics pending

Contributor guide

Open the contributing guide

First steps

Read the whole issue, then the project's contributing guide.
Comment on the issue to say you are picking it up — it saves two people doing the same work.
Fork the repository and make your change on a branch.
Open a pull request that references the issue number.

Similar issues

[Bug]: Session row status indicator sits flush against the selection pill's rounded corner Open

clawsweeper:fix-shape-clear clawsweeper:queueable-fix clawsweeper:source-repro impact:ux-friction issue-rating: 🦞 diamond lobster no-stale P3

Difficulty 2/5 1-3 hours Newbie friendliness 78/100

openclaw/openclaw#154145 · 2 comments · 1 reaction · Opened Sep 20, 2026
[good first issue] 🀄 Add new Grammar Point 265 (good-first-issue) Open

community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs

Difficulty 1/5 Under an hour Newbie friendliness 76/100

lingdojo/kana-dojo#30632 · 1 comment · 5 reactions · Opened Sep 20, 2026
[Duplicate Code] Repeated filtered model-alias assembly in proxy server Open

code-quality refactoring

Difficulty 2/5 1-3 hours Newbie friendliness 84/100

github/gh-aw-firewall#8816 · Opened Sep 20, 2026
quickjs: support `timeout=None` (no per-call deadline) in `CodeInterpreterMiddleware` Open

integration:quickjs org:external priority:backlog topic:code-interpreter topic:middleware type:feature

Difficulty 2/5 1-3 hours Newbie friendliness 74/100

langchain-ai/deepagents#6450 · Opened Sep 20, 2026
`QuotedTweet.self_thread` is optional in syndication responses Open

Difficulty 1/5 Under an hour Newbie friendliness 88/100

vercel/react-tweet#225 · Opened Sep 20, 2026

More TypeScript issues