Add color-scheme meta tag to all example apps

martinalong · claude · martinalong · commit 35781865af82 · 2025-12-15T11:42:18.000-08:00
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>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
