@mgcrea/react-native-tailwind 0.10.0 → 0.11.1

package/src/babel/plugin.ts

@@ -18,7 +18,8 @@ import {
 } from "../parser/index.js";
 import type { StyleObject } from "../types/core.js";
 import { generateStyleKey } from "../utils/styleKey.js";
-import { extractCustomColors } from "./config-loader.js";
+import type { CustomTheme } from "./config-loader.js";
+import { extractCustomTheme } from "./config-loader.js";
 
 // Import utility functions
 import type { SchemeModifierConfig } from "../types/config.js";
@@ -88,6 +89,42 @@ export type PluginOptions = {
     darkSuffix?: string;
     lightSuffix?: string;
   };
+
+  /**
+   * Configuration for color scheme hook import (dark:/light: modifiers)
+   *
+   * Allows using custom color scheme hooks from theme providers instead of
+   * React Native's built-in useColorScheme.
+   *
+   * @example
+   * // Use custom hook from theme provider
+   * {
+   *   importFrom: '@/hooks/useColorScheme',
+   *   importName: 'useColorScheme'
+   * }
+   *
+   * @example
+   * // Use React Navigation theme
+   * {
+   *   importFrom: '@react-navigation/native',
+   *   importName: 'useTheme'  // You'd wrap this to return ColorSchemeName
+   * }
+   *
+   * @default { importFrom: 'react-native', importName: 'useColorScheme' }
+   */
+  colorScheme?: {
+    /**
+     * Module to import the color scheme hook from
+     * @default 'react-native'
+     */
+    importFrom?: string;
+
+    /**
+     * Name of the hook to import
+     * @default 'useColorScheme'
+     */
+    importName?: string;
+  };
 };
 
 type PluginState = PluginPass & {
@@ -99,7 +136,10 @@ type PluginState = PluginPass & {
   hasColorSchemeImport: boolean;
   needsColorSchemeImport: boolean;
   colorSchemeVariableName: string;
-  customColors: Record<string, string>;
+  colorSchemeImportSource: string; // Where to import the hook from (e.g., 'react-native')
+  colorSchemeHookName: string; // Name of the hook to import (e.g., 'useColorScheme')
+  colorSchemeLocalIdentifier?: string; // Local identifier if hook is already imported with an alias
+  customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   supportedAttributes: Set<string>;
   attributePatterns: RegExp[];
@@ -209,6 +249,10 @@ export default function reactNativeTailwindBabelPlugin(
     lightSuffix: options?.schemeModifier?.lightSuffix ?? "-light",
   };
 
+  // Color scheme hook configuration from plugin options
+  const colorSchemeImportSource = options?.colorScheme?.importFrom ?? "react-native";
+  const colorSchemeHookName = options?.colorScheme?.importName ?? "useColorScheme";
+
   return {
     name: "react-native-tailwind",
 
@@ -224,6 +268,8 @@ export default function reactNativeTailwindBabelPlugin(
           state.hasColorSchemeImport = false;
           state.needsColorSchemeImport = false;
           state.colorSchemeVariableName = "_twColorScheme";
+          state.colorSchemeImportSource = colorSchemeImportSource;
+          state.colorSchemeHookName = colorSchemeHookName;
           state.supportedAttributes = exactMatches;
           state.attributePatterns = patterns;
           state.stylesIdentifier = stylesIdentifier;
@@ -231,8 +277,8 @@ export default function reactNativeTailwindBabelPlugin(
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = new Set();
 
-          // Load custom colors from tailwind.config.*
-          state.customColors = extractCustomColors(state.file.opts.filename ?? "");
+          // Load custom theme from tailwind.config.*
+          state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
 
           // Use scheme modifier config from plugin options
           state.schemeModifierConfig = schemeModifierConfig;
@@ -259,15 +305,21 @@ export default function reactNativeTailwindBabelPlugin(
             addPlatformImport(path, t);
           }
 
-          // Add useColorScheme import if color scheme modifiers were used and not already present
+          // Add color scheme hook import if color scheme modifiers were used and not already present
           if (state.needsColorSchemeImport && !state.hasColorSchemeImport) {
-            addColorSchemeImport(path, t);
+            addColorSchemeImport(path, state.colorSchemeImportSource, state.colorSchemeHookName, t);
           }
 
-          // Inject useColorScheme hook in function components that need it
+          // Inject color scheme hook in function components that need it
           if (state.needsColorSchemeImport) {
             for (const functionPath of state.functionComponentsNeedingColorScheme) {
-              injectColorSchemeHook(functionPath, state.colorSchemeVariableName, t);
+              injectColorSchemeHook(
+                functionPath,
+                state.colorSchemeVariableName,
+                state.colorSchemeHookName,
+                state.colorSchemeLocalIdentifier,
+                t,
+              );
             }
           }
 
@@ -299,13 +351,6 @@ export default function reactNativeTailwindBabelPlugin(
             return false;
           });
 
-          const hasUseColorScheme = specifiers.some((spec) => {
-            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
-              return spec.imported.name === "useColorScheme";
-            }
-            return false;
-          });
-
           // Only track if imports exist - don't mutate yet
           // Actual import injection happens in Program.exit only if needed
           if (hasStyleSheet) {
@@ -316,14 +361,28 @@ export default function reactNativeTailwindBabelPlugin(
             state.hasPlatformImport = true;
           }
 
-          if (hasUseColorScheme) {
-            state.hasColorSchemeImport = true;
-          }
-
           // Store reference to the react-native import for later modification if needed
           state.reactNativeImportPath = path;
         }
 
+        // Track color scheme hook import from the configured source
+        // (default: react-native, but can be custom like @/hooks/useColorScheme)
+        if (node.source.value === state.colorSchemeImportSource) {
+          const specifiers = node.specifiers;
+
+          for (const spec of specifiers) {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              if (spec.imported.name === state.colorSchemeHookName) {
+                state.hasColorSchemeImport = true;
+                // Track the local identifier (handles aliased imports)
+                // e.g., import { useTheme as navTheme } → local name is 'navTheme'
+                state.colorSchemeLocalIdentifier = spec.local.name;
+                break;
+              }
+            }
+          }
+        }
+
         // Track tw/twStyle imports from main package (for compile-time transformation)
         if (node.source.value === "@mgcrea/react-native-tailwind") {
           const specifiers = node.specifiers;
@@ -480,7 +539,7 @@ export default function reactNativeTailwindBabelPlugin(
               // Expand scheme: into dark: and light:
               const expanded = expandSchemeModifier(
                 modifier,
-                state.customColors,
+                state.customTheme.colors ?? {},
                 state.schemeModifierConfig.darkSuffix,
                 state.schemeModifierConfig.lightSuffix,
               );
@@ -507,7 +566,7 @@ export default function reactNativeTailwindBabelPlugin(
 
             if (componentSupport?.supportedModifiers.includes("placeholder")) {
               const placeholderClasses = placeholderModifiers.map((m) => m.baseClass).join(" ");
-              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customColors);
+              const placeholderColor = parsePlaceholderClasses(placeholderClasses, state.customTheme.colors);
 
               if (placeholderColor) {
                 // Add or merge placeholderTextColor prop
@@ -561,7 +620,7 @@ export default function reactNativeTailwindBabelPlugin(
               // Add base classes
               if (hasBaseClasses) {
                 const baseClassName = baseClasses.join(" ");
-                const baseStyleObject = parseClassName(baseClassName, state.customColors);
+                const baseStyleObject = parseClassName(baseClassName, state.customTheme);
                 const baseStyleKey = generateStyleKey(baseClassName);
                 state.styleRegistry.set(baseStyleKey, baseStyleObject);
                 styleArrayElements.push(
@@ -611,7 +670,7 @@ export default function reactNativeTailwindBabelPlugin(
                 }
 
                 const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-                const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+                const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
                 const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
                 state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
 
@@ -653,7 +712,7 @@ export default function reactNativeTailwindBabelPlugin(
             // Add base classes
             if (hasBaseClasses) {
               const baseClassName = baseClasses.join(" ");
-              const baseStyleObject = parseClassName(baseClassName, state.customColors);
+              const baseStyleObject = parseClassName(baseClassName, state.customTheme);
               const baseStyleKey = generateStyleKey(baseClassName);
               state.styleRegistry.set(baseStyleKey, baseStyleObject);
               styleExpressions.push(
@@ -815,7 +874,7 @@ export default function reactNativeTailwindBabelPlugin(
             return;
           }
 
-          const styleObject = parseClassName(classNameForStyle, state.customColors);
+          const styleObject = parseClassName(classNameForStyle, state.customTheme);
           const styleKey = generateStyleKey(classNameForStyle);
           state.styleRegistry.set(styleKey, styleObject);
 

package/src/babel/utils/colorSchemeModifierProcessing.ts

@@ -3,7 +3,7 @@
  */
 
 import type * as BabelTypes from "@babel/types";
-import type { ColorSchemeModifierType, ParsedModifier } from "../../parser/index.js";
+import type { ColorSchemeModifierType, CustomTheme, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -12,7 +12,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface ColorSchemeModifierProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   stylesIdentifier: string;
   needsColorSchemeImport: boolean;
   colorSchemeVariableName: string;
@@ -38,7 +38,7 @@ export interface ColorSchemeModifierProcessingState {
 export function processColorSchemeModifiers(
   colorSchemeModifiers: ParsedModifier[],
   state: ColorSchemeModifierProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ): BabelTypes.Expression[] {
@@ -65,7 +65,7 @@ export function processColorSchemeModifiers(
   for (const [scheme, modifiers] of modifiersByScheme) {
     // Parse all classes for this color scheme together
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName(classNames, state.customColors);
+    const styleObject = parseClassName(classNames, state.customTheme);
     const styleKey = generateStyleKey(`${scheme}_${classNames}`);
 
     // Register style in the registry

package/src/babel/utils/dynamicProcessing.ts

@@ -4,7 +4,7 @@
 
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
-import type { ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ParsedModifier } from "../../parser/index.js";
 import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
 
@@ -14,7 +14,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface DynamicProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
   needsPlatformImport: boolean;
@@ -37,7 +37,7 @@ export type SplitModifierClassesFn = (className: string) => {
 export type ProcessPlatformModifiersFn = (
   modifiers: ParsedModifier[],
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ) => BabelTypes.Expression;
@@ -48,7 +48,7 @@ export type ProcessPlatformModifiersFn = (
 export type ProcessColorSchemeModifiersFn = (
   modifiers: ParsedModifier[],
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ) => BabelTypes.Expression[];
@@ -85,7 +85,7 @@ export type DynamicExpressionResult = {
 export function processDynamicExpression(
   expression: BabelTypes.Expression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -164,7 +164,7 @@ export function processDynamicExpression(
 function processTemplateLiteral(
   node: BabelTypes.TemplateLiteral,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -262,7 +262,7 @@ function processTemplateLiteral(
 function processConditionalExpression(
   node: BabelTypes.ConditionalExpression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -325,7 +325,7 @@ function processConditionalExpression(
 function processLogicalExpression(
   node: BabelTypes.LogicalExpression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -376,7 +376,7 @@ function processLogicalExpression(
 function processStringOrExpressionHelper(
   node: BabelTypes.StringLiteral | BabelTypes.Expression,
   state: DynamicProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: SplitModifierClassesFn,
   processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -405,7 +405,7 @@ function processStringOrExpressionHelper(
         // Expand scheme: into dark: and light:
         const expanded = expandSchemeModifier(
           modifier,
-          state.customColors,
+          state.customTheme.colors ?? {},
           state.schemeModifierConfig.darkSuffix ?? "-dark",
           state.schemeModifierConfig.lightSuffix ?? "-light",
         );
@@ -425,7 +425,7 @@ function processStringOrExpressionHelper(
     // Process base classes
     if (baseClasses.length > 0) {
       const baseClassName = baseClasses.join(" ");
-      const styleObject = parseClassName(baseClassName, state.customColors);
+      const styleObject = parseClassName(baseClassName, state.customTheme);
       const styleKey = generateStyleKey(baseClassName);
       state.styleRegistry.set(styleKey, styleObject);
       styleElements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));

package/src/babel/utils/modifierProcessing.ts

@@ -3,7 +3,7 @@
  */
 
 import type * as BabelTypes from "@babel/types";
-import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 import { getStatePropertyForModifier } from "./componentSupport.js";
 
@@ -13,7 +13,7 @@ import { getStatePropertyForModifier } from "./componentSupport.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface ModifierProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   stylesIdentifier: string;
 }
 
@@ -24,7 +24,7 @@ export interface ModifierProcessingState {
 export function processStaticClassNameWithModifiers(
   className: string,
   state: ModifierProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
   t: typeof BabelTypes,
@@ -35,7 +35,7 @@ export function processStaticClassNameWithModifiers(
   let baseStyleExpression: BabelTypes.Node | null = null;
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
-    const baseStyleObject = parseClassName(baseClassName, state.customColors);
+    const baseStyleObject = parseClassName(baseClassName, state.customTheme);
     const baseStyleKey = generateStyleKey(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
     baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
@@ -66,7 +66,7 @@ export function processStaticClassNameWithModifiers(
   for (const [modifierType, modifiers] of modifiersByType) {
     // Parse all modifier classes together
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-    const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+    const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
     const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
 

package/src/babel/utils/platformModifierProcessing.ts

@@ -3,7 +3,7 @@
  */
 
 import type * as BabelTypes from "@babel/types";
-import type { ParsedModifier, PlatformModifierType } from "../../parser/index.js";
+import type { CustomTheme, ParsedModifier, PlatformModifierType } from "../../parser/index.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -12,7 +12,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface PlatformModifierProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   stylesIdentifier: string;
   needsPlatformImport: boolean;
 }
@@ -34,7 +34,7 @@ export interface PlatformModifierProcessingState {
 export function processPlatformModifiers(
   platformModifiers: ParsedModifier[],
   state: PlatformModifierProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   t: typeof BabelTypes,
 ): BabelTypes.Expression {
@@ -61,7 +61,7 @@ export function processPlatformModifiers(
   for (const [platform, modifiers] of modifiersByPlatform) {
     // Parse all classes for this platform together
     const classNames = modifiers.map((m) => m.baseClass).join(" ");
-    const styleObject = parseClassName(classNames, state.customColors);
+    const styleObject = parseClassName(classNames, state.customTheme);
     const styleKey = generateStyleKey(`${platform}_${classNames}`);
 
     // Register style in the registry

package/src/babel/utils/styleInjection.ts

@@ -67,54 +67,64 @@ export function addPlatformImport(path: NodePath<BabelTypes.Program>, t: typeof
 /**
  * Add useColorScheme import to the file or merge with existing react-native import
  */
-export function addColorSchemeImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  // Check if there's already a react-native import
+export function addColorSchemeImport(
+  path: NodePath<BabelTypes.Program>,
+  importSource: string,
+  hookName: string,
+  t: typeof BabelTypes,
+): void {
+  // Check if there's already an import from the specified source
   const body = path.node.body;
-  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+  let existingValueImport: BabelTypes.ImportDeclaration | null = null;
 
   for (const statement of body) {
-    if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+    if (t.isImportDeclaration(statement) && statement.source.value === importSource) {
+      // Only consider value imports (not type-only imports which get erased)
+      if (statement.importKind !== "type") {
+        existingValueImport = statement;
+        break; // Found a value import, we can stop
+      }
     }
   }
 
-  if (reactNativeImport) {
-    // Check if useColorScheme is already imported
-    const hasUseColorScheme = reactNativeImport.specifiers.some(
+  // If we found a value import (not type-only), merge with it
+  if (existingValueImport) {
+    // Check if the hook is already imported
+    const hasHook = existingValueImport.specifiers.some(
       (spec) =>
-        t.isImportSpecifier(spec) &&
-        spec.imported.type === "Identifier" &&
-        spec.imported.name === "useColorScheme",
+        t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === hookName,
     );
 
-    if (!hasUseColorScheme) {
-      // Add useColorScheme to existing react-native import
-      reactNativeImport.specifiers.push(
-        t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme")),
-      );
+    if (!hasHook) {
+      // Add hook to existing value import
+      existingValueImport.specifiers.push(t.importSpecifier(t.identifier(hookName), t.identifier(hookName)));
     }
   } else {
-    // Create new react-native import with useColorScheme
+    // No value import exists - create a new one
+    // (Don't merge with type-only imports as they get erased by Babel/TypeScript)
     const importDeclaration = t.importDeclaration(
-      [t.importSpecifier(t.identifier("useColorScheme"), t.identifier("useColorScheme"))],
-      t.stringLiteral("react-native"),
+      [t.importSpecifier(t.identifier(hookName), t.identifier(hookName))],
+      t.stringLiteral(importSource),
     );
     path.unshiftContainer("body", importDeclaration);
   }
 }
 
 /**
- * Inject useColorScheme hook call at the top of a function component
+ * Inject color scheme hook call at the top of a function component
  *
  * @param functionPath - Path to the function component
  * @param colorSchemeVariableName - Name for the color scheme variable
+ * @param hookName - Name of the hook to call (e.g., 'useColorScheme')
+ * @param localIdentifier - Local identifier if hook is already imported with an alias
  * @param t - Babel types
  * @returns true if hook was injected, false if already exists
  */
 export function injectColorSchemeHook(
   functionPath: NodePath<BabelTypes.Function>,
   colorSchemeVariableName: string,
+  hookName: string,
+  localIdentifier: string | undefined,
   t: typeof BabelTypes,
 ): boolean {
   let body = functionPath.node.body;
@@ -151,11 +161,16 @@ export function injectColorSchemeHook(
     return false; // Already injected
   }
 
-  // Create: const _twColorScheme = useColorScheme();
+  // Use the local identifier if hook was already imported with an alias,
+  // otherwise use the configured hook name
+  // e.g., import { useTheme as navTheme } → call navTheme()
+  const identifierToCall = localIdentifier ?? hookName;
+
+  // Create: const _twColorScheme = useColorScheme(); (or aliased name if already imported)
   const hookCall = t.variableDeclaration("const", [
     t.variableDeclarator(
       t.identifier(colorSchemeVariableName),
-      t.callExpression(t.identifier("useColorScheme"), []),
+      t.callExpression(t.identifier(identifierToCall), []),
     ),
   ]);
 

package/src/babel/utils/twProcessing.ts

@@ -4,7 +4,7 @@
 
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
-import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
 import { expandSchemeModifier, isSchemeModifier } from "../../parser/index.js";
 import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
@@ -15,7 +15,7 @@ import type { StyleObject } from "../../types/core.js";
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export interface TwProcessingState {
   styleRegistry: Map<string, StyleObject>;
-  customColors: Record<string, string>;
+  customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
 }
@@ -28,7 +28,7 @@ export function processTwCall(
   className: string,
   path: NodePath,
   state: TwProcessingState,
-  parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
+  parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
   t: typeof BabelTypes,
@@ -42,7 +42,7 @@ export function processTwCall(
       // Expand scheme: into dark: and light:
       const expanded = expandSchemeModifier(
         modifier,
-        state.customColors,
+        state.customTheme.colors ?? {},
         state.schemeModifierConfig.darkSuffix ?? "-dark",
         state.schemeModifierConfig.lightSuffix ?? "-light",
       );
@@ -59,7 +59,7 @@ export function processTwCall(
   // Parse and add base styles
   if (baseClasses.length > 0) {
     const baseClassName = baseClasses.join(" ");
-    const baseStyleObject = parseClassName(baseClassName, state.customColors);
+    const baseStyleObject = parseClassName(baseClassName, state.customTheme);
     const baseStyleKey = generateStyleKey(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
 
@@ -89,7 +89,7 @@ export function processTwCall(
   // Add modifier styles
   for (const [modifierType, modifiers] of modifiersByType) {
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
-    const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
+    const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
     const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
     state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
 

package/src/parser/index.ts

@@ -14,18 +14,26 @@ import { parseSpacing } from "./spacing";
 import { parseTransform } from "./transforms";
 import { parseTypography } from "./typography";
 
+/**
+ * Custom theme configuration (subset of tailwind.config theme extensions)
+ */
+export type CustomTheme = {
+  colors?: Record<string, string>;
+  fontFamily?: Record<string, string>;
+};
+
 /**
  * Parse a className string and return a React Native style object
  * @param className - Space-separated class names
- * @param customColors - Optional custom colors from tailwind.config
+ * @param customTheme - Optional custom theme from tailwind.config
  * @returns React Native style object
  */
-export function parseClassName(className: string, customColors?: Record<string, string>): StyleObject {
+export function parseClassName(className: string, customTheme?: CustomTheme): StyleObject {
   const classes = className.split(/\s+/).filter(Boolean);
   const style: StyleObject = {};
 
   for (const cls of classes) {
-    const parsedStyle = parseClass(cls, customColors);
+    const parsedStyle = parseClass(cls, customTheme);
     Object.assign(style, parsedStyle);
   }
 
@@ -35,19 +43,19 @@ export function parseClassName(className: string, customColors?: Record<string,
 /**
  * Parse a single class name
  * @param cls - Single class name
- * @param customColors - Optional custom colors from tailwind.config
+ * @param customTheme - Optional custom theme from tailwind.config
  * @returns React Native style object
  */
-export function parseClass(cls: string, customColors?: Record<string, string>): StyleObject {
+export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject {
   // Try each parser in order
   // Note: parseBorder must come before parseColor to avoid border-[3px] being parsed as a color
-  // parseColor gets custom colors, others don't need it
+  // parseColor and parseTypography get custom theme, others don't need it
   const parsers: Array<(cls: string) => StyleObject | null> = [
     parseSpacing,
     parseBorder,
-    (cls: string) => parseColor(cls, customColors),
+    (cls: string) => parseColor(cls, customTheme?.colors),
     parseLayout,
-    parseTypography,
+    (cls: string) => parseTypography(cls, customTheme?.fontFamily),
     parseSizing,
     parseShadow,
     parseAspectRatio,