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

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

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;

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
 }