@octopus-community/react-native 1.0.2 → 1.0.4

package/lib/module/initialize.js

@@ -1,9 +1,36 @@
 "use strict";
 
 import { OctopusReactNativeSdk } from "./internals/nativeModule.js";
+import { Appearance } from 'react-native';
+import { colorSchemeManager } from "./internals/colorSchemeManager.js";
+import { parseFontConfig } from "./internals/fontParser.js";
+
+/**
+ * Color set for a specific appearance mode (light or dark).
+ */
+
+/**
+ * Font type options for unified cross-platform font configuration.
+ */
+
+/**
+ * Font size configuration for different text types.
+ */
+
+/**
+ * Font configuration for a specific text type.
+ */
+
+/**
+ * Font configuration for customizing the Octopus UI typography.
+ */
 
 /**
  * Theme configuration for customizing the Octopus UI appearance.
+ *
+ * Supports two approaches:
+ * 1. Single color set (backward compatible) - colors are applied to both light and dark modes
+ * 2. Dual mode colors - separate color sets for light and dark modes
  */
 
 /**
@@ -37,6 +64,28 @@ import { OctopusReactNativeSdk } from "./internals/nativeModule.js";
  * ```
  */
 export function initialize(params) {
-  return OctopusReactNativeSdk.initialize(params);
+  // Automatically detect the current color scheme and add it to the params
+  const colorScheme = Appearance.getColorScheme();
+
+  // Pre-process font configuration to avoid duplication in native layers
+  const processedTheme = params.theme ? {
+    ...params.theme,
+    fonts: params.theme.fonts ? {
+      ...params.theme.fonts,
+      parsedConfig: parseFontConfig(params.theme.fonts)
+    } : undefined
+  } : undefined;
+  const paramsWithColorScheme = {
+    ...params,
+    theme: processedTheme,
+    colorScheme: colorScheme || undefined
+  };
+
+  // Set the theme in the color scheme manager for dual-mode support
+  colorSchemeManager.setTheme(processedTheme || null);
+
+  // Start listening to color scheme changes for automatic updates
+  colorSchemeManager.startListening();
+  return OctopusReactNativeSdk.initialize(paramsWithColorScheme);
 }
 //# sourceMappingURL=initialize.js.map

package/lib/module/initialize.js.map

@@ -1 +1 @@
-{"version":3,"names":["OctopusReactNativeSdk","initialize","params"],"sourceRoot":"../../src","sources":["initialize.ts"],"mappings":";;AAAA,SAASA,qBAAqB,QAAQ,6BAA0B;;AAIhE;AACA;AACA;;AAoBA;AACA;AACA;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAACC,MAAwB,EAAiB;EAClE,OAAOF,qBAAqB,CAACC,UAAU,CAACC,MAAM,CAAC;AACjD","ignoreList":[]}
+{"version":3,"names":["OctopusReactNativeSdk","Appearance","colorSchemeManager","parseFontConfig","initialize","params","colorScheme","getColorScheme","processedTheme","theme","fonts","parsedConfig","undefined","paramsWithColorScheme","setTheme","startListening"],"sourceRoot":"../../src","sources":["initialize.ts"],"mappings":";;AAAA,SAASA,qBAAqB,QAAQ,6BAA0B;AAGhE,SAASC,UAAU,QAAQ,cAAc;AACzC,SAASC,kBAAkB,QAAQ,mCAAgC;AACnE,SAASC,eAAe,QAA+B,2BAAwB;;AAE/E;AACA;AACA;;AAYA;AACA;AACA;;AAGA;AACA;AACA;;AAMA;AACA;AACA;;AAQA;AACA;AACA;;AA0BA;AACA;AACA;AACA;AACA;AACA;AACA;;AAyBA;AACA;AACA;;AAwBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,UAAUA,CAACC,MAAwB,EAAiB;EAClE;EACA,MAAMC,WAAW,GAAGL,UAAU,CAACM,cAAc,CAAC,CAAC;;EAE/C;EACA,MAAMC,cAAc,GAAGH,MAAM,CAACI,KAAK,GAC/B;IACE,GAAGJ,MAAM,CAACI,KAAK;IACfC,KAAK,EAAEL,MAAM,CAACI,KAAK,CAACC,KAAK,GACrB;MACE,GAAGL,MAAM,CAACI,KAAK,CAACC,KAAK;MACrBC,YAAY,EAAER,eAAe,CAACE,MAAM,CAACI,KAAK,CAACC,KAAK;IAClD,CAAC,GACDE;EACN,CAAC,GACDA,SAAS;EAEb,MAAMC,qBAAqB,GAAG;IAC5B,GAAGR,MAAM;IACTI,KAAK,EAAED,cAAc;IACrBF,WAAW,EAAEA,WAAW,IAAIM;EAC9B,CAAC;;EAED;EACAV,kBAAkB,CAACY,QAAQ,CAACN,cAAc,IAAI,IAAI,CAAC;;EAEnD;EACAN,kBAAkB,CAACa,cAAc,CAAC,CAAC;EAEnC,OAAOf,qBAAqB,CAACI,UAAU,CAACS,qBAAqB,CAAC;AAChE","ignoreList":[]}

