From 35781865af82ffc4360876b08a132fc1fbbee310 Mon Sep 17 00:00:00 2001
From: martinalong <martina@anthropic.com>
Date: Fri, 12 Dec 2025 20:07:40 -0800
Subject: [PATCH] Add color-scheme meta tag to all example apps
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prevents iframe from automatically applying a default background color.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 examples/basic-host/index.html                     | 1 +
 examples/basic-host/sandbox.html                   | 1 +
 examples/basic-server-react/mcp-app.html           | 1 +
 examples/basic-server-vanillajs/mcp-app.html       | 1 +
 examples/budget-allocator-server/mcp-app.html      | 1 +
 examples/cohort-heatmap-server/mcp-app.html        | 1 +
 examples/customer-segmentation-server/mcp-app.html | 1 +
 examples/qr-server/widget.html                     | 1 +
 examples/scenario-modeler-server/mcp-app.html      | 1 +
 examples/system-monitor-server/mcp-app.html        | 1 +
 examples/threejs-server/mcp-app.html               | 1 +
 examples/wiki-explorer-server/mcp-app.html         | 1 +
 12 files changed, 12 insertions(+)

diff --git a/examples/basic-host/index.html b/examples/basic-host/index.html
index b865ebe..68e8109 100644
--- a/examples/basic-host/index.html
+++ b/examples/basic-host/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="color-scheme" content="light dark">
     <title>MCP Apps Host</title>
     <link rel="stylesheet" href="/src/global.css">
   </head>
diff --git a/examples/basic-host/sandbox.html b/examples/basic-host/sandbox.html
index 3714e29..b868e58 100644
--- a/examples/basic-host/sandbox.html
+++ b/examples/basic-host/sandbox.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="color-scheme" content="light dark">
     <!-- CSP is set by serve.ts HTTP header - no meta tag needed here
          The inner iframe's CSP is dynamically injected based on resource metadata -->
     <title>MCP-UI Proxy</title>
diff --git a/examples/basic-server-react/mcp-app.html b/examples/basic-server-react/mcp-app.html
index 771b73e..205ff4e 100644
--- a/examples/basic-server-react/mcp-app.html
+++ b/examples/basic-server-react/mcp-app.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
   <title>Get Time App</title>
   <link rel="stylesheet" href="/src/global.css">
 </head>
diff --git a/examples/basic-server-vanillajs/mcp-app.html b/examples/basic-server-vanillajs/mcp-app.html
index 1a88d60..5b64280 100644
--- a/examples/basic-server-vanillajs/mcp-app.html
+++ b/examples/basic-server-vanillajs/mcp-app.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
   <title>Get Time App</title>
 </head>
 <body>
diff --git a/examples/budget-allocator-server/mcp-app.html b/examples/budget-allocator-server/mcp-app.html
index e57c137..d8724f4 100644
--- a/examples/budget-allocator-server/mcp-app.html
+++ b/examples/budget-allocator-server/mcp-app.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
   <title>Budget Allocator</title>
 </head>
 <body>
diff --git a/examples/cohort-heatmap-server/mcp-app.html b/examples/cohort-heatmap-server/mcp-app.html
index 2b1a47d..c9202a1 100644
--- a/examples/cohort-heatmap-server/mcp-app.html
+++ b/examples/cohort-heatmap-server/mcp-app.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
   <title>Cohort Retention Heatmap</title>
   <link rel="stylesheet" href="/src/global.css">
 </head>
diff --git a/examples/customer-segmentation-server/mcp-app.html b/examples/customer-segmentation-server/mcp-app.html
index 10e584d..33a684a 100644
--- a/examples/customer-segmentation-server/mcp-app.html
+++ b/examples/customer-segmentation-server/mcp-app.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
   <title>Customer Segmentation Explorer</title>
 </head>
 <body>
diff --git a/examples/qr-server/widget.html b/examples/qr-server/widget.html
index 3c0be72..e2ff4cb 100644
--- a/examples/qr-server/widget.html
+++ b/examples/qr-server/widget.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta name="color-scheme" content="light dark">
   <style>
     html, body {
       margin: 0;
diff --git a/examples/scenario-modeler-server/mcp-app.html b/examples/scenario-modeler-server/mcp-app.html
index 60de710..ba12d46 100644
--- a/examples/scenario-modeler-server/mcp-app.html
+++ b/examples/scenario-modeler-server/mcp-app.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="light dark">
   <title>SaaS Scenario Modeler</title>
 </head>
 <body>
diff --git a/examples/system-monitor-server/mcp-app.html b/examples/system-monitor-server/mcp-app.html
index c86a89f..67cc50e 100644
--- a/examples/system-monitor-server/mcp-app.html
+++ b/examples/system-monitor-server/mcp-app.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
   <title>System Monitor</title>
 </head>
 <body>
diff --git a/examples/threejs-server/mcp-app.html b/examples/threejs-server/mcp-app.html
index 51f3bed..b549f0c 100644
--- a/examples/threejs-server/mcp-app.html
+++ b/examples/threejs-server/mcp-app.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
   <title>Three.js Widget</title>
   <link rel="stylesheet" href="/src/global.css">
 </head>
diff --git a/examples/wiki-explorer-server/mcp-app.html b/examples/wiki-explorer-server/mcp-app.html
index dd8200d..f9f1fb9 100644
--- a/examples/wiki-explorer-server/mcp-app.html
+++ b/examples/wiki-explorer-server/mcp-app.html
@@ -3,6 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="color-scheme" content="light dark">
   <title>Wiki Explorer</title>
 </head>
 <body>