feat: added ability to change themeMode and override accent color

.changeset/late-cycles-lick.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-scaffold-react-native': minor
+'@reown/appkit-ethers5-react-native': minor
+'@reown/appkit-common-react-native': minor
+'@reown/appkit-ethers-react-native': minor
+'@reown/appkit-wallet-react-native': minor
+'@reown/appkit-wagmi-react-native': minor
+'@reown/appkit-core-react-native': minor
+'@reown/appkit-ui-react-native': minor
+'@reown/appkit-auth-ethers-react-native': minor
+'@reown/appkit-auth-wagmi-react-native': minor
+'@reown/appkit-coinbase-ethers-react-native': minor
+'@reown/appkit-coinbase-wagmi-react-native': minor
+'@reown/appkit-scaffold-utils-react-native': minor
+'@reown/appkit-siwe-react-native': minor
+---
+
+feat: added ability to change themeMode and override accent color

apps/native/App.tsx

@@ -76,7 +76,7 @@ createAppKit({
   debug: true,
   features: {
     email: true,
-    socials: ['x', 'farcaster', 'discord', 'apple'],
+    socials: ['x', 'discord', 'apple'],
     emailShowWallets: true,
     swaps: true
   }

packages/common/src/utils/TypeUtil.ts

@@ -87,3 +87,9 @@ export interface TransactionQuantity {
 }
 
 export type SocialProvider = 'apple' | 'x' | 'discord' | 'farcaster';
+
+export type ThemeMode = 'dark' | 'light';
+
+export interface ThemeVariables {
+  accent?: string;
+}

packages/core/src/__tests__/controllers/ThemeController.test.ts

@@ -4,7 +4,7 @@ import { ThemeController } from '../../index';
 describe('ThemeController', () => {
   it('should have valid default state', () => {
     expect(ThemeController.state).toEqual({
-      themeMode: 'dark',
+      themeMode: undefined,
       themeVariables: {}
     });
   });

packages/core/src/controllers/ThemeController.ts

@@ -1,15 +1,15 @@
 import { proxy, subscribe as sub } from 'valtio';
-import type { ThemeMode, ThemeVariables } from '../utils/TypeUtil';
+import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
 
 // -- Types --------------------------------------------- //
 export interface ThemeControllerState {
-  themeMode: ThemeMode;
+  themeMode?: ThemeMode;
   themeVariables: ThemeVariables;
 }
 
 // -- State --------------------------------------------- //
 const state = proxy<ThemeControllerState>({
-  themeMode: 'dark',
+  themeMode: undefined,
   themeVariables: {}
 });
 

packages/core/src/utils/TypeUtil.ts

@@ -1,5 +1,10 @@
 import { type EventEmitter } from 'events';
-import type { Balance, SocialProvider, Transaction } from '@reown/appkit-common-react-native';
+import type {
+  Balance,
+  SocialProvider,
+  ThemeMode,
+  Transaction
+} from '@reown/appkit-common-react-native';
 
 export interface BaseError {
   message?: string;
@@ -140,14 +145,6 @@ export type RequestCache =
   | 'only-if-cached'
   | 'reload';
 
-// -- ThemeController Types ---------------------------------------------------
-
-export type ThemeMode = 'dark' | 'light';
-
-export interface ThemeVariables {
-  accent?: string;
-}
-
 // -- BlockchainApiController Types ---------------------------------------------
 export interface BlockchainApiIdentityRequest {
   address: string;

packages/scaffold/src/client.ts

@@ -10,8 +10,6 @@ import type {
   EventsControllerState,
   PublicStateControllerState,
   ThemeControllerState,
-  ThemeMode,
-  ThemeVariables,
   Connector,
   ConnectedWalletInfo,
   Features
@@ -33,7 +31,12 @@ import {
   ThemeController,
   TransactionsController
 } from '@reown/appkit-core-react-native';
-import { ConstantsUtil, ErrorUtil } from '@reown/appkit-common-react-native';
+import {
+  ConstantsUtil,
+  ErrorUtil,
+  type ThemeMode,
+  type ThemeVariables
+} from '@reown/appkit-common-react-native';
 
 // -- Types ---------------------------------------------------------------------
 export interface LibraryOptions {

packages/scaffold/src/modal/w3m-account-button/index.tsx

@@ -4,10 +4,11 @@ import {
   CoreHelperUtil,
   NetworkController,
   ModalController,
-  AssetUtil
+  AssetUtil,
+  ThemeController
 } from '@reown/appkit-core-react-native';
 
-import { AccountButton as AccountButtonUI } from '@reown/appkit-ui-react-native';
+import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
 import { ApiController } from '@reown/appkit-core-react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
@@ -27,22 +28,25 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
     profileName
   } = useSnapshot(AccountController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
   const networkImage = AssetUtil.getNetworkImage(caipNetwork);
   const showBalance = balance === 'show';
 
   return (
-    <AccountButtonUI
-      onPress={() => ModalController.open()}
-      address={address}
-      profileName={profileName}
-      networkSrc={networkImage}
-      imageHeaders={ApiController._getApiHeaders()}
-      avatarSrc={profileImage}
-      disabled={disabled}
-      style={style}
-      balance={showBalance ? CoreHelperUtil.formatBalance(balanceVal, balanceSymbol) : ''}
-      testID={testID}
-    />
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <AccountButtonUI
+        onPress={() => ModalController.open()}
+        address={address}
+        profileName={profileName}
+        networkSrc={networkImage}
+        imageHeaders={ApiController._getApiHeaders()}
+        avatarSrc={profileImage}
+        disabled={disabled}
+        style={style}
+        balance={showBalance ? CoreHelperUtil.formatBalance(balanceVal, balanceSymbol) : ''}
+        testID={testID}
+      />
+    </ThemeProvider>
   );
 }

packages/scaffold/src/modal/w3m-connect-button/index.tsx

@@ -1,7 +1,8 @@
 import { useSnapshot } from 'valtio';
-import { ModalController } from '@reown/appkit-core-react-native';
+import { ModalController, ThemeController } from '@reown/appkit-core-react-native';
 import {
   ConnectButton as ConnectButtonUI,
+  ThemeProvider,
   type ConnectButtonProps as ConnectButtonUIProps
 } from '@reown/appkit-ui-react-native';
 
@@ -23,17 +24,20 @@ export function ConnectButton({
   testID
 }: ConnectButtonProps) {
   const { open, loading } = useSnapshot(ModalController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
   return (
-    <ConnectButtonUI
-      onPress={() => ModalController.open()}
-      size={size}
-      loading={loading || open}
-      style={style}
-      testID={testID}
-      disabled={disabled}
-    >
-      {loading || open ? loadingLabel : label}
-    </ConnectButtonUI>
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <ConnectButtonUI
+        onPress={() => ModalController.open()}
+        size={size}
+        loading={loading || open}
+        style={style}
+        testID={testID}
+        disabled={disabled}
+      >
+        {loading || open ? loadingLabel : label}
+      </ConnectButtonUI>
+    </ThemeProvider>
   );
 }

packages/scaffold/src/modal/w3m-modal/index.tsx

@@ -2,7 +2,7 @@ import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
 import { useWindowDimensions, StatusBar } from 'react-native';
 import Modal from 'react-native-modal';
-import { Card } from '@reown/appkit-ui-react-native';
+import { Card, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   AccountController,
   ApiController,
@@ -16,7 +16,8 @@ import {
   TransactionsController,
   type CaipAddress,
   type AppKitFrameProvider,
-  WebviewController
+  WebviewController,
+  ThemeController
 } from '@reown/appkit-core-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
@@ -31,6 +32,7 @@ export function AppKit() {
   const { connectors, connectedConnector } = useSnapshot(ConnectorController.state);
   const { caipAddress, isConnected } = useSnapshot(AccountController.state);
   const { frameViewVisible, webviewVisible } = useSnapshot(WebviewController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { height } = useWindowDimensions();
   const { isLandscape } = useCustomDimensions();
   const portraitHeight = height - 120;
@@ -117,28 +119,32 @@ export function AppKit() {
 
   return (
     <>
-      <Modal
-        style={styles.modal}
-        coverScreen={!frameViewVisible && !webviewVisible}
-        isVisible={open}
-        useNativeDriver
-        useNativeDriverForBackdrop
-        statusBarTranslucent
-        hideModalContentWhileAnimating
-        propagateSwipe
-        onModalHide={handleClose}
-        onBackdropPress={ModalController.close}
-        onBackButtonPress={onBackButtonPress}
-        testID="w3m-modal"
-      >
-        <Card style={[styles.card, { maxHeight: isLandscape ? landScapeHeight : portraitHeight }]}>
-          <Header />
-          <AppKitRouter />
-          <Snackbar />
-        </Card>
-      </Modal>
-      {!!showAuth && AuthView && <AuthView />}
-      {!!showAuth && SocialView && <SocialView />}
+      <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+        <Modal
+          style={styles.modal}
+          coverScreen={!frameViewVisible && !webviewVisible}
+          isVisible={open}
+          useNativeDriver
+          useNativeDriverForBackdrop
+          statusBarTranslucent
+          hideModalContentWhileAnimating
+          propagateSwipe
+          onModalHide={handleClose}
+          onBackdropPress={ModalController.close}
+          onBackButtonPress={onBackButtonPress}
+          testID="w3m-modal"
+        >
+          <Card
+            style={[styles.card, { maxHeight: isLandscape ? landScapeHeight : portraitHeight }]}
+          >
+            <Header />
+            <AppKitRouter />
+            <Snackbar />
+          </Card>
+        </Modal>
+        {!!showAuth && AuthView && <AuthView />}
+        {!!showAuth && SocialView && <SocialView />}
+      </ThemeProvider>
     </>
   );
 }

packages/scaffold/src/modal/w3m-network-button/index.tsx

@@ -6,9 +6,10 @@ import {
   AssetUtil,
   EventsController,
   ModalController,
-  NetworkController
+  NetworkController,
+  ThemeController
 } from '@reown/appkit-core-react-native';
-import { NetworkButton as NetworkButtonUI } from '@reown/appkit-ui-react-native';
+import { NetworkButton as NetworkButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
 
 export interface NetworkButtonProps {
   disabled?: boolean;
@@ -19,6 +20,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   const { isConnected } = useSnapshot(AccountController.state);
   const { caipNetwork } = useSnapshot(NetworkController.state);
   const { loading } = useSnapshot(ModalController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
   const onNetworkPress = () => {
     ModalController.open({ view: 'Networks' });
@@ -29,16 +31,18 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   };
 
   return (
-    <NetworkButtonUI
-      imageSrc={AssetUtil.getNetworkImage(caipNetwork)}
-      imageHeaders={ApiController._getApiHeaders()}
-      disabled={disabled || loading}
-      style={style}
-      onPress={onNetworkPress}
-      loading={loading}
-      testID="network-button"
-    >
-      {caipNetwork?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
-    </NetworkButtonUI>
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <NetworkButtonUI
+        imageSrc={AssetUtil.getNetworkImage(caipNetwork)}
+        imageHeaders={ApiController._getApiHeaders()}
+        disabled={disabled || loading}
+        style={style}
+        onPress={onNetworkPress}
+        loading={loading}
+        testID="network-button"
+      >
+        {caipNetwork?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
+      </NetworkButtonUI>
+    </ThemeProvider>
   );
 }

packages/scaffold/src/views/w3m-account-default-view/components/auth-buttons.tsx

@@ -33,7 +33,14 @@ export function AuthButtons({
           </Text>
         </ListSocial>
       ) : (
-        <ListItem icon="mail" onPress={onPress} chevron testID="button-email" style={style}>
+        <ListItem
+          icon="mail"
+          onPress={onPress}
+          chevron
+          testID="button-email"
+          iconColor="fg-100"
+          style={style}
+        >
           <Text color="fg-100" numberOfLines={1} ellipsizeMode="tail">
             {text}
           </Text>

packages/scaffold/src/views/w3m-account-default-view/index.tsx

@@ -239,7 +239,8 @@ export function AccountDefaultView() {
             <ListItem
               chevron
               icon="networkPlaceholder"
-              iconBackgroundColor="gray-glass-010"
+              iconColor="accent-100"
+              iconBackgroundColor="accent-glass-015"
               imageSrc={networkImage}
               imageHeaders={ApiController._getApiHeaders()}
               onPress={onNetworkPress}
@@ -283,6 +284,8 @@ export function AccountDefaultView() {
                 icon="swapHorizontal"
                 onPress={onSwitchAccountType}
                 testID="account-button-type"
+                iconColor="accent-100"
+                iconBackgroundColor="accent-glass-015"
                 style={styles.actionButton}
                 loading={loading}
               >

packages/ui/package.json

@@ -38,6 +38,7 @@
     "access": "public"
   },
   "dependencies": {
+    "polished": "4.3.1",
     "qrcode": "1.5.3"
   },
   "peerDependencies": {