Skip to content

Commit 2b2e949

Browse files
localdenlocalden
committed
Add custom theme to align with modelcontextprotocol.io styling
- Import Inter and JetBrains Mono fonts (matching MCP site) - Override light mode colors: pure white backgrounds, softer gray borders - Override dark mode colors: match MCP site dark background (#0f1117) - Taller header (3.5rem) with backdrop-blur frosted glass effect - Sidebar: adjusted spacing, font size, and hover/active states - Content: increased line-height (1.6), more heading breathing room - Code blocks: JetBrains Mono, subtle border, more padding - Fix CSS load order: custom.css now loads after theme stylesheets
1 parent d170b55 commit 2b2e949

3 files changed

Lines changed: 165 additions & 2 deletions

File tree

‎docs/mcp-theme.css‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
/*
2+
* MCP Apps custom theme — aligns TypeDoc styling with modelcontextprotocol.io
3+
*/
4+
5+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
6+
7+
/* ------------------------------------------------------------------ */
8+
/* Fonts */
9+
/* ------------------------------------------------------------------ */
10+
11+
:root {
12+
--font-family-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
13+
--font-family-code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
14+
}
15+
16+
body {
17+
font-family: var(--font-family-text);
18+
-webkit-font-smoothing: antialiased;
19+
-moz-osx-font-smoothing: grayscale;
20+
}
21+
22+
/* ------------------------------------------------------------------ */
23+
/* Light mode colors */
24+
/* ------------------------------------------------------------------ */
25+
26+
:root {
27+
--light-color-background: #ffffff;
28+
--light-color-background-secondary: #f9fafb;
29+
--light-color-background-navbar: #ffffff;
30+
--light-color-accent: #e5e7eb;
31+
--light-color-text: #111827;
32+
--light-color-text-aside: #6b7280;
33+
}
34+
35+
/* ------------------------------------------------------------------ */
36+
/* Dark mode colors */
37+
/* ------------------------------------------------------------------ */
38+
39+
:root {
40+
--dark-color-background: #0f1117;
41+
--dark-color-background-secondary: #161b22;
42+
--dark-color-background-navbar: #0f1117;
43+
--dark-color-accent: #30363d;
44+
--dark-color-text: #f0f6fc;
45+
--dark-color-text-aside: #8b949e;
46+
}
47+
48+
/* ------------------------------------------------------------------ */
49+
/* Header — taller, frosted glass */
50+
/* ------------------------------------------------------------------ */
51+
52+
:root {
53+
--dim-toolbar-contents-height: 3.5rem;
54+
}
55+
56+
.tsd-page-toolbar {
57+
backdrop-filter: blur(12px);
58+
-webkit-backdrop-filter: blur(12px);
59+
}
60+
61+
@media (prefers-color-scheme: light) {
62+
.tsd-page-toolbar {
63+
background-color: rgba(255, 255, 255, 0.85);
64+
}
65+
}
66+
67+
@media (prefers-color-scheme: dark) {
68+
.tsd-page-toolbar {
69+
background-color: rgba(15, 17, 23, 0.75);
70+
}
71+
}
72+
73+
:root[data-theme='light'] .tsd-page-toolbar {
74+
background-color: rgba(255, 255, 255, 0.85);
75+
}
76+
77+
:root[data-theme='dark'] .tsd-page-toolbar {
78+
background-color: rgba(15, 17, 23, 0.75);
79+
}
80+
81+
/* ------------------------------------------------------------------ */
82+
/* Sidebar navigation */
83+
/* ------------------------------------------------------------------ */
84+
85+
.tsd-navigation a {
86+
padding: 0.375rem 0.5rem;
87+
font-size: 0.875rem;
88+
line-height: 1.5;
89+
transition: background-color 0.15s ease;
90+
}
91+
92+
.tsd-navigation a:hover:not(.current) {
93+
background-color: color-mix(in srgb, var(--color-text-aside), #0000 92%);
94+
}
95+
96+
.tsd-navigation a.current {
97+
background-color: color-mix(in srgb, var(--color-text-aside), #0000 88%);
98+
font-weight: 500;
99+
}
100+
101+
.site-menu {
102+
padding: 1.25rem 0;
103+
}
104+
105+
/* ------------------------------------------------------------------ */
106+
/* Content area */
107+
/* ------------------------------------------------------------------ */
108+
109+
.tsd-typography {
110+
line-height: 1.6;
111+
}
112+
113+
.tsd-panel.tsd-typography h1 {
114+
margin-top: 0;
115+
padding-bottom: 0.4em;
116+
}
117+
118+
.tsd-panel.tsd-typography h2 {
119+
margin-top: 2rem;
120+
padding-bottom: 0.3em;
121+
}
122+
123+
.tsd-panel.tsd-typography h3 {
124+
margin-top: 1.75rem;
125+
}
126+
127+
/* ------------------------------------------------------------------ */
128+
/* Code blocks */
129+
/* ------------------------------------------------------------------ */
130+
131+
code,
132+
pre {
133+
font-family: var(--font-family-code);
134+
font-size: 0.85em;
135+
}
136+
137+
.tsd-typography pre {
138+
padding: 1rem 1.25rem;
139+
border: 1px solid var(--color-accent);
140+
}
141+
142+
/* Inline code */
143+
.tsd-typography code:not(pre code) {
144+
padding: 0.15em 0.35em;
145+
font-size: 0.875em;
146+
}

‎scripts/typedoc-plugin-seo.mjs‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -168,10 +168,26 @@ export function load(app) {
168168
`<link rel="apple-touch-icon" href="${base}favicons/apple-touch-icon.png" type="image/png" sizes="180x180"/>`,
169169
].join("\n");
170170

171-
// Inject JSON-LD and favicons before </head>
171+
// Move custom.css to load after all theme stylesheets so overrides win the cascade
172+
const customCssLink = page.contents.match(
173+
/<link rel="stylesheet" href="[^"]*custom\.css"\/>/,
174+
);
175+
if (customCssLink) {
176+
page.contents = page.contents.replace(customCssLink[0], "");
177+
}
178+
179+
// Inject favicons, relocated custom CSS, and JSON-LD before </head>
180+
const headInjections = [
181+
faviconTags,
182+
customCssLink ? customCssLink[0] : "",
183+
jsonLdScript,
184+
]
185+
.filter(Boolean)
186+
.join("\n");
187+
172188
page.contents = page.contents.replace(
173189
"</head>",
174-
faviconTags + "\n" + jsonLdScript + "\n</head>",
190+
headInjections + "\n</head>",
175191
);
176192
});
177193

‎typedoc.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const config = {
4545
"https://github.com/modelcontextprotocol/ext-apps/blob/main/specification/2026-01-26/apps.mdx",
4646
},
4747
hostedBaseUrl: "https://apps.extensions.modelcontextprotocol.io/api/",
48+
customCss: "./docs/mcp-theme.css",
4849
out: "docs/api",
4950
plugin: [
5051
"typedoc-github-theme",

0 commit comments

Comments
 (0)