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

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/android/src/main/java/com/customcamera/CameraTheme.kt

@@ -275,8 +275,10 @@ class CameraTheme(
             val prefs = context.getSharedPreferences("CameraSettings", Context.MODE_PRIVATE)
             val jsonString = prefs.getString("cameraTheme", null)
             
-            // Default palette (Dark)
-            var colors = CameraThemeColors(
+            // Default palette (Dark). Kept in a named val so the Light-theme
+            // guard below can revert to it: native Android screens never adopt
+            // a Light theme (see the light-theme check after parsing).
+            val defaultDarkColors = CameraThemeColors(
                 background = Color.parseColor("#000000"),
                 surface = Color.parseColor("#111827"),
                 surfaceMuted = Color.parseColor("#1F2937"),
@@ -295,6 +297,7 @@ class CameraTheme(
                 error = Color.parseColor("#FF5B5B"),
                 warning = Color.parseColor("#FBBF24")
             )
+            var colors = defaultDarkColors
             
             var typography = CameraThemeTypography("System", 18f, 16f, 13f, 14f)
             var spacing = CameraThemeSpacing(4, 8, 12, 16, 20, 24)
@@ -362,6 +365,18 @@ class CameraTheme(
                 }
             }
 
+            // Native Android screens stay Dark regardless of the host's
+            // light/dark switch: only the React Native surfaces follow the host
+            // into Light. If the resolved/persisted theme reads as Light (this
+            // can only happen for a theme persisted by an older build, since
+            // `setCameraTheme` no longer stores Light themes), revert the color
+            // palette to the Dark defaults. Typography/spacing/radius are left
+            // as configured because they aren't light/dark specific, so branded
+            // fonts and metrics survive. Dark themes are untouched.
+            if (!colors.isDark) {
+                colors = defaultDarkColors
+            }
+
             // Flatten the theme's `components` section into per-component
             // key→string maps consumed via componentColor()/componentValue().
             val componentOverrides = mutableMapOf<String, Map<String, String>>()

package/android/src/main/java/com/customcamera/CustomCameraModule.kt

@@ -1403,11 +1403,46 @@ class CustomCameraModule(
 
   @ReactMethod
   override fun setCameraTheme(theme: String, promise: Promise) {
+    // Native Android screens must never switch to a Light theme: when the host
+    // toggles Light, only the React Native surfaces follow. A Light theme push
+    // is therefore NOT persisted natively, so the last Dark theme (or the Dark
+    // default) is retained and native chrome stays Dark. Dark theme pushes —
+    // including branded dark palettes — are saved as before, so Dark behavior is
+    // unchanged. `CameraTheme.load()` applies the same guard defensively for any
+    // Light theme persisted by an older build.
+    if (isLightThemeJson(theme)) {
+      // Re-read whatever Dark theme is already stored (no-op if unchanged) so a
+      // subsequent load reflects the retained theme rather than the ignored push.
+      CameraTheme.invalidate()
+      promise.resolve(null)
+      return
+    }
     saveSetting("cameraTheme", theme)
     CameraTheme.invalidate()
     promise.resolve(null)
   }
 
+  /**
+   * Whether a `setCameraTheme` payload describes a Light theme, i.e. its
+   * `colors.background` reads as light (relative luminance >= 0.5). Mirrors
+   * [isColorDark] / the JS `isDarkTheme()` so the native/RN light-dark split
+   * agrees. A payload with no parseable background is treated as NOT light, so
+   * malformed themes fall through to the normal save path unchanged.
+   */
+  private fun isLightThemeJson(theme: String): Boolean {
+    if (!theme.trimStart().startsWith("{")) return false
+    return try {
+      val background = org.json.JSONObject(theme)
+        .optJSONObject("colors")
+        ?.optString("background")
+        ?.takeIf { it.isNotEmpty() }
+        ?: return false
+      !isColorDark(android.graphics.Color.parseColor(background))
+    } catch (e: Exception) {
+      false
+    }
+  }
+
   @ReactMethod
   override fun setCameraConfig(configJson: String, promise: Promise) {
     saveSetting("cameraConfig", configJson)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ensys-camera-x",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "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",