package/lib/module/internals/colorSchemeManager.js

@@ -0,0 +1,105 @@
+"use strict";
+
+import { Appearance, AppState } from 'react-native';
+import { OctopusReactNativeSdk } from "./nativeModule.js";
+let isListening = false;
+let currentColorScheme = null;
+
+/**
+ * Internal color scheme manager that automatically handles appearance changes
+ * and updates the native modules accordingly.
+ */
+export class ColorSchemeManager {
+  appearanceSubscription = null;
+  appStateSubscription = null;
+  constructor() {}
+  static getInstance() {
+    if (!ColorSchemeManager.instance) {
+      ColorSchemeManager.instance = new ColorSchemeManager();
+    }
+    return ColorSchemeManager.instance;
+  }
+
+  /**
+   * Set the current theme for color scheme management
+   * Note: This is kept for API compatibility but theme updates are not used
+   * when the Octopus UI is open since the React Native app is backgrounded.
+   */
+  setTheme(_theme) {
+    // Theme is set during initialization and applied when UI opens
+    // No need to store it here since updates can't happen while UI is open
+  }
+
+  /**
+   * Start listening to appearance changes and automatically update native modules
+   */
+  startListening() {
+    if (isListening) {
+      return;
+    }
+    isListening = true;
+    currentColorScheme = Appearance.getColorScheme();
+
+    // Listen to appearance changes
+    this.appearanceSubscription = Appearance.addChangeListener(({
+      colorScheme
+    }) => {
+      currentColorScheme = colorScheme;
+      this.updateNativeColorScheme();
+    });
+
+    // Listen to app state changes to ensure we have the latest color scheme
+    this.appStateSubscription = AppState.addEventListener('change', nextAppState => {
+      // Only check color scheme when app becomes active (foreground)
+      if (nextAppState === 'active') {
+        const newColorScheme = Appearance.getColorScheme();
+        if (newColorScheme !== currentColorScheme) {
+          currentColorScheme = newColorScheme;
+          this.updateNativeColorScheme();
+        }
+      }
+    });
+  }
+
+  /**
+   * Stop listening to appearance changes
+   */
+  stopListening() {
+    if (this.appearanceSubscription) {
+      this.appearanceSubscription.remove();
+      this.appearanceSubscription = null;
+    }
+    if (this.appStateSubscription) {
+      this.appStateSubscription.remove();
+      this.appStateSubscription = null;
+    }
+    isListening = false;
+  }
+
+  /**
+   * Get the current color scheme
+   */
+  getCurrentColorScheme() {
+    return currentColorScheme;
+  }
+
+  /**
+   * Update the native modules with the current color scheme
+   * Note: This is only called when the app becomes active (foreground).
+   * When the Octopus UI is open, the React Native app is backgrounded,
+   * so theme updates are not possible during UI display.
+   */
+  updateNativeColorScheme() {
+    // Both platforms handle theme updates when the app becomes active
+    // iOS uses adaptive colors, Android applies the theme when UI reopens
+    try {
+      OctopusReactNativeSdk.updateColorScheme(currentColorScheme || undefined);
+    } catch (error) {
+      this.stopListening();
+    }
+  }
+}
+
+// Export singleton instance
+export const colorSchemeManager = ColorSchemeManager.getInstance();
+//# sourceMappingURL=colorSchemeManager.js.map

