react-native-ensys-camera-x 1.0.8 → 1.0.9

package/README.md

@@ -246,6 +246,13 @@ import {
   AudioTile,
   libraryPalette, // the shell's colours
   wp, hp, ms, fs, // and its screen-scaling helpers
+  // Theme management
+  useCameraTheme, // hook: get the current theme with subscriptions to changes
+  useDarkOnlyTheme, // hook: get the dark theme (independent of global theme)
+  createCameraTheme, // create a custom theme from overrides
+  setGlobalCameraTheme, // change the active theme for all screens
+  getCurrentCameraTheme, // get the current theme (without subscriptions)
+  CameraThemeProvider, // context provider for theme
 } from 'react-native-ensys-camera-x';
 ```
 
@@ -278,6 +285,114 @@ if (!result.cancelled) {
 
 ---
 
+## Theming
+
+The plugin ships with four built-in theme presets: `default`, `dark`, `light`, and `minimal`. You
+can set the theme globally during configuration or override it per-screen.
+
+### Set the theme globally
+
+```tsx
+import { configureCameraPlugin } from 'react-native-ensys-camera-x';
+
+configureCameraPlugin({
+  theme: 'default', // 'default' | 'dark' | 'light' | 'minimal'
+});
+```
+
+To switch themes at runtime:
+
+```tsx
+import { setGlobalCameraTheme } from 'react-native-ensys-camera-x';
+
+setGlobalCameraTheme('dark'); // changes all screens immediately
+```
+
+### Override theme per-screen
+
+Pass `theme` as a prop to any screen:
+
+```tsx
+<CameraMediaLibrary theme="dark" />
+```
+
+### Customize the theme
+
+For deeper customization, pass a theme configuration object instead of a preset name:
+
+```tsx
+import { createCameraTheme } from 'react-native-ensys-camera-x';
+
+const myTheme = createCameraTheme({
+  colors: {
+    primary: '#FF6B6B',
+    text: '#FFFFFF',
+    background: '#1A1A1A',
+    // ... other colors
+  },
+  components: {
+    cameraPreview: {
+      controlButtonBackground: 'rgba(0, 0, 0, 0.7)',
+      // ... other component overrides
+    },
+  },
+});
+
+configureCameraPlugin({ theme: myTheme });
+```
+
+### Dark-only theme for specific UI elements
+
+Some UI elements (recording indicators, camera controls, audio players, media previews) should
+always appear in dark mode regardless of the global theme setting. Use the `useDarkOnlyTheme()` hook
+for these components:
+
+```tsx
+import { useDarkOnlyTheme } from 'react-native-ensys-camera-x';
+
+export const MyCustomComponent = () => {
+  const theme = useDarkOnlyTheme(); // Always returns the dark theme
+  
+  return (
+    <View style={{ 
+      backgroundColor: theme.colors.background,
+      color: theme.colors.text 
+    }}>
+      {/* This component will always appear in dark mode */}
+    </View>
+  );
+};
+```
+
+**Why use dark-only theme?** Some UI elements—particularly system-like overlays, control panels, and
+status indicators—need to maintain visual consistency and contrast regardless of the app's theme
+setting. The `useDarkOnlyTheme()` hook ensures these elements are never affected by theme changes.
+
+### Access the current theme
+
+To check the active theme in your components:
+
+```tsx
+import { useCameraTheme, getCurrentCameraTheme } from 'react-native-ensys-camera-x';
+
+// In a component (with subscriptions to theme changes):
+const theme = useCameraTheme();
+
+// Outside a component (static access):
+const theme = getCurrentCameraTheme();
+```
+
+### Theme presets
+
+| Preset | Description |
+| --- | --- |
+| `default` | Professional dark theme with blue accents (recommended) |
+| `dark` | Pure dark theme optimized for low-light environments |
+| `light` | Light theme with professional appearance |
+| `minimal` | Minimalist monochrome dark theme using white accents |
+
+---
+
 ## Customizing icons
 
 All icon customization happens in the **`CUSTOM_ICONS`** block of your `App.tsx`. Nothing else to

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ensys-camera-x",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Full-screen native Android camera and media picker for React Native — photo/video capture, gallery multi-select, and an editor (crop, rotate, filters, stickers, emoji, text, drawing, trim) in one call. Fully white-labelled: every icon, colour and string is configurable.",
   "source": "./src/index.tsx",
   "main": "./lib/module/index.js",