@umituz/react-native-design-system 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Universal design system for React Native apps - Domain-Driven Design architecture with Material Design 3 components",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/presentation/organisms/ScreenLayout.tsx

@@ -30,6 +30,7 @@ import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
 import { SafeAreaView, Edge } from 'react-native-safe-area-context';
 import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
 import { LoadingState } from '../loading/presentation/components/LoadingState';
+import type { ThemeMode } from '../tokens/core/TokenFactory';
 
 export interface ScreenLayoutProps {
   /**
@@ -111,6 +112,12 @@ export interface ScreenLayoutProps {
    * Useful for screens with inputs
    */
   keyboardAvoiding?: boolean;
+
+  /**
+   * Theme mode for design tokens (default: 'light')
+   * Pass 'dark' for dark mode styling
+   */
+  themeMode?: ThemeMode;
 }
 
 export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
@@ -128,8 +135,9 @@ export const ScreenLayout: React.FC<ScreenLayoutProps> = ({
   testID,
   hideScrollIndicator = false,
   keyboardAvoiding = false,
+  themeMode = 'light',
 }) => {
-  const tokens = useAppDesignTokens();
+  const tokens = useAppDesignTokens(themeMode);
   const styles = useMemo(() => getStyles(tokens), [tokens]);
 
   const bgColor = backgroundColor || tokens.colors.backgroundPrimary;