Add color-scheme meta tag to all example apps

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

@@ -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>

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>

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>

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>

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>

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>

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>

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;

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>

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>

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>

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>