fix(embed): SVG text now follows the iframe theme

Three stacked bugs were keeping the chart text black in dark mode:

1. EmbedStudio mounted both preview iframes with
sandbox="allow-scripts" only (no allow-same-origin). The bootstrap
script couldn't reach window.parent.document, so the cascade fell
through localStorage to matchMedia(prefers-color-scheme) - which
returns the OS preference, not the app theme. Result: the iframe
could land on a different theme than the article. Aligned the
sandbox with HtmlEmbedView ("allow-scripts allow-same-origin").

2. The THEME_BOOTSTRAP in shared/embed-doc.ts always overwrote the
srcdoc-provided data-theme attribute, even when every detection
path failed. Honour the existing data-theme before falling back
to matchMedia so an explicit isDark from buildEmbedSrcdoc wins.

3. SVG text/line/path don't inherit CSS color the way HTML elements
do - their default fill/stroke is "black", not "currentColor".
Charts that scoped colours via `body { color: var(--text-color) }`
still rendered black axes/labels in dark mode. Added defaults to
BASE_STYLES so any SVG text without an explicit fill, and any d3
axis/grid line/path without an explicit stroke, inherits the
cascaded color via currentColor. Charts that paint their own
colours via attribute or inline style still win by specificity.

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/src/shared/embed-doc.ts

@@ -149,6 +149,15 @@ const THEME_BOOTSTRAP = `
     if (!theme) {
       try { theme = window.localStorage && window.localStorage.getItem('theme'); } catch(e) {}
     }
+    // Respect the srcdoc-provided data-theme before falling back to the
+    // OS preference. Without this, a cross-origin sandbox iframe (e.g.
+    // an embed-studio preview with sandbox="allow-scripts" but no
+    // allow-same-origin) can't read the parent and the bootstrap would
+    // otherwise clobber the explicitly-set initial theme with
+    // matchMedia's guess.
+    if (!theme) {
+      theme = document.documentElement.getAttribute('data-theme') || null;
+    }
     if (!theme) {
       theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
@@ -221,6 +230,18 @@ body {
      scroll container that would trap scroll events or inflate scrollHeight. */
   overflow: clip;
 }
+/* SVG quirk: text/line/path do not inherit CSS color the way HTML does.
+   Their default fill/stroke is "black", not "currentColor". A chart
+   that only sets body color via var(--text-color) would still render
+   black axes/labels in dark mode. Default everything without its own
+   fill/stroke to currentColor so the cascaded body color drives the
+   look. Charts that want a specific colour just set the attribute or
+   inline style and win by specificity. */
+svg text:not([fill]) { fill: currentColor; }
+svg .axis path:not([stroke]),
+svg .axis line:not([stroke]),
+svg .domain:not([stroke]) { stroke: currentColor; }
+svg .grid line:not([stroke]) { stroke: currentColor; opacity: 0.12; }
 `.trim();
 
 /**

frontend/src/components/EmbedStudio.tsx

@@ -393,14 +393,14 @@ export function EmbedStudio({
                 <iframe
                   ref={frameA}
                   title="Chart preview A"
-                  sandbox="allow-scripts"
+                  sandbox="allow-scripts allow-same-origin"
                   onLoad={() => handleFrameLoad("a")}
                   style={frameStyle("a")}
                 />
                 <iframe
                   ref={frameB}
                   title="Chart preview B"
-                  sandbox="allow-scripts"
+                  sandbox="allow-scripts allow-same-origin"
                   onLoad={() => handleFrameLoad("b")}
                   style={frameStyle("b")}
                 />