package/lib/module/internals/colorSchemeManager.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Appearance","AppState","OctopusReactNativeSdk","isListening","currentColorScheme","ColorSchemeManager","appearanceSubscription","appStateSubscription","constructor","getInstance","instance","setTheme","_theme","startListening","getColorScheme","addChangeListener","colorScheme","updateNativeColorScheme","addEventListener","nextAppState","newColorScheme","stopListening","remove","getCurrentColorScheme","updateColorScheme","undefined","error","colorSchemeManager"],"sourceRoot":"../../../src","sources":["internals/colorSchemeManager.ts"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,QAAQ,QAAQ,cAAc;AACnD,SAASC,qBAAqB,QAAQ,mBAAgB;AAGtD,IAAIC,WAAW,GAAG,KAAK;AACvB,IAAIC,kBAA6C,GAAG,IAAI;;AAExD;AACA;AACA;AACA;AACA,OAAO,MAAMC,kBAAkB,CAAC;EAEtBC,sBAAsB,GAAQ,IAAI;EAClCC,oBAAoB,GAAQ,IAAI;EAEhCC,WAAWA,CAAA,EAAG,CAAC;EAEvB,OAAOC,WAAWA,CAAA,EAAuB;IACvC,IAAI,CAACJ,kBAAkB,CAACK,QAAQ,EAAE;MAChCL,kBAAkB,CAACK,QAAQ,GAAG,IAAIL,kBAAkB,CAAC,CAAC;IACxD;IACA,OAAOA,kBAAkB,CAACK,QAAQ;EACpC;;EAEA;AACF;AACA;AACA;AACA;EACEC,QAAQA,CAACC,MAA2B,EAAQ;IAC1C;IACA;EAAA;;EAGF;AACF;AACA;EACEC,cAAcA,CAAA,EAAS;IACrB,IAAIV,WAAW,EAAE;MACf;IACF;IAEAA,WAAW,GAAG,IAAI;IAClBC,kBAAkB,GAAGJ,UAAU,CAACc,cAAc,CAAC,CAAC;;IAEhD;IACA,IAAI,CAACR,sBAAsB,GAAGN,UAAU,CAACe,iBAAiB,CACxD,CAAC;MAAEC;IAAY,CAAC,KAAK;MACnBZ,kBAAkB,GAAGY,WAAW;MAChC,IAAI,CAACC,uBAAuB,CAAC,CAAC;IAChC,CACF,CAAC;;IAED;IACA,IAAI,CAACV,oBAAoB,GAAGN,QAAQ,CAACiB,gBAAgB,CACnD,QAAQ,EACPC,YAAY,IAAK;MAChB;MACA,IAAIA,YAAY,KAAK,QAAQ,EAAE;QAC7B,MAAMC,cAAc,GAAGpB,UAAU,CAACc,cAAc,CAAC,CAAC;QAClD,IAAIM,cAAc,KAAKhB,kBAAkB,EAAE;UACzCA,kBAAkB,GAAGgB,cAAc;UACnC,IAAI,CAACH,uBAAuB,CAAC,CAAC;QAChC;MACF;IACF,CACF,CAAC;EACH;;EAEA;AACF;AACA;EACEI,aAAaA,CAAA,EAAS;IACpB,IAAI,IAAI,CAACf,sBAAsB,EAAE;MAC/B,IAAI,CAACA,sBAAsB,CAACgB,MAAM,CAAC,CAAC;MACpC,IAAI,CAAChB,sBAAsB,GAAG,IAAI;IACpC;IAEA,IAAI,IAAI,CAACC,oBAAoB,EAAE;MAC7B,IAAI,CAACA,oBAAoB,CAACe,MAAM,CAAC,CAAC;MAClC,IAAI,CAACf,oBAAoB,GAAG,IAAI;IAClC;IAEAJ,WAAW,GAAG,KAAK;EACrB;;EAEA;AACF;AACA;EACEoB,qBAAqBA,CAAA,EAA8B;IACjD,OAAOnB,kBAAkB;EAC3B;;EAEA;AACF;AACA;AACA;AACA;AACA;EACUa,uBAAuBA,CAAA,EAAS;IACtC;IACA;IACA,IAAI;MACFf,qBAAqB,CAACsB,iBAAiB,CAACpB,kBAAkB,IAAIqB,SAAS,CAAC;IAC1E,CAAC,CAAC,OAAOC,KAAK,EAAE;MACd,IAAI,CAACL,aAAa,CAAC,CAAC;IACtB;EACF;AACF;;AAEA;AACA,OAAO,MAAMM,kBAAkB,GAAGtB,kBAAkB,CAACI,WAAW,CAAC,CAAC","ignoreList":[]}

