From fb5e96a719a2865c8cb41165e9391e5ea185fd62 Mon Sep 17 00:00:00 2001
From: Jonathan Hefner <jonathan@hefner.pro>
Date: Mon, 19 Jan 2026 11:16:22 -0600
Subject: [PATCH] Complete "Support native host styling using CSS variables"
 pattern documentation

References existing type-checked examples instead of a stub:
- Vanilla JS: `applyHostStyleVariables_fromHostContext` from `src/styles.examples.ts`
- React: `useHostStyles_basicUsage` from `src/react/useHostStyles.examples.tsx`

Expanded `applyHostStyleVariables_fromHostContext` to show the full pattern:
using CSS variables in styles, applying on `onhostcontextchanged`, and
applying initial styles after `connect()`.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 docs/patterns.md       | 12 ++++++++++--
 docs/patterns.ts       | 10 ----------
 src/styles.examples.ts | 12 ++++++++++++
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/docs/patterns.md b/docs/patterns.md
index c109cfd..77ad7ab 100644
--- a/docs/patterns.md
+++ b/docs/patterns.md
@@ -27,9 +27,17 @@ Set {@link types!McpUiToolMeta.visibility Tool.\_meta.ui.visibility} to `["app"]
 
 {@includeCode ./patterns.ts#errorsToModel}
 
-## [TODO] Support native host styling / use CSS variables
+## Support native host styling using CSS variables
 
-{@includeCode ./patterns.ts#hostStyling}
+Hosts provide CSS variables (e.g., `--color-background-primary`) that match their theme. Apply these to the document, then use them in your styles via `var()`.
+
+**Vanilla JS:**
+
+{@includeCode ../src/styles.examples.ts#applyHostStyleVariables_fromHostContext}
+
+**React:**
+
+{@includeCode ../src/react/useHostStyles.examples.tsx#useHostStyles_basicUsage}
 
 ## [TODO] Reacting to light/dark theme changes
 
diff --git a/docs/patterns.ts b/docs/patterns.ts
index 5ac8b91..4aad13b 100644
--- a/docs/patterns.ts
+++ b/docs/patterns.ts
@@ -31,15 +31,6 @@ function errorsToModel(app: App) {
   //#endregion errorsToModel
 }
 
-/**
- * Example: Support native host styling / use CSS variables
- */
-function hostStyling() {
-  //#region hostStyling
-  // TODO: Implement host styling support via CSS variables
-  //#endregion hostStyling
-}
-
 /**
  * Example: Reacting to light/dark theme changes
  */
@@ -112,7 +103,6 @@ function migrateFromOpenai() {
 // Suppress unused variable warnings
 void authenticatedCalls;
 void errorsToModel;
-void hostStyling;
 void lightDarkTheme;
 void fullscreen;
 void persistData;
diff --git a/src/styles.examples.ts b/src/styles.examples.ts
index bf403d0..2e19161 100644
--- a/src/styles.examples.ts
+++ b/src/styles.examples.ts
@@ -43,11 +43,23 @@ function applyDocumentTheme_fromHostContext(app: App) {
  */
 function applyHostStyleVariables_fromHostContext(app: App) {
   //#region applyHostStyleVariables_fromHostContext
+  // Use CSS variables in your styles
+  document.body.style.background = "var(--color-background-primary)";
+
+  // Apply when host context changes
   app.onhostcontextchanged = (params) => {
     if (params.styles?.variables) {
       applyHostStyleVariables(params.styles.variables);
     }
   };
+
+  // Apply initial styles after connecting
+  app.connect().then(() => {
+    const ctx = app.getHostContext();
+    if (ctx?.styles?.variables) {
+      applyHostStyleVariables(ctx.styles.variables);
+    }
+  });
   //#endregion applyHostStyleVariables_fromHostContext
 }