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>