From 8890a72cc3e08f93f043bcfe65a25ae614b61518 Mon Sep 17 00:00:00 2001
From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com>
Date: Tue, 27 May 2025 15:26:01 +0000
Subject: [PATCH] docs: add dynamic theme styling with loader data section

- Added comprehensive documentation for fetching theme data from loaders
- Included example of using CSS custom properties with theme data
- Demonstrated dynamic theming with --color-primary-DEFAULT pattern
- Added example components that utilize loader-based theme data
---
 .../text-field-custom.stories.tsx             | 61 +++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx b/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx
index ccf7f5c3..6e2ed668 100644
--- a/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx
+++ b/apps/docs/src/remix-hook-form/text-field-custom.stories.tsx
@@ -245,6 +245,67 @@ const IconInput = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
 );
 \`\`\`
 
+#### Dynamic Theme Styling with Loader Data
+
+For dynamic theming based on data from a loader, you can fetch theme data and apply it using CSS custom properties:
+
+\`\`\`tsx
+// In your route loader
+export const loader = async () => {
+  const theme = await getThemeData(); // Fetch theme from your data source
+  return { theme };
+};
+
+// In your component
+export default function MyForm() {
+  const { theme } = useLoaderData<typeof loader>();
+  
+  // Apply theme data using CSS custom properties
+  const themeStyle = {
+    '--color-primary-DEFAULT': theme?.primary_color,
+    '--color-secondary-DEFAULT': theme?.secondary_color,
+    '--color-accent-DEFAULT': theme?.accent_color,
+  } as React.CSSProperties;
+
+  return (
+    <div style={themeStyle}>
+      <TextField
+        name="email"
+        label="Email"
+        placeholder="Enter your email"
+        components={{
+          Input: DynamicThemedInput,
+          FormLabel: DynamicThemedLabel,
+        }}
+      />
+    </div>
+  );
+}
+
+// Custom components that use the CSS custom properties
+const DynamicThemedInput = (props: React.InputHTMLAttributes<HTMLInputElement>) => (
+  <input
+    {...props}
+    className="w-full rounded-lg border-2 px-4 py-2 focus:outline-none focus:ring-2"
+    style={{
+      borderColor: 'var(--color-primary-DEFAULT)',
+      backgroundColor: 'var(--color-secondary-DEFAULT)',
+      '--tw-ring-color': 'var(--color-primary-DEFAULT)',
+    } as React.CSSProperties}
+  />
+);
+
+const DynamicThemedLabel = (props: React.ComponentPropsWithoutRef<typeof FormLabel>) => (
+  <FormLabel 
+    className="font-bold" 
+    style={{ color: 'var(--color-primary-DEFAULT)' } as React.CSSProperties}
+    {...props} 
+  />
+);
+\`\`\`
+
+This approach allows you to dynamically style your form components based on theme data fetched from your loader, making your forms adaptable to different branding requirements.
+
 ### Key Points
 
 - Always use React.forwardRef when creating custom components