package/lib/module/internals/fontParser.js

@@ -0,0 +1,48 @@
+"use strict";
+
+/**
+ * Parsed font configuration for native platforms
+ */
+
+/**
+ * Parse font configuration from the theme and return a simplified structure
+ * that can be easily consumed by native platforms.
+ *
+ * This centralizes the font parsing logic to avoid duplication across platforms.
+ */
+export function parseFontConfig(fonts) {
+  if (!fonts?.textStyles) {
+    return null;
+  }
+  const textStyles = {};
+
+  // Define the text style keys that are supported
+  const supportedTextStyles = ['title1', 'title2', 'body1', 'body2', 'caption1', 'caption2'];
+  for (const key of supportedTextStyles) {
+    const textStyle = fonts.textStyles[key];
+    if (textStyle) {
+      const parsedStyle = {};
+
+      // Parse font type
+      if (textStyle.fontType) {
+        parsedStyle.fontType = textStyle.fontType;
+      }
+
+      // Parse font size
+      if (textStyle.fontSize?.size) {
+        parsedStyle.fontSize = textStyle.fontSize.size;
+      }
+
+      // Only include the style if it has at least one property
+      if (parsedStyle.fontType || parsedStyle.fontSize) {
+        textStyles[key] = parsedStyle;
+      }
+    }
+  }
+
+  // Return null if no text styles were parsed
+  return Object.keys(textStyles).length > 0 ? {
+    textStyles
+  } : null;
+}
+//# sourceMappingURL=fontParser.js.map

package/lib/module/internals/fontParser.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["parseFontConfig","fonts","textStyles","supportedTextStyles","key","textStyle","parsedStyle","fontType","fontSize","size","Object","keys","length"],"sourceRoot":"../../../src","sources":["internals/fontParser.ts"],"mappings":";;AAEA;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASA,eAAeA,CAACC,KAAoB,EAA2B;EAC7E,IAAI,CAACA,KAAK,EAAEC,UAAU,EAAE;IACtB,OAAO,IAAI;EACb;EAEA,MAAMA,UAAoE,GACxE,CAAC,CAAC;;EAEJ;EACA,MAAMC,mBAAmB,GAAG,CAC1B,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,UAAU,EACV,UAAU,CACX;EAED,KAAK,MAAMC,GAAG,IAAID,mBAAmB,EAAE;IACrC,MAAME,SAAS,GAAGJ,KAAK,CAACC,UAAU,CAACE,GAAG,CAAkC;IACxE,IAAIC,SAAS,EAAE;MACb,MAAMC,WAAqD,GAAG,CAAC,CAAC;;MAEhE;MACA,IAAID,SAAS,CAACE,QAAQ,EAAE;QACtBD,WAAW,CAACC,QAAQ,GAAGF,SAAS,CAACE,QAAQ;MAC3C;;MAEA;MACA,IAAIF,SAAS,CAACG,QAAQ,EAAEC,IAAI,EAAE;QAC5BH,WAAW,CAACE,QAAQ,GAAGH,SAAS,CAACG,QAAQ,CAACC,IAAI;MAChD;;MAEA;MACA,IAAIH,WAAW,CAACC,QAAQ,IAAID,WAAW,CAACE,QAAQ,EAAE;QAChDN,UAAU,CAACE,GAAG,CAAC,GAAGE,WAAW;MAC/B;IACF;EACF;;EAEA;EACA,OAAOI,MAAM,CAACC,IAAI,CAACT,UAAU,CAAC,CAACU,MAAM,GAAG,CAAC,GAAG;IAAEV;EAAW,CAAC,GAAG,IAAI;AACnE","ignoreList":[]}

