feat(react): integrate getActiveTheme function for dynamic theme handling across components

Author: brionmario

packages/browser/src/__legacy__/client.ts

@@ -411,6 +411,9 @@ export class AsgardeoSPAClient {
         }
 
         return response;
+      })
+      .catch(error => {
+        return Promise.reject(error)
       });
   }
 

packages/browser/src/index.ts

@@ -58,5 +58,6 @@ export {
   createMediaQueryListener,
   BrowserThemeDetection,
 } from './theme/themeDetection';
+export {default as getActiveTheme} from './theme/getActiveTheme';
 
 export {default as http} from './utils/http';

packages/browser/src/theme/getActiveTheme.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import {DEFAULT_THEME, ThemeMode} from '@asgardeo/javascript';
+import {BrowserThemeDetection, detectThemeMode} from './themeDetection';
+
+/**
+ * Gets the active theme based on the theme mode preference
+ * @param mode - The theme mode preference ('light', 'dark', 'system', or 'class')
+ * @param config - Additional configuration for theme detection
+ * @returns 'light' or 'dark' based on the resolved theme
+ */
+const getActiveTheme = (mode: ThemeMode, config: BrowserThemeDetection = {}): ThemeMode => {
+  if (mode === 'dark') {
+    return 'dark';
+  }
+
+  if (mode === 'light') {
+    return 'light';
+  }
+
+  if (mode === 'system') {
+    if (typeof window !== 'undefined' && window.matchMedia) {
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    // Default to light mode if system detection is not available
+    return DEFAULT_THEME;
+  }
+
+  if (mode === 'class') {
+    return detectThemeMode(mode, config);
+  }
+
+  // Default to light mode for any unknown mode
+  return DEFAULT_THEME;
+};
+
+export default getActiveTheme;

packages/javascript/src/index.ts

@@ -16,10 +16,17 @@
  * under the License.
  */
 
-export * from './__legacy__/client';
-export * from './__legacy__/models';
+export {AsgardeoAuthClient} from './__legacy__/client';
+export {
+  DefaultAuthClientConfig,
+  WellKnownAuthClientConfig,
+  BaseURLAuthClientConfig,
+  ExplicitAuthClientConfig,
+  StrictAuthClientConfig,
+  AuthClientConfig,
+} from './__legacy__/models';
 
-export * from './IsomorphicCrypto';
+export {IsomorphicCrypto} from './IsomorphicCrypto';
 
 export {default as initializeEmbeddedSignInFlow} from './api/initializeEmbeddedSignInFlow';
 export {default as executeEmbeddedSignInFlow} from './api/executeEmbeddedSignInFlow';

packages/nextjs/src/client/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -40,6 +40,7 @@ import {
   AsgardeoProviderProps,
   OrganizationProvider,
   BrandingProvider,
+  getActiveTheme,
 } from '@asgardeo/react';
 import {useRouter, useSearchParams} from 'next/navigation';
 import {FC, PropsWithChildren, RefObject, useEffect, useMemo, useRef, useState} from 'react';
@@ -308,7 +309,11 @@ const AsgardeoClientProvider: FC<PropsWithChildren<AsgardeoClientProviderProps>>
     <AsgardeoContext.Provider value={contextValue}>
       <I18nProvider preferences={preferences?.i18n}>
         <BrandingProvider brandingPreference={brandingPreference}>
-          <ThemeProvider theme={preferences?.theme?.overrides} mode={isDarkMode ? 'dark' : 'light'}>
+          <ThemeProvider
+            theme={preferences?.theme?.overrides}
+            mode={getActiveTheme(preferences?.theme?.mode as any)}
+            inheritFromBranding
+          >
             <FlowProvider>
               <UserProvider profile={userProfile} onUpdateProfile={handleProfileUpdate} updateProfile={updateProfile}>
                 <OrganizationProvider

packages/react/src/components/actions/SignInButton/SignInButton.tsx

@@ -99,7 +99,7 @@ const SignInButton: ForwardRefExoticComponent<SignInButtonProps & RefAttributes<
       }
     } catch (error) {
       throw new AsgardeoRuntimeError(
-        `Sign in failed: ${error instanceof Error ? error.message : String(error)}`,
+        `Sign in failed: ${error instanceof Error ? error.message : String(JSON.stringify(error))}`,
         'SignInButton-handleSignIn-RuntimeError-001',
         'react',
         'Something went wrong while trying to sign in. Please try again later.',

packages/react/src/contexts/Asgardeo/AsgardeoProvider.tsx

@@ -27,7 +27,7 @@ import {
   GetBrandingPreferenceConfig,
   BrandingPreference,
   IdToken,
-  DEFAULT_THEME,
+  getActiveTheme,
 } from '@asgardeo/browser';
 import {FC, RefObject, PropsWithChildren, ReactElement, useEffect, useMemo, useRef, useState, useCallback} from 'react';
 import AsgardeoContext from './AsgardeoContext';
@@ -399,14 +399,6 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
     }
   };
 
-  const isDarkMode: boolean = useMemo(() => {
-    if (preferences.theme.mode === 'system') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    }
-
-    return preferences.theme.mode === DEFAULT_THEME;
-  }, [preferences?.theme?.mode]);
-
   const handleProfileUpdate = (payload: User): void => {
     setUser(payload);
     setUserProfile(prev => ({
@@ -476,7 +468,7 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
           <ThemeProvider
             inheritFromBranding={preferences?.theme?.inheritFromBranding}
             theme={preferences?.theme?.overrides}
-            mode={isDarkMode ? 'dark' : 'light'}
+            mode={getActiveTheme(preferences.theme.mode)}
           >
             <FlowProvider>
               <UserProvider profile={userProfile} onUpdateProfile={handleProfileUpdate}>

packages/react/src/index.ts

@@ -273,4 +273,4 @@ export {default as updateMeProfile, UpdateMeProfileConfig} from './api/updateMeP
 export {default as getMeProfile} from './api/getScim2Me';
 export * from './api/getScim2Me';
 
-export {AsgardeoRuntimeError, http} from '@asgardeo/browser';
+export {AsgardeoRuntimeError, http, getActiveTheme} from '@asgardeo/browser';