add support for theme modes

jasonpraful · jasonpraful · commit bd63d5adf0a7 · 2025-08-28T21:11:38.000+01:00
diff --git a/android/build.gradle b/android/build.gradle
@@ -70,4 +70,5 @@ dependencies {
   implementation "com.facebook.react:react-native:+"  // From node_modules
   implementation "com.google.firebase:firebase-messaging:${safeExtGet('firebaseMessagingVersion', '20.2.+')}"
   implementation 'io.intercom.android:intercom-sdk:17.1.0'
+  implementation 'io.intercom.android:intercom-sdk-ui:17.1.0'
 }
diff --git a/android/src/main/java/com/intercom/reactnative/IntercomErrorCodes.java b/android/src/main/java/com/intercom/reactnative/IntercomErrorCodes.java
@@ -17,6 +17,7 @@ public class IntercomErrorCodes {
   public static final String HIDE_INTERCOM = "206";
   public static final String SET_LAUNCHER_VISIBILITY = "208";
   public static final String SET_BOTTOM_PADDING = "209";
+  public static final String SET_THEME_MODE = "210";
   public static final String HANDLE_PUSH_MESSAGE = "301";
   public static final String SEND_TOKEN_TO_INTERCOM = "302";
   public static final String FETCH_HELP_CENTER_COLLECTIONS = "901";
diff --git a/android/src/main/java/com/intercom/reactnative/IntercomModule.java b/android/src/main/java/com/intercom/reactnative/IntercomModule.java
@@ -38,6 +38,7 @@
 import io.intercom.android.sdk.helpcenter.sections.HelpCenterCollectionContent;
 import io.intercom.android.sdk.identity.Registration;
 import io.intercom.android.sdk.push.IntercomPushClient;
+import io.intercom.android.sdk.ui.theme.ThemeMode;
 import android.app.TaskStackBuilder;
 
 @ReactModule(name = IntercomModule.NAME)
@@ -530,6 +531,42 @@ public void setBottomPadding(int paddingBottom, Promise promise) {
     }
   }
 