package/lib/typescript/src/initialize.d.ts

@@ -1,20 +1,88 @@
 import type { UserProfileField } from './types/userProfileField';
 import type { ImageResolvedAssetSource } from 'react-native';
+import { type ParsedFontConfig } from './internals/fontParser';
+/**
+ * Color set for a specific appearance mode (light or dark).
+ */
+export interface OctopusColorSet {
+    /** Primary color set for branding (hex format: #FF6B35 or FF6B35) */
+    primary?: string;
+    /** Primary low contrast color (lighter variation of primary) (hex format: #FF6B35 or FF6B35) */
+    primaryLowContrast?: string;
+    /** High contrast variation of primary color (hex format: #FF6B35 or FF6B35) */
+    primaryHighContrast?: string;
+    /** Color for content displayed over the primary color (hex format: #FF6B35 or FF6B35) */
+    onPrimary?: string;
+}
+/**
+ * Font type options for unified cross-platform font configuration.
+ */
+export type OctopusFontType = 'serif' | 'monospace' | 'default';
+/**
+ * Font size configuration for different text types.
+ */
+export interface OctopusFontSize {
+    /** Font size in points (will be converted to platform-specific units) */
+    size?: number;
+}
+/**
+ * Font configuration for a specific text type.
+ */
+export interface OctopusTextStyle {
+    /** Font type: serif, monospace, or default (uses system default) */
+    fontType?: OctopusFontType;
+    /** Font size configuration */
+    fontSize?: OctopusFontSize;
+}
+/**
+ * Font configuration for customizing the Octopus UI typography.
+ */
+export interface OctopusFonts {
+    /**
+     * Unified font configuration for different text types.
+     */
+    textStyles?: {
+        /** Configuration for title1 text */
+        title1?: OctopusTextStyle;
+        /** Configuration for title2 text */
+        title2?: OctopusTextStyle;
+        /** Configuration for body1 text */
+        body1?: OctopusTextStyle;
+        /** Configuration for body2 text */
+        body2?: OctopusTextStyle;
+        /** Configuration for caption1 text */
+        caption1?: OctopusTextStyle;
+        /** Configuration for caption2 text */
+        caption2?: OctopusTextStyle;
+    };
+    /**
+     * Pre-processed font configuration for native platforms.
+     * This is automatically generated and should not be set manually.
+     */
+    parsedConfig?: ParsedFontConfig | null;
+}
 /**
  * Theme configuration for customizing the Octopus UI appearance.
+ *
+ * Supports two approaches:
+ * 1. Single color set (backward compatible) - colors are applied to both light and dark modes
+ * 2. Dual mode colors - separate color sets for light and dark modes
  */
 export interface OctopusTheme {
-    /** Color customization options */
-    colors?: {
-        /** Primary color set for branding (hex format: #FF6B35 or FF6B35) */
-        primary?: string;
-        /** Primary low contrast color (lighter variation of primary) (hex format: #FF6B35 or FF6B35) */
-        primaryLowContrast?: string;
-        /** High contrast variation of primary color (hex format: #FF6B35 or FF6B35) */
-        primaryHighContrast?: string;
-        /** Color for content displayed over the primary color (hex format: #FF6B35 or FF6B35) */
-        onPrimary?: string;
+    /**
+     * Color customization options.
+     *
+     * For backward compatibility, you can pass a single color set that will be used for both light and dark modes.
+     * For enhanced theming, you can pass separate color sets for light and dark modes.
+     */
+    colors?: OctopusColorSet | {
+        /** Colors for light mode */
+        light: OctopusColorSet;
+        /** Colors for dark mode */
+        dark: OctopusColorSet;
     };
+    /** Font customization options */
+    fonts?: OctopusFonts;
     /** Logo customization */
     logo?: {
         /** Local image resource - use Image.resolveAssetSource(require('./path/to/image.png')) */

package/lib/typescript/src/initialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../../../src/initialize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAE7D;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,kCAAkC;IAClC,MAAM,CAAC,EAAE;QACP,qEAAqE;QACrE,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,gGAAgG;QAChG,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,+EAA+E;QAC/E,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,yFAAyF;QACzF,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,yBAAyB;IACzB,IAAI,CAAC,EAAE;QACL,0FAA0F;QAC1F,KAAK,CAAC,EAAE,wBAAwB,CAAC;KAClC,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EACV;QACE,6BAA6B;QAC7B,IAAI,EAAE,KAAK,CAAC;QACZ,iEAAiE;QACjE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;KACtC,GACD;QACE,0CAA0C;QAC1C,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACN,sDAAsD;IACtD,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CAElE"}
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../../../src/initialize.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAG7D,OAAO,EAAmB,KAAK,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAEhF;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gGAAgG;IAChG,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,+EAA+E;IAC/E,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,yFAAyF;IACzF,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;AAEhE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,oCAAoC;QACpC,MAAM,CAAC,EAAE,gBAAgB,CAAC;QAC1B,oCAAoC;QACpC,MAAM,CAAC,EAAE,gBAAgB,CAAC;QAC1B,mCAAmC;QACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC;QACzB,mCAAmC;QACnC,KAAK,CAAC,EAAE,gBAAgB,CAAC;QACzB,sCAAsC;QACtC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;QAC5B,sCAAsC;QACtC,QAAQ,CAAC,EAAE,gBAAgB,CAAC;KAC7B,CAAC;IACF;;;OAGG;IACH,YAAY,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;CACxC;AAED;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,MAAM,CAAC,EACH,eAAe,GACf;QACE,4BAA4B;QAC5B,KAAK,EAAE,eAAe,CAAC;QACvB,2BAA2B;QAC3B,IAAI,EAAE,eAAe,CAAC;KACvB,CAAC;IACN,iCAAiC;IACjC,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,yBAAyB;IACzB,IAAI,CAAC,EAAE;QACL,0FAA0F;QAC1F,KAAK,CAAC,EAAE,wBAAwB,CAAC;KAClC,CAAC;CACH;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,+DAA+D;IAC/D,MAAM,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,cAAc,EACV;QACE,6BAA6B;QAC7B,IAAI,EAAE,KAAK,CAAC;QACZ,iEAAiE;QACjE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;KACtC,GACD;QACE,0CAA0C;QAC1C,IAAI,EAAE,SAAS,CAAC;KACjB,CAAC;IACN,sDAAsD;IACtD,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,CA8BlE"}

package/lib/typescript/src/internals/colorSchemeManager.d.ts

@@ -0,0 +1,39 @@
+import type { OctopusTheme } from '../initialize';
+/**
+ * Internal color scheme manager that automatically handles appearance changes
+ * and updates the native modules accordingly.
+ */
+export declare class ColorSchemeManager {
+    private static instance;
+    private appearanceSubscription;
+    private appStateSubscription;
+    private constructor();
+    static getInstance(): ColorSchemeManager;
+    /**
+     * Set the current theme for color scheme management
+     * Note: This is kept for API compatibility but theme updates are not used
+     * when the Octopus UI is open since the React Native app is backgrounded.
+     */
+    setTheme(_theme: OctopusTheme | null): void;
+    /**
+     * Start listening to appearance changes and automatically update native modules
+     */
+    startListening(): void;
+    /**
+     * Stop listening to appearance changes
+     */
+    stopListening(): void;
+    /**
+     * Get the current color scheme
+     */
+    getCurrentColorScheme(): string | null | undefined;
+    /**
+     * Update the native modules with the current color scheme
+     * Note: This is only called when the app becomes active (foreground).
+     * When the Octopus UI is open, the React Native app is backgrounded,
+     * so theme updates are not possible during UI display.
+     */
+    private updateNativeColorScheme;
+}
+export declare const colorSchemeManager: ColorSchemeManager;
+//# sourceMappingURL=colorSchemeManager.d.ts.map

package/lib/typescript/src/internals/colorSchemeManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorSchemeManager.d.ts","sourceRoot":"","sources":["../../../../src/internals/colorSchemeManager.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAKlD;;;GAGG;AACH,qBAAa,kBAAkB;IAC7B,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAqB;IAC5C,OAAO,CAAC,sBAAsB,CAAa;IAC3C,OAAO,CAAC,oBAAoB,CAAa;IAEzC,OAAO;IAEP,MAAM,CAAC,WAAW,IAAI,kBAAkB;IAOxC;;;;OAIG;IACH,QAAQ,CAAC,MAAM,EAAE,YAAY,GAAG,IAAI,GAAG,IAAI;IAK3C;;OAEG;IACH,cAAc,IAAI,IAAI;IAgCtB;;OAEG;IACH,aAAa,IAAI,IAAI;IAcrB;;OAEG;IACH,qBAAqB,IAAI,MAAM,GAAG,IAAI,GAAG,SAAS;IAIlD;;;;;OAKG;IACH,OAAO,CAAC,uBAAuB;CAShC;AAGD,eAAO,MAAM,kBAAkB,oBAAmC,CAAC"}

package/lib/typescript/src/internals/fontParser.d.ts

@@ -0,0 +1,18 @@
+import type { OctopusFonts } from '../initialize';
+/**
+ * Parsed font configuration for native platforms
+ */
+export interface ParsedFontConfig {
+    textStyles: Record<string, {
+        fontType?: string;
+        fontSize?: number;
+    }>;
+}
+/**
+ * Parse font configuration from the theme and return a simplified structure
+ * that can be easily consumed by native platforms.
+ *
+ * This centralizes the font parsing logic to avoid duplication across platforms.
+ */
+export declare function parseFontConfig(fonts?: OctopusFonts): ParsedFontConfig | null;
+//# sourceMappingURL=fontParser.d.ts.map

package/lib/typescript/src/internals/fontParser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontParser.d.ts","sourceRoot":"","sources":["../../../../src/internals/fontParser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAChB,MAAM,EACN;QACE,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;KACnB,CACF,CAAC;CACH;AAED;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,YAAY,GAAG,gBAAgB,GAAG,IAAI,CA0C7E"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octopus-community/react-native",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "React Native module for the Octopus Community SDK",
   "source": "./src/index.ts",
   "main": "./lib/module/index.js",

package/src/initialize.ts

@@ -1,22 +1,99 @@
 import { OctopusReactNativeSdk } from './internals/nativeModule';
 import type { UserProfileField } from './types/userProfileField';
 import type { ImageResolvedAssetSource } from 'react-native';
+import { Appearance } from 'react-native';
+import { colorSchemeManager } from './internals/colorSchemeManager';
+import { parseFontConfig, type ParsedFontConfig } from './internals/fontParser';
+
+/**
+ * Color set for a specific appearance mode (light or dark).
+ */
+export interface OctopusColorSet {
+  /** Primary color set for branding (hex format: #FF6B35 or FF6B35) */
+  primary?: string;
+  /** Primary low contrast color (lighter variation of primary) (hex format: #FF6B35 or FF6B35) */
+  primaryLowContrast?: string;
+  /** High contrast variation of primary color (hex format: #FF6B35 or FF6B35) */
+  primaryHighContrast?: string;
+  /** Color for content displayed over the primary color (hex format: #FF6B35 or FF6B35) */
+  onPrimary?: string;
+}
+
+/**
+ * Font type options for unified cross-platform font configuration.
+ */
+export type OctopusFontType = 'serif' | 'monospace' | 'default';
+
+/**
+ * Font size configuration for different text types.
+ */
+export interface OctopusFontSize {
+  /** Font size in points (will be converted to platform-specific units) */
+  size?: number;
+}
+
+/**
+ * Font configuration for a specific text type.
+ */
+export interface OctopusTextStyle {
+  /** Font type: serif, monospace, or default (uses system default) */
+  fontType?: OctopusFontType;
+  /** Font size configuration */
+  fontSize?: OctopusFontSize;
+}
+
+/**
+ * Font configuration for customizing the Octopus UI typography.
+ */
+export interface OctopusFonts {
+  /**
+   * Unified font configuration for different text types.
+   */
+  textStyles?: {
+    /** Configuration for title1 text */
+    title1?: OctopusTextStyle;
+    /** Configuration for title2 text */
+    title2?: OctopusTextStyle;
+    /** Configuration for body1 text */
+    body1?: OctopusTextStyle;
+    /** Configuration for body2 text */
+    body2?: OctopusTextStyle;
+    /** Configuration for caption1 text */
+    caption1?: OctopusTextStyle;
+    /** Configuration for caption2 text */
+    caption2?: OctopusTextStyle;
+  };
+  /**
+   * Pre-processed font configuration for native platforms.
+   * This is automatically generated and should not be set manually.
+   */
+  parsedConfig?: ParsedFontConfig | null;
+}
 
 /**
  * Theme configuration for customizing the Octopus UI appearance.
+ *
+ * Supports two approaches:
+ * 1. Single color set (backward compatible) - colors are applied to both light and dark modes
+ * 2. Dual mode colors - separate color sets for light and dark modes
  */
 export interface OctopusTheme {
-  /** Color customization options */
-  colors?: {
-    /** Primary color set for branding (hex format: #FF6B35 or FF6B35) */
-    primary?: string;
-    /** Primary low contrast color (lighter variation of primary) (hex format: #FF6B35 or FF6B35) */
-    primaryLowContrast?: string;
-    /** High contrast variation of primary color (hex format: #FF6B35 or FF6B35) */
-    primaryHighContrast?: string;
-    /** Color for content displayed over the primary color (hex format: #FF6B35 or FF6B35) */
-    onPrimary?: string;
-  };
+  /**
+   * Color customization options.
+   *
+   * For backward compatibility, you can pass a single color set that will be used for both light and dark modes.
+   * For enhanced theming, you can pass separate color sets for light and dark modes.
+   */
+  colors?:
+    | OctopusColorSet
+    | {
+        /** Colors for light mode */
+        light: OctopusColorSet;
+        /** Colors for dark mode */
+        dark: OctopusColorSet;
+      };
+  /** Font customization options */
+  fonts?: OctopusFonts;
   /** Logo customization */
   logo?: {
     /** Local image resource - use Image.resolveAssetSource(require('./path/to/image.png')) */
@@ -77,5 +154,33 @@ export interface InitializeParams {
  * ```
  */
 export function initialize(params: InitializeParams): Promise<void> {
-  return OctopusReactNativeSdk.initialize(params);
+  // Automatically detect the current color scheme and add it to the params
+  const colorScheme = Appearance.getColorScheme();
+
+  // Pre-process font configuration to avoid duplication in native layers
+  const processedTheme = params.theme
+    ? {
+        ...params.theme,
+        fonts: params.theme.fonts
+          ? {
+              ...params.theme.fonts,
+              parsedConfig: parseFontConfig(params.theme.fonts),
+            }
+          : undefined,
+      }
+    : undefined;
+
+  const paramsWithColorScheme = {
+    ...params,
+    theme: processedTheme,
+    colorScheme: colorScheme || undefined,
+  };
+
+  // Set the theme in the color scheme manager for dual-mode support
+  colorSchemeManager.setTheme(processedTheme || null);
+
+  // Start listening to color scheme changes for automatic updates
+  colorSchemeManager.startListening();
+
+  return OctopusReactNativeSdk.initialize(paramsWithColorScheme);
 }