modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(readme): use picture element for theme-aware logo (#545)

Browse source 
* fix(readme): use picture element for theme-aware logo

The #gh-light-mode-only / #gh-dark-mode-only URL fragments only work
on github.com. On npm, VS Code preview, and other markdown renderers
both img tags render, showing two stacked logos.

Switch to <picture> with prefers-color-scheme, which GitHub recommends
and which degrades gracefully to a single logo elsewhere.

* ci: add Cloudflare Pages preview for docs PRs

Deploys a per-PR preview of the TypeDoc site to Cloudflare Pages project
mcp-ext-apps-docs-preview when docs, src JSDoc, README, or typedoc config
change. Uses the shared modelcontextprotocol/actions composite action that
injects noindex headers, posts a sticky PR comment with preview URLs, and
cleans up deployments on PR close. Fork PRs are skipped (no secret access).

* fix(docs): sync README logo with TypeDoc theme switcher

The README <picture> logo uses prefers-color-scheme, which only follows
the OS setting. TypeDoc's theme switcher sets data-theme on <html>, so
manually picking Light/Dark would show the wrong logo (e.g. white logo
on light background if OS is dark but user picked Light).

Rewrite the <picture> in the generated docs into two class-tagged <img>s
via the mcpstyle plugin, and hide the inactive one via CSS keyed on both
data-theme (explicit selection) and prefers-color-scheme (OS mode). The
README source is unchanged so GitHub/npm still get <picture>.

Also: prettier normalized mcp-theme.css (tabs to spaces, quote style).
This commit is contained in:
Den Delimarsky 2026-03-10 17:33:40 +00:00 • committed by GitHub
commit a870456893
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 190 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

7
README.md
View file

@ -1,7 +1,10 @@
<!-- LOGO -->
<div align="center">
<img src="media/mcp.svg#gh-light-mode-only" alt="MCP Apps" width="128">
<img src="media/mcp-white.svg#gh-dark-mode-only" alt="MCP Apps" width="128">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="media/mcp-white.svg">
<source media="(prefers-color-scheme: light)" srcset="media/mcp.svg">
<img src="media/mcp.svg" alt="MCP Apps" width="128">
</picture>
<h1>MCP Apps</h1>
<p>
Build interactive UIs for MCP tools — charts, forms, dashboards — that render inline in Claude, ChatGPT and any other compliant chat client.