+  @ReactMethod
+  public void setThemeMode(String themeMode, Promise promise) {
+    try {
+      ThemeMode themeModeEnum = null;
+
+      if (themeMode == null || themeMode.trim().isEmpty()) {
+        promise.reject(IntercomErrorCodes.SET_THEME_MODE,
+            "Theme mode cannot be null or empty. Use 'LIGHT', 'DARK', or 'SYSTEM'.");
+        return;
+      }
+
+      switch (themeMode) {
+        case "SYSTEM":
+          themeModeEnum = ThemeMode.SYSTEM;
+          break;
+        case "LIGHT":
+          themeModeEnum = ThemeMode.LIGHT;
+          break;
+        case "DARK":
+          themeModeEnum = ThemeMode.DARK;
+          break;
+        default:
+          promise.reject(IntercomErrorCodes.SET_THEME_MODE,
+              "Invalid theme mode: '" + themeMode + "'. Use 'LIGHT', 'DARK', or 'SYSTEM'.");
+          return;
+      }
+
+      Intercom.client().setThemeMode(themeModeEnum);
+      promise.resolve(true);
+    } catch (Exception err) {
+      Log.e(NAME, "setThemeMode error:");
+      Log.e(NAME, err.toString());
+      promise.reject(IntercomErrorCodes.SET_THEME_MODE, "Error in setThemeMode: " + err.toString());
+    }
+  }
+
   @ReactMethod
   public void setUserJwt(String jwt, Promise promise) {
     try {
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -5,7 +5,7 @@ PODS:
   - fmt (9.1.0)
   - glog (0.3.5)
   - Intercom (19.1.2)
-  - intercom-react-native (8.7.0):
+  - intercom-react-native (8.8.0):
     - Intercom (~> 19.1.2)
     - React-Core
   - RCT-Folly (2024.01.01.00):
@@ -915,8 +915,6 @@ PODS:
     - react-native-config/App (= 1.5.7)
   - react-native-config/App (1.5.7):
     - React-Core
-  - react-native-notifications (5.1.0):
-    - React-Core
   - React-nativeconfig (0.74.0)
   - React-NativeModulesApple (0.74.0):
     - glog
@@ -1167,7 +1165,6 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - react-native-config (from `../node_modules/react-native-config`)
-  - react-native-notifications (from `../node_modules/react-native-notifications`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1261,8 +1258,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   react-native-config:
     :path: "../node_modules/react-native-config"
-  react-native-notifications:
-    :path: "../node_modules/react-native-notifications"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1319,14 +1314,14 @@ SPEC CHECKSUMS:
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
   Intercom: 0643528ea72515fb47096ad38fe455780441881b
-  intercom-react-native: 13c59dd7882e6b60a1d23e4071210c1a828e5d98
+  intercom-react-native: 15a322d6032f91058563a02e049f4d7246aad1a0
   RCT-Folly: 5f972de9f7d384c7d0e7380dd7da506228e568f5
   RCTDeprecation: 3ca8b6c36bfb302e1895b72cfe7db0de0c92cd47
   RCTRequired: 9fc183af555fd0c89a366c34c1ae70b7e03b1dc5
   RCTTypeSafety: db1dd5ad1081a5e160d30bb29ef922693d5ac4b1
   React: 8650d592d90b99097504b8dcfebab883972aed71
   React-callinvoker: 6bb8b399ab8cec59e52458c3a592aa1fca130b68
-  React-Codegen: 253c0e9d0326adb08ee46e6941199ad47370038b
+  React-Codegen: fbad87d0dc7c5bc1536b25bc5cf2f19a1449e438
   React-Core: ab1b60c382b7b79c374b68918f856826ec7f02a9
   React-CoreModules: c5791800e490979b15b819e13ceaee42aa4a2672
   React-cxxreact: 7a5de9c31527a3a36b02caa3540ab55080a6448a
@@ -1345,7 +1340,6 @@ SPEC CHECKSUMS:
   React-logger: 5ae0978955199c132e71e8cf7797f619a6d17164
   React-Mapbuffer: 3b85b3778e447cd1f06d353b8e967af50f272829
   react-native-config: 963b5efabc864cf69412e54b5de49b6a23e4af03
-  react-native-notifications: 3bafa1237ae8a47569a84801f17d80242fe9f6a5
   React-nativeconfig: 951ec32f632e81cbd7d40aebb3211313251c092e
   React-NativeModulesApple: 612f931b1e79736f2d59353979042a424fb314c8
   React-perflogger: 271f1111779fef70f9502d1d38da5132e5585230
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -18,6 +18,7 @@ import Intercom, {
   type UserAttributes,
   Visibility,
   IntercomContent,
+  ThemeMode,
 } from '@intercom/intercom-react-native';
 
 import {
@@ -48,6 +49,7 @@ export default function App() {
     useState<boolean>(true);
   const [launcherVisibility, setLauncherVisibility] = useState<boolean>(false);
   const [user, setUser] = useState<UserAttributes>({ email: '' });
+  const [currentTheme, setCurrentTheme] = useState<ThemeMode>(ThemeMode.SYSTEM);
 
   const [conversationId, setConversationId] = useState<string | undefined>(
     CONVERSATION_ID
@@ -582,6 +584,54 @@ export default function App() {
             resetAttributes();
           }}
         />
+        <Button
+          intercom_accessibilityLabel="set-theme-light"
+          intercom_title={`Set Theme: Light ${
+            currentTheme === 'LIGHT' ? '✓' : ''
+          }`}
+          intercom_onPress={() => {
+            Intercom.setThemeMode(ThemeMode.LIGHT)
+              .then(() => {
+                setCurrentTheme(ThemeMode.LIGHT);
+              })
+              .catch((e) => {
+                showErrorAlert(e);
+                console.error(e);
+              });
+          }}
+        />
+        <Button
+          intercom_accessibilityLabel="set-theme-dark"
+          intercom_title={`Set Theme: Dark ${
+            currentTheme === 'DARK' ? '✓' : ''
+          }`}
+          intercom_onPress={() => {
+            Intercom.setThemeMode(ThemeMode.DARK)
+              .then(() => {
+                setCurrentTheme(ThemeMode.DARK);
+              })
+              .catch((e) => {
+                showErrorAlert(e);
+                console.error(e);
+              });
+          }}
+        />
+        <Button
+          intercom_accessibilityLabel="set-theme-system"
+          intercom_title={`Set Theme: System ${
+            currentTheme === 'SYSTEM' ? '✓' : ''
+          }`}
+          intercom_onPress={() => {
+            Intercom.setThemeMode(ThemeMode.SYSTEM)
+              .then(() => {
+                setCurrentTheme(ThemeMode.SYSTEM);
+              })
+              .catch((e) => {
+                showErrorAlert(e);
+                console.error(e);
+              });
+          }}
+        />
         <Button
           intercom_accessibilityLabel="logout"
           intercom_disabled={!loggedUser}
diff --git a/ios/IntercomModule.m b/ios/IntercomModule.m
@@ -365,6 +365,35 @@ - (NSData *)dataFromHexString:(NSString *)string {
     resolve(@(YES));
 };
 
+RCT_EXPORT_METHOD(setThemeMode:(NSString *)themeMode
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject) {
+    @try {
+        if (themeMode == nil || [themeMode isKindOfClass:[NSNull class]] || [themeMode length] == 0) {
+            reject(@"SET_THEME_MODE", @"Theme mode cannot be null or empty. Use 'LIGHT', 'DARK', or 'SYSTEM'.", nil);
+            return;
+        }
+
+        ICMThemeOverride themeOverride;
+
+        if ([themeMode isEqualToString:@"LIGHT"]) {
+            themeOverride = ICMThemeOverrideLight;
+        } else if ([themeMode isEqualToString:@"DARK"]) {
+            themeOverride = ICMThemeOverrideDark;
+        } else if ([themeMode isEqualToString:@"SYSTEM"]) {
+            themeOverride = ICMThemeOverrideSystem;
+        } else {
+            reject(@"SET_THEME_MODE", [NSString stringWithFormat:@"Invalid theme mode: '%@'. Use 'LIGHT', 'DARK', or 'SYSTEM'.", themeMode], nil);
+            return;
+        }
+
+        [Intercom setThemeOverride:themeOverride];
+        resolve(@(YES));
+    } @catch (NSException *exception) {
+        reject(@"SET_THEME_MODE", @"Error in setThemeMode", [self exceptionToError:exception :@"SET_THEME_MODE" :@"setThemeMode"]);
+    }
+};
+
 - (NSError *)exceptionToError:(NSException *)exception :(NSString *)code :(NSString *)domain {
     NSMutableDictionary *info = [NSMutableDictionary dictionary];
     [info setValue:exception.name forKey:@"ExceptionName"];
diff --git a/src/index.tsx b/src/index.tsx
@@ -26,6 +26,14 @@ export enum LogLevel {
 
 type LogLevelType = keyof typeof LogLevel;
 
+export enum ThemeMode {
+  LIGHT = 'LIGHT',
+  DARK = 'DARK',
+  SYSTEM = 'SYSTEM',
+}
+
+type ThemeModeType = keyof typeof ThemeMode;
+
 export const IntercomEvents = {
   IntercomUnreadCountDidChange:
     IntercomEventEmitter.UNREAD_COUNT_CHANGE_NOTIFICATION,
@@ -290,6 +298,17 @@ export type IntercomType = {
    */
   setLogLevel(logLevel: LogLevelType): Promise<boolean>;
 
+  /**
+   * Sets the theme mode for the Intercom SDK.
+   *
+   * This allows you to override the server-provided theme setting for the current session only.
+   * The theme mode controls whether the SDK displays in light mode, dark mode, or follows the system theme.
+   * The theme selection will be reset when the app restarts.
+   *
+   * @param themeMode The theme mode to set (LIGHT, DARK, or SYSTEM).
+   */
+  setThemeMode(themeMode: ThemeModeType): Promise<boolean>;
+
   /**
    Sets a JWT token for the user, necessary for using the Messenger
    when Messenger Security is enforced. This is an improvement to Identity Verification.
@@ -358,6 +377,7 @@ const Intercom: IntercomType = {
 
   sendTokenToIntercom: (token) => IntercomModule.sendTokenToIntercom(token),
   setLogLevel: (logLevel) => IntercomModule.setLogLevel(logLevel),
+  setThemeMode: (themeMode) => IntercomModule.setThemeMode(themeMode),
   setUserJwt: (jwt) => IntercomModule.setUserJwt(jwt),
   addEventListener: (event, callback) => {
     event === IntercomEvents.IntercomUnreadCountDidChange &&

Original file line number	Diff line number	Diff line change
`@@ -70,4 +70,5 @@ dependencies {`
`70`	`70`	`implementation "com.facebook.react:react-native:+" // From node_modules`
`71`	`71`	`implementation "com.google.firebase:firebase-messaging:${safeExtGet('firebaseMessagingVersion', '20.2.+')}"`
`72`	`72`	`implementation 'io.intercom.android:intercom-sdk:17.1.0'`
	`73`	`+ implementation 'io.intercom.android:intercom-sdk-ui:17.1.0'`
`73`	`74`	`}`