fix(readme): use picture element for theme-aware logo (#545)
* 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
GitHub
parent
a2d2d8c6d0
commit
a870456893
1 changed files with 190 additions and 81 deletions
|
|
@ -2,21 +2,23 @@
|
|||
* MCP Apps custom theme — aligns TypeDoc styling with modelcontextprotocol.io
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Fonts */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
:root {
|
||||
--font-family-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--font-family-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
--font-family-text:
|
||||
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
--font-family-code:
|
||||
"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: var(--font-family-text);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
|
@ -24,12 +26,12 @@ body {
|
|||
/* ------------------------------------------------------------------ */
|
||||
|
||||
:root {
|
||||
--light-color-background: #ffffff;
|
||||
--light-color-background-secondary: #f9fafb;
|
||||
--light-color-background-navbar: #ffffff;
|
||||
--light-color-accent: #e5e7eb;
|
||||
--light-color-text: #111827;
|
||||
--light-color-text-aside: #6b7280;
|
||||
--light-color-background: #ffffff;
|
||||
--light-color-background-secondary: #f9fafb;
|
||||
--light-color-background-navbar: #ffffff;
|
||||
--light-color-accent: #e5e7eb;
|
||||
--light-color-text: #111827;
|
||||
--light-color-text-aside: #6b7280;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
|
@ -37,12 +39,12 @@ body {
|
|||
/* ------------------------------------------------------------------ */
|
||||
|
||||
:root {
|
||||
--dark-color-background: #0f1117;
|
||||
--dark-color-background-secondary: #161b22;
|
||||
--dark-color-background-navbar: #0f1117;
|
||||
--dark-color-accent: #30363d;
|
||||
--dark-color-text: #f0f6fc;
|
||||
--dark-color-text-aside: #8b949e;
|
||||
--dark-color-background: #0f1117;
|
||||
--dark-color-background-secondary: #161b22;
|
||||
--dark-color-background-navbar: #0f1117;
|
||||
--dark-color-accent: #30363d;
|
||||
--dark-color-text: #f0f6fc;
|
||||
--dark-color-text-aside: #8b949e;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
|
@ -50,32 +52,55 @@ body {
|
|||
/* ------------------------------------------------------------------ */
|
||||
|
||||
:root {
|
||||
--dim-toolbar-contents-height: 3.5rem;
|
||||
--dim-toolbar-contents-height: 3.5rem;
|
||||
}
|
||||
|
||||
.tsd-page-toolbar {
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
.tsd-page-toolbar {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
.tsd-page-toolbar {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.tsd-page-toolbar {
|
||||
background-color: rgba(15, 17, 23, 0.75);
|
||||
}
|
||||
.tsd-page-toolbar {
|
||||
background-color: rgba(15, 17, 23, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme='light'] .tsd-page-toolbar {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
:root[data-theme="light"] .tsd-page-toolbar {
|
||||
background-color: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .tsd-page-toolbar {
|
||||
background-color: rgba(15, 17, 23, 0.75);
|
||||
:root[data-theme="dark"] .tsd-page-toolbar {
|
||||
background-color: rgba(15, 17, 23, 0.75);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Theme-aware logo (rewritten from README <picture> by mcpstyle plugin) */
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
||||
/* Explicit theme selection via TypeDoc switcher — takes precedence */
|
||||
:root[data-theme="light"] .mcp-logo-dark,
|
||||
:root[data-theme="dark"] .mcp-logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* "OS" mode (data-theme='os') follows prefers-color-scheme */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root[data-theme="os"] .mcp-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root[data-theme="os"] .mcp-logo-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
|
@ -83,66 +108,68 @@ body {
|
|||
/* ------------------------------------------------------------------ */
|
||||
|
||||
.tsd-navigation a {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.75rem;
|
||||
color: var(--color-text-aside);
|
||||
transition: background-color 0.15s ease, color 0.15s ease;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
border-radius: 0.75rem;
|
||||
color: var(--color-text-aside);
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
|
||||
.tsd-navigation a:hover:not(.current) {
|
||||
background-color: rgba(107, 114, 128, 0.05);
|
||||
color: var(--color-text);
|
||||
background-color: rgba(107, 114, 128, 0.05);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.tsd-navigation a.current {
|
||||
background-color: rgba(107, 114, 128, 0.15);
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
background-color: rgba(107, 114, 128, 0.15);
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Group headers (Documents, Security, API Documentation) */
|
||||
.tsd-accordion-summary > h3 {
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.01em;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.site-menu {
|
||||
padding: 1.25rem 0;
|
||||
padding: 1.25rem 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.tsd-navigation a {
|
||||
color: var(--color-text-aside);
|
||||
}
|
||||
.tsd-navigation a {
|
||||
color: var(--color-text-aside);
|
||||
}
|
||||
|
||||
.tsd-navigation a:hover:not(.current) {
|
||||
background-color: rgba(229, 231, 235, 0.05);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.tsd-navigation a:hover:not(.current) {
|
||||
background-color: rgba(229, 231, 235, 0.05);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.tsd-navigation a.current {
|
||||
background-color: rgba(229, 231, 235, 0.15);
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
.tsd-navigation a.current {
|
||||
background-color: rgba(229, 231, 235, 0.15);
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .tsd-navigation a {
|
||||
color: var(--color-text-aside);
|
||||
:root[data-theme="dark"] .tsd-navigation a {
|
||||
color: var(--color-text-aside);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .tsd-navigation a:hover:not(.current) {
|
||||
background-color: rgba(229, 231, 235, 0.05);
|
||||
color: var(--color-text);
|
||||
:root[data-theme="dark"] .tsd-navigation a:hover:not(.current) {
|
||||
background-color: rgba(229, 231, 235, 0.05);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] .tsd-navigation a.current {
|
||||
background-color: rgba(229, 231, 235, 0.15);
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
:root[data-theme="dark"] .tsd-navigation a.current {
|
||||
background-color: rgba(229, 231, 235, 0.15);
|
||||
color: var(--color-text);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
|
@ -150,21 +177,21 @@ body {
|
|||
/* ------------------------------------------------------------------ */
|
||||
|
||||
.tsd-typography {
|
||||
line-height: 1.6;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tsd-panel.tsd-typography h1 {
|
||||
margin-top: 0;
|
||||
padding-bottom: 0.4em;
|
||||
margin-top: 0;
|
||||
padding-bottom: 0.4em;
|
||||
}
|
||||
|
||||
.tsd-panel.tsd-typography h2 {
|
||||
margin-top: 2rem;
|
||||
padding-bottom: 0.3em;
|
||||
margin-top: 2rem;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
|
||||
.tsd-panel.tsd-typography h3 {
|
||||
margin-top: 1.75rem;
|
||||
margin-top: 1.75rem;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
|
|
@ -173,17 +200,17 @@ body {
|
|||
|
||||
code,
|
||||
pre {
|
||||
font-family: var(--font-family-code);
|
||||
font-size: 1em;
|
||||
font-family: var(--font-family-code);
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.tsd-typography pre {
|
||||
padding: 1rem 1.25rem;
|
||||
border: 1px solid var(--color-accent);
|
||||
padding: 1rem 1.25rem;
|
||||
border: 1px solid var(--color-accent);
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
.tsd-typography code:not(pre code) {
|
||||
padding: 0.15em 0.35em;
|
||||
font-size: 1em;
|
||||
padding: 0.15em 0.35em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue