@seed-ship/mcp-ui-solid 6.24.0 → 6.25.1

package/src/components/FormRenderer.tsx

@@ -262,9 +262,9 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
   }
 
   return (
-    <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-4">
+    <div class="mcp-ui-root w-full bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] p-4">
       <Show when={params().title}>
-        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+        <h3 class="text-lg font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))] mb-4">
           {params().title}
         </h3>
       </Show>
@@ -276,7 +276,7 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
             const prefilled = params().fields.filter((f) => f.prefill != null).length
             const total = params().fields.length
             return (
-              <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
+              <p class="text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] mb-3">
                 {formatMCPUIString(
                   prefilled === 1 ? strings.formPrefilledOne : strings.formPrefilledMany,
                   { count: prefilled, total }
@@ -301,8 +301,8 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
         </div>
 
         <Show when={errors()._form}>
-          <div class="mt-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
-            <p class="text-sm text-red-600 dark:text-red-400" role="alert">
+          <div class="mt-4 p-3 bg-[color:var(--mcp-ui-danger-soft,var(--color-red-50))] dark:bg-[color:var(--mcp-ui-danger-soft,color-mix(in_oklab,var(--color-red-900)_20%,transparent))] border border-[color:var(--mcp-ui-danger-border,var(--color-red-200))] dark:border-[color:var(--mcp-ui-danger-border,var(--color-red-800))] rounded-md">
+            <p class="text-sm text-[color:var(--mcp-ui-danger,var(--color-red-600))] dark:text-[color:var(--mcp-ui-danger,var(--color-red-400))]" role="alert">
               {errors()._form}
             </p>
           </div>
@@ -310,8 +310,8 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
 
         {/* Auto-submit countdown (v4.2.0) */}
         <Show when={countdown() != null}>
-          <div class="mt-4 flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
-            <span class="text-sm text-blue-700 dark:text-blue-300">
+          <div class="mt-4 flex items-center gap-3 p-3 bg-[color:var(--mcp-ui-accent-soft,var(--color-blue-50))] dark:bg-[color:var(--mcp-ui-accent-soft,color-mix(in_oklab,var(--color-blue-900)_20%,transparent))] border border-[color:var(--mcp-ui-accent-border,var(--color-blue-200))] dark:border-[color:var(--mcp-ui-accent-border,var(--color-blue-800))] rounded-md">
+            <span class="text-sm text-[color:var(--mcp-ui-accent,var(--color-blue-700))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-300))]">
               {formatMCPUIString(strings.formSubmitCountdown, {
                 label: params().submitLabel || strings.submit,
                 seconds: countdown()!,
@@ -320,22 +320,22 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
             <button
               type="button"
               onClick={() => { cancelCountdown(); setUserInteracted(true) }}
-              class="text-sm text-blue-600 dark:text-blue-400 underline hover:text-blue-800 dark:hover:text-blue-200"
+              class="text-sm text-[color:var(--mcp-ui-accent,var(--color-blue-600))] dark:text-[color:var(--mcp-ui-accent,var(--color-blue-400))] underline hover:text-[color:var(--mcp-ui-accent,var(--color-blue-800))] dark:hover:text-[color:var(--mcp-ui-accent,var(--color-blue-200))]"
             >
               {strings.cancel}
             </button>
           </div>
         </Show>
 
-        <div class="flex gap-2 pt-4 mt-4 border-t border-gray-200 dark:border-gray-700">
+        <div class="flex gap-2 pt-4 mt-4 border-t border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]">
           <button
             type="submit"
             disabled={isSubmitting()}
-            class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            class="px-4 py-2 bg-[color:var(--mcp-ui-accent,var(--color-blue-600))] text-[color:var(--mcp-ui-accent-fg,var(--color-white,#fff))] rounded-md hover:bg-[color:var(--mcp-ui-accent-hover,var(--color-blue-700))] focus:outline-none focus:ring-2 focus:ring-[color:var(--mcp-ui-focus,var(--color-blue-500))] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
           >
             {isSubmitting() ? (
               <span class="flex items-center gap-2">
-                <span class="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
+                <span class="animate-spin h-4 w-4 border-2 border-[color:var(--mcp-ui-border,var(--color-white,#fff))] border-t-transparent rounded-full" />
                 {strings.formSubmitting}
               </span>
             ) : (
@@ -347,7 +347,7 @@ export const FormRenderer: Component<FormRendererProps> = (props) => {
               type="button"
               onClick={() => initializeForm(true)}
               disabled={isSubmitting()}
-              class="px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              class="px-4 py-2 border border-[color:var(--mcp-ui-border,var(--color-gray-300,#d1d5db))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] rounded-md hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] focus:outline-none focus:ring-2 focus:ring-[color:var(--mcp-ui-focus,var(--color-gray-500,#6b7280))] focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {strings.formReset}
             </button>

package/src/components/GenerativeUIErrorBoundary.tsx

@@ -66,11 +66,11 @@ function DefaultErrorFallback(props: {
 }) {
   const strings = useMCPUIStrings()
   return (
-    <div class="w-full h-full bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4">
+    <div class="w-full h-full bg-[color:var(--mcp-ui-warning-soft,var(--color-yellow-50))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-yellow-900)_20%,transparent))] border border-[color:var(--mcp-ui-warning-border,var(--color-yellow-200))] dark:border-[color:var(--mcp-ui-warning-border,var(--color-yellow-800))] rounded-lg p-4">
       <div class="flex items-start gap-3">
         <div class="flex-shrink-0">
           <svg
-            class="w-5 h-5 text-yellow-600 dark:text-yellow-400"
+            class="w-5 h-5 text-[color:var(--mcp-ui-warning,var(--color-yellow-600))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-400))]"
             fill="none"
             stroke="currentColor"
             viewBox="0 0 24 24"
@@ -84,24 +84,24 @@ function DefaultErrorFallback(props: {
           </svg>
         </div>
         <div class="flex-1 min-w-0">
-          <p class="text-sm font-medium text-yellow-900 dark:text-yellow-100">
+          <p class="text-sm font-medium text-[color:var(--mcp-ui-warning,var(--color-yellow-900))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-100))]">
             {strings.errorBoundaryTitle}
           </p>
-          <p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
+          <p class="text-xs text-[color:var(--mcp-ui-warning,var(--color-yellow-700))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-300))] mt-1">
             {formatMCPUIString(strings.errorBoundaryMeta, {
               type: props.componentType || strings.unknown,
               id: props.componentId?.slice(0, 8) || strings.unknown,
             })}
           </p>
           <Show when={import.meta.env.DEV}>
-            <p class="text-xs text-yellow-600 dark:text-yellow-400 mt-2 font-mono">
+            <p class="text-xs text-[color:var(--mcp-ui-warning,var(--color-yellow-600))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-400))] mt-2 font-mono">
               {props.error.message}
             </p>
           </Show>
           <Show when={props.allowRetry}>
             <button
               onClick={props.onRetry}
-              class="mt-3 text-xs font-medium text-yellow-800 dark:text-yellow-200 hover:text-yellow-900 dark:hover:text-yellow-100 underline"
+              class="mt-3 text-xs font-medium text-[color:var(--mcp-ui-warning,var(--color-yellow-800))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-200))] hover:text-[color:var(--mcp-ui-warning,var(--color-yellow-900))] dark:hover:text-[color:var(--mcp-ui-warning,var(--color-yellow-100))] underline"
             >
               {strings.errorBoundaryRetry}
             </button>

package/src/components/GhostText.tsx

@@ -58,7 +58,7 @@ export const GhostText: Component<GhostTextProps> = (props) => {
 
   return (
     <div
-      class={`mcp-ghost-text-container ${props.class || ''}`}
+      class={`mcp-ui-root mcp-ghost-text-container ${props.class || ''}`}
       style={{
         position: 'relative',
         display: 'inline-block',
@@ -91,7 +91,7 @@ export const GhostText: Component<GhostTextProps> = (props) => {
           <span
             class={`mcp-ghost-text ${props.ghostClass || ''}`}
             style={{
-              color: '#9ca3af',
+              color: 'var(--mcp-ui-fg-subtle, #9ca3af)',
               opacity: '0.7'
             }}
           >
@@ -110,8 +110,8 @@ export const GhostText: Component<GhostTextProps> = (props) => {
             top: '50%',
             transform: 'translateY(-50%)',
             'font-size': '0.75rem',
-            color: '#6b7280',
-            'background-color': 'rgba(255, 255, 255, 0.9)',
+            color: 'var(--mcp-ui-fg-muted, #6b7280)',
+            'background-color': 'var(--mcp-ui-surface, rgba(255, 255, 255, 0.9))',
             padding: '2px 6px',
             'border-radius': '4px',
             'pointer-events': 'none'
@@ -137,8 +137,8 @@ export const GhostText: Component<GhostTextProps> = (props) => {
               display: 'inline-block',
               width: '12px',
               height: '12px',
-              border: '2px solid #e5e7eb',
-              'border-top-color': '#3b82f6',
+              border: '2px solid var(--mcp-ui-border, #e5e7eb)',
+              'border-top-color': 'var(--mcp-ui-accent, #3b82f6)',
               'border-radius': '50%',
               animation: 'mcp-spin 0.6s linear infinite'
             }}
@@ -230,7 +230,7 @@ export interface GhostTextInputProps {
  */
 export const GhostTextInput: Component<GhostTextInputProps> = (props) => {
   return (
-    <div class="mcp-ghost-text-input-wrapper" style={{ position: 'relative' }}>
+    <div class="mcp-ui-root mcp-ghost-text-input-wrapper" style={{ position: 'relative' }}>
       <GhostText
         inputValue={props.value}
         ghostText={props.ghostText}

package/src/components/GraphRenderer.tsx

@@ -20,10 +20,7 @@
 
 import { Component, createSignal, onCleanup, onMount, Show, For } from 'solid-js';
 import type { UIComponent } from '../types';
-import type {
-  GraphComponentParams,
-  GraphLayout,
-} from '@seed-ship/mcp-ui-spec';
+import type { GraphComponentParams, GraphLayout } from '@seed-ship/mcp-ui-spec';
 import { ExpandableWrapper, useExpanded } from './ExpandableWrapper';
 import { PortalDropdownMenu } from './PortalDropdownMenu';
 import { DegradedFallback } from './DegradedFallback';
@@ -31,6 +28,40 @@ import { graphToDegradedTable } from '../utils/degraded-projections';
 import { escapeHtml } from '../utils/escape-html';
 import { useTelemetry } from '../context/MCPUITelemetryContext';
 import { formatMCPUIString, useMCPUIStrings } from '../context/MCPUIStringsContext';
+import { observeTheme, readThemeTokens } from '../utils/theme';
+
+const GRAPH_THEME_TOKENS = [
+  ...Array.from({ length: 8 }, (_, i) => `--mcp-ui-chart-${i + 1}`),
+  '--mcp-ui-chart-grid',
+  '--mcp-ui-chart-axis',
+  '--mcp-ui-chart-label',
+] as const;
+
+/** G6's option mappers outrank datum.style, so explicitly retain the latter. */
+function graphThemeOptions(p: GraphComponentParams, tokens: Record<string, string | undefined>) {
+  const nodeIndices = new Map(p.nodes.map((node, index) => [node.id, index]));
+  return {
+    node: {
+      style: (datum: any) => {
+        const index = nodeIndices.get(datum.id) ?? 0;
+        const fill = tokens[`--mcp-ui-chart-${(index % 8) + 1}`];
+        return {
+          ...(fill ? { fill } : {}),
+          ...(tokens['--mcp-ui-chart-axis'] ? { stroke: tokens['--mcp-ui-chart-axis'] } : {}),
+          ...(tokens['--mcp-ui-chart-label'] ? { labelFill: tokens['--mcp-ui-chart-label'] } : {}),
+          ...datum.style,
+        };
+      },
+    },
+    edge: {
+      style: (datum: any) => ({
+        ...(tokens['--mcp-ui-chart-grid'] ? { stroke: tokens['--mcp-ui-chart-grid'] } : {}),
+        ...(tokens['--mcp-ui-chart-label'] ? { labelFill: tokens['--mcp-ui-chart-label'] } : {}),
+        ...datum.style,
+      }),
+    },
+  };
+}
 
 // Module-scoped lazy import promise — first call triggers the dynamic
 // import, subsequent calls reuse the resolved module.
@@ -94,7 +125,8 @@ function resolveLayout(params: GraphComponentParams): { type: string; [key: stri
  */
 export function buildGraphConfig(
   p: GraphComponentParams,
-  container?: HTMLElement
+  container?: HTMLElement,
+  tokens: Record<string, string | undefined> = {}
 ): Record<string, unknown> {
   const config: Record<string, unknown> = {
     container,
@@ -102,6 +134,9 @@ export function buildGraphConfig(
     layout: resolveLayout(p),
     behaviors: resolveBehaviors(p),
   };
+  if (GRAPH_THEME_TOKENS.some((name) => tokens[name])) {
+    Object.assign(config, graphThemeOptions(p, tokens));
+  }
 
   if (p.rendererPref === 'svg') {
     console.warn(
@@ -122,7 +157,14 @@ export function buildGraphConfig(
           if (!item) return '';
           const label = item.label ?? item.id ?? '';
           const data = item.data ? JSON.stringify(item.data) : '';
-          return `<div style="padding:4px 8px"><strong>${escapeHtml(String(label))}</strong>${
+          // G6 may position HTML outside our subtree. Resolve effective host
+          // values at hover time, rather than relying on portal inheritance.
+          const theme = readThemeTokens(container, ['--mcp-ui-surface', '--mcp-ui-fg', '--mcp-ui-border']);
+          const styles = ['padding:4px 8px'];
+          if (theme['--mcp-ui-surface']) styles.push(`background-color:${theme['--mcp-ui-surface']}`);
+          if (theme['--mcp-ui-fg']) styles.push(`color:${theme['--mcp-ui-fg']}`);
+          if (theme['--mcp-ui-border']) styles.push(`border:1px solid ${theme['--mcp-ui-border']}`);
+          return `<div style="${escapeHtml(styles.join(';'))}"><strong>${escapeHtml(String(label))}</strong>${
             data ? `<br><span style="font-size:11px;opacity:0.7">${escapeHtml(data)}</span>` : ''
           }</div>`;
         },
@@ -234,70 +276,40 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
   // Loosely typed because G6 is a peer-optional — we don't pull its
   // types into the bundle just to type a transient local handle.
   let graphInstance: any | undefined;
+  let stopTheme: (() => void) | undefined;
+  let disposed = false;
 
   onMount(async () => {
     const g6Available = await isG6Available();
+    if (disposed) return;
     setAvailable(g6Available);
     if (!g6Available || !containerRef) return;
 
     try {
       const { Graph } = await g6ModulePromise!;
+      if (disposed || !containerRef) return;
       const p = params();
-      const config: Record<string, unknown> = {
-        container: containerRef,
-        data: { nodes: p.nodes, edges: p.edges ?? [] },
-        layout: resolveLayout(p),
-        behaviors: resolveBehaviors(p),
-      };
+      let tokens = readThemeTokens(containerRef, GRAPH_THEME_TOKENS);
+      const config = buildGraphConfig(p, containerRef, tokens);
 
-      // G6 v5's `renderer` is a factory `(layer) => IRenderer`, NOT a string
-      // (that was the v4 contract). Passing the string `'canvas'` / `'svg'`
-      // makes G6 throw `renderer is not a function` — and because the default
-      // path also passed the string `'canvas'`, EVERY graph crashed, not just
-      // the svg one.
-      //
-      // Fix: omit `renderer` entirely. G6 then uses its built-in canvas
-      // renderer (documented default `() => new CanvasRenderer()`), which is
-      // what we want for every graph.
-      //
-      // `rendererPref: 'svg'` is NOT wired yet: a real G6 v5 SVG renderer
-      // needs the `@antv/g-svg` factory, which is a *transitive* dep of
-      // `@antv/g6` (not a declared peer) and isn't statically resolvable at
-      // build time. Rather than ship a fragile/unresolvable import, we treat
-      // svg as "not yet supported" and fall back to the canvas default with a
-      // one-time warning. Tracked for a follow-up that wires the factory
-      // behind a proper optional-peer resolution. (Never pass a string here.)
-      if (p.rendererPref === 'svg') {
-        console.warn(
-          '[MCP-UI] GraphRenderer: rendererPref "svg" is not yet supported; using the default canvas renderer.'
-        );
-      }
-      if (p.fitView !== false) {
-        config.autoFit = 'view';
-      }
-      if (p.tooltip !== false) {
-        // Built-in tooltip plugin — shows label + a compact dump of
-        // node.data on hover. Consumers can opt out with `tooltip: false`.
-        config.plugins = [
-          {
-            type: 'tooltip',
-            getContent: (_evt: unknown, items: any[]) => {
-              const item = items?.[0];
-              if (!item) return '';
-              const label = item.label ?? item.id ?? '';
-              const data = item.data ? JSON.stringify(item.data) : '';
-              return `<div style="padding:4px 8px"><strong>${escapeHtml(String(label))}</strong>${
-                data
-                  ? `<br><span style="font-size:11px;opacity:0.7">${escapeHtml(data)}</span>`
-                  : ''
-              }</div>`;
-            },
-          },
-        ];
-      }
       graphInstance = new (Graph as any)(config);
       await graphInstance.render();
+      if (disposed) return;
+      const syncTheme = () => {
+        if (!graphInstance || disposed) return;
+        const next = readThemeTokens(containerRef, GRAPH_THEME_TOKENS);
+        if (GRAPH_THEME_TOKENS.every((name) => next[name] === tokens[name])) return;
+        tokens = next;
+        graphInstance.setOptions(graphThemeOptions(p, tokens));
+        // draw() updates styles without rerunning force layout or auto-fit.
+        void Promise.resolve(graphInstance.draw()).catch(() => {});
+      };
+      stopTheme = observeTheme(containerRef, syncTheme);
+      // Rendering/layout is async: a host may have switched themes while it
+      // was in flight, before the observer could be attached.
+      syncTheme();
     } catch (err) {
+      if (disposed) return;
       const message = err instanceof Error ? err.message : strings.graphRenderError;
       setError(message);
       // Fallback ladder (P2.5): the native G6 render threw — emit telemetry
@@ -314,6 +326,8 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
   });
 
   onCleanup(() => {
+    disposed = true;
+    stopTheme?.();
     try {
       graphInstance?.destroy();
     } catch {
@@ -365,17 +379,17 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
           when={available() === false}
           fallback={
             // Loading skeleton while we determine peer availability
-            <div class="w-full p-4 bg-gray-50 dark:bg-gray-800/40 border border-gray-200 dark:border-gray-700 rounded-lg animate-pulse">
-              <div class="h-4 w-32 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
-              <div class="h-3 w-48 bg-gray-200 dark:bg-gray-700 rounded" />
+            <div class="w-full p-4 bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-50,#f9fafb))] dark:bg-[color:var(--mcp-ui-surface,color-mix(in_oklab,var(--color-gray-800,#1f2937)_40%,transparent))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] rounded-lg animate-pulse">
+              <div class="h-4 w-32 bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-200,#e5e7eb))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] rounded mb-2" />
+              <div class="h-3 w-48 bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-200,#e5e7eb))] dark:bg-[color:var(--mcp-ui-surface-muted,var(--color-gray-700,#374151))] rounded" />
             </div>
           }
         >
-          <div class="w-full p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
-            <p class="text-sm font-medium text-yellow-900 dark:text-yellow-100">
+          <div class="w-full p-4 bg-[color:var(--mcp-ui-warning-soft,var(--color-yellow-50))] dark:bg-[color:var(--mcp-ui-warning-soft,color-mix(in_oklab,var(--color-yellow-900)_20%,transparent))] border border-[color:var(--mcp-ui-warning-border,var(--color-yellow-200))] dark:border-[color:var(--mcp-ui-warning-border,var(--color-yellow-800))] rounded-lg">
+            <p class="text-sm font-medium text-[color:var(--mcp-ui-warning,var(--color-yellow-900))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-100))]">
               {strings.graphUnavailable}
             </p>
-            <p class="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
+            <p class="text-xs text-[color:var(--mcp-ui-warning,var(--color-yellow-700))] dark:text-[color:var(--mcp-ui-warning,var(--color-yellow-300))] mt-1">
               Install <code>@antv/g6</code> peer dependency to render <code>type: "graph"</code>{' '}
               components.
             </p>
@@ -400,7 +414,7 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
               ref={exportTriggerRef}
               type="button"
               onClick={() => setExportMenuOpen((v) => !v)}
-              class="px-2 py-1 text-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded shadow-sm hover:bg-gray-50 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300"
+              class="px-2 py-1 text-xs bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-50,#f9fafb))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))]"
               title={strings.graphExport}
               aria-label={strings.graphExport}
               aria-haspopup="menu"
@@ -438,10 +452,12 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
                   <button
                     type="button"
                     onClick={item.onClick}
-                    class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-gray-700 last:border-b-0"
+                    class="w-full text-left px-3 py-2 hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] text-[color:var(--mcp-ui-fg,var(--color-gray-700,#374151))] dark:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] border-b border-[color:var(--mcp-ui-border,var(--color-gray-100,#f3f4f6))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] last:border-b-0"
                   >
                     <div class="font-medium">{item.label}</div>
-                    <div class="text-[10px] text-gray-500 dark:text-gray-400">{item.hint}</div>
+                    <div class="text-[10px] text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))]">
+                      {item.hint}
+                    </div>
                   </button>
                 )}
               </For>
@@ -451,7 +467,7 @@ export const GraphRenderer: Component<GraphRendererProps> = (props) => {
           {/* Native G6 canvas — hidden once a render error degrades us. */}
           <div
             ref={containerRef}
-            class={`bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden ${
+            class={`mcp-ui-root bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-sm))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))] overflow-hidden ${
               error() ? 'hidden' : ''
             } ${isExpanded() ? 'flex-1 min-h-0' : ''}`}
             style={

package/src/components/MissingValue.tsx

@@ -38,7 +38,7 @@ export const MissingValueMark: Component = () => {
   const strings = useMCPUIStrings()
   return (
     <span data-mcp-missing-value="">
-      <span aria-hidden="true" class="text-gray-400 dark:text-gray-500">
+      <span aria-hidden="true" class="text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] dark:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))]">
         {MISSING_VALUE_MARKER}
       </span>
       <span style={VISUALLY_HIDDEN_STYLE}>{strings.missingValue}</span>
@@ -53,7 +53,7 @@ export const MissingValueLegend: Component<{ class?: string }> = (props) => {
     <p
       data-mcp-missing-legend=""
       role="note"
-      class={`text-xs text-gray-500 dark:text-gray-400 ${props.class ?? ''}`}
+      class={`text-xs text-[color:var(--mcp-ui-fg-muted,var(--color-gray-500,#6b7280))] dark:text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] ${props.class ?? ''}`}
     >
       {formatMCPUIString(strings.missingValueLegend, { marker: MISSING_VALUE_MARKER })}
     </p>

package/src/components/ModalRenderer.tsx

@@ -5,6 +5,7 @@
 
 import { Component, Show, createSignal, createEffect, onCleanup, JSX } from 'solid-js'
 import { Portal } from 'solid-js/web'
+import { bindPortalTheme } from '../utils/theme'
 import type { UIComponent, ModalComponentParams } from '../types'
 import { useMCPUIStrings } from '../context/MCPUIStringsContext'
 
@@ -75,6 +76,7 @@ export interface ModalRendererProps {
 export const ModalRenderer: Component<ModalRendererProps> = (props) => {
   const strings = useMCPUIStrings()
   const [isVisible, setIsVisible] = createSignal(false)
+  let themeAnchor: HTMLSpanElement | undefined
 
   const params = () => props.params || (props.component?.params as ModalComponentParams) || {}
 
@@ -151,11 +153,14 @@ export const ModalRenderer: Component<ModalRendererProps> = (props) => {
   }
 
   return (
+    <>
+    <span hidden aria-hidden="true" ref={themeAnchor} />
     <Show when={isVisible()}>
       <Portal>
         {/* Backdrop */}
         <div
-          class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
+          ref={(element) => bindPortalTheme(element, () => themeAnchor)}
+          class="mcp-ui-root fixed inset-0 z-50 flex items-center justify-center p-4 bg-[color:var(--mcp-ui-overlay,color-mix(in_oklab,var(--color-black,#000)_50%,transparent))] backdrop-blur-sm"
           style={{ animation: 'modal-fade-in 0.15s ease-out' }}
           onClick={handleBackdropClick}
           role="dialog"
@@ -165,17 +170,17 @@ export const ModalRenderer: Component<ModalRendererProps> = (props) => {
         >
           {/* Modal container */}
           <div
-            class={`relative w-full ${sizeClass()} bg-white dark:bg-gray-800 rounded-lg shadow-xl`}
+            class={`relative w-full ${sizeClass()} bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-xl))]`}
             style={{ animation: 'modal-scale-in 0.15s ease-out' }}
             onClick={(e) => e.stopPropagation()}
           >
             {/* Header */}
             <Show when={params()?.title || params()?.showClose !== false}>
-              <div class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+              <div class="flex items-center justify-between p-4 border-b border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-700,#374151))]">
                 <Show when={params()?.title}>
                   <h2
                     id="modal-title"
-                    class="text-lg font-semibold text-gray-900 dark:text-white"
+                    class="text-lg font-semibold text-[color:var(--mcp-ui-fg,var(--color-gray-900,#111827))] dark:text-[color:var(--mcp-ui-fg,var(--color-white,#fff))]"
                   >
                     {params()!.title}
                   </h2>
@@ -186,7 +191,7 @@ export const ModalRenderer: Component<ModalRendererProps> = (props) => {
                 <Show when={params()?.showClose !== false}>
                   <button
                     onClick={handleClose}
-                    class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                    class="p-1 text-[color:var(--mcp-ui-fg-subtle,var(--color-gray-400,#9ca3af))] hover:text-[color:var(--mcp-ui-fg-muted,var(--color-gray-600,#4b5563))] dark:hover:text-[color:var(--mcp-ui-fg,var(--color-gray-300,#d1d5db))] rounded-full hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-100,#f3f4f6))] dark:hover:bg-[color:var(--mcp-ui-surface-hover,var(--color-gray-700,#374151))] transition-colors"
                     aria-label={strings.modalClose}
                   >
                     <svg
@@ -230,5 +235,6 @@ export const ModalRenderer: Component<ModalRendererProps> = (props) => {
         `}</style>
       </Portal>
     </Show>
+    </>
   )
 }

package/src/components/PortalDropdownMenu.tsx

@@ -22,6 +22,7 @@
 
 import { Component, JSX, Show, createSignal, createEffect, onCleanup } from 'solid-js'
 import { Portal } from 'solid-js/web'
+import { bindPortalTheme } from '../utils/theme'
 
 export interface PortalDropdownMenuProps {
   /**
@@ -111,7 +112,10 @@ export const PortalDropdownMenu: Component<PortalDropdownMenuProps> = (props) =>
     <Show when={props.open}>
       <Portal>
         <div
-          ref={menuRef}
+          ref={(element) => {
+            menuRef = element
+            bindPortalTheme(element, () => props.trigger)
+          }}
           role="menu"
           data-mcp-ui-portal="menu"
           style={{
@@ -121,7 +125,7 @@ export const PortalDropdownMenu: Component<PortalDropdownMenuProps> = (props) =>
             'z-index': 9999,
             width: `${props.width ?? 144}px`,
           }}
-          class={`bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 text-sm ${props.class ?? ''}`}
+          class={`mcp-ui-root bg-[color:var(--mcp-ui-surface,var(--color-white,#fff))] dark:bg-[color:var(--mcp-ui-surface,var(--color-gray-800,#1f2937))] border border-[color:var(--mcp-ui-border,var(--color-gray-200,#e5e7eb))] dark:border-[color:var(--mcp-ui-border,var(--color-gray-600,#4b5563))] rounded-lg shadow-[var(--mcp-ui-shadow,var(--shadow-lg))] py-1 text-sm ${props.class ?? ''}`}
         >
           {props.children}
         </div>