feat(react): add DEFAULT_THEME constant and update theme mode handling in AsgardeoProvider and ThemeProvider

Author: brionmario

packages/javascript/src/index.ts

@@ -119,7 +119,7 @@ export {I18nBundle, I18nTranslations, I18nMetadata} from './models/i18n';
 
 export {default as AsgardeoJavaScriptClient} from './AsgardeoJavaScriptClient';
 
-export {default as createTheme} from './theme/createTheme';
+export {default as createTheme, DEFAULT_THEME} from './theme/createTheme';
 export {ThemeColors, ThemeConfig, Theme, ThemeMode, ThemeDetection} from './theme/types';
 
 export {default as bem} from './utils/bem';

packages/javascript/src/theme/createTheme.ts

@@ -32,7 +32,7 @@
  * under the License.
  */
 
-import {Theme, ThemeConfig, ThemeVars} from './types';
+import {Theme, ThemeConfig, ThemeMode, ThemeVars} from './types';
 import {RecursivePartial} from '../models/utility-types';
 import VendorConstants from '../constants/VendorConstants';
 
@@ -57,7 +57,7 @@ const lightTheme: ThemeConfig = {
       dark: '#174ea6',
     },
     secondary: {
-      main: '#424242',
+      main: '#8b8b8b',
       contrastText: '#ffffff',
       dark: '#212121',
     },
@@ -160,7 +160,7 @@ const darkTheme: ThemeConfig = {
       dark: '#174ea6',
     },
     secondary: {
-      main: '#424242',
+      main: '#8b8b8b',
       contrastText: '#ffffff',
       dark: '#212121',
     },
@@ -655,4 +655,6 @@ const createTheme = (config: RecursivePartial<ThemeConfig> = {}, isDark = false)
   };
 };
 
+export const DEFAULT_THEME: ThemeMode = 'light';
+
 export default createTheme;

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

@@ -27,6 +27,7 @@ import {
   GetBrandingPreferenceConfig,
   BrandingPreference,
   IdToken,
+  DEFAULT_THEME,
 } from '@asgardeo/browser';
 import {FC, RefObject, PropsWithChildren, ReactElement, useEffect, useMemo, useRef, useState, useCallback} from 'react';
 import AsgardeoContext from './AsgardeoContext';
@@ -399,10 +400,11 @@ const AsgardeoProvider: FC<PropsWithChildren<AsgardeoProviderProps>> = ({
   };
 
   const isDarkMode: boolean = useMemo(() => {
-    if (!preferences?.theme?.mode || preferences.theme.mode === 'system') {
+    if (preferences.theme.mode === 'system') {
       return window.matchMedia('(prefers-color-scheme: dark)').matches;
     }
-    return preferences.theme.mode === 'dark';
+
+    return preferences.theme.mode === DEFAULT_THEME;
   }, [preferences?.theme?.mode]);
 
   const handleProfileUpdate = (payload: User): void => {

packages/react/src/contexts/Theme/ThemeProvider.tsx

@@ -28,6 +28,7 @@ import {
   createMediaQueryListener,
   BrowserThemeDetection,
   ThemePreferences,
+  DEFAULT_THEME,
 } from '@asgardeo/browser';
 import ThemeContext from './ThemeContext';
 import useBrandingContext from '../Branding/useBrandingContext';
@@ -109,7 +110,7 @@ const applyThemeToDOM = (theme: Theme) => {
 const ThemeProvider: FC<PropsWithChildren<ThemeProviderProps>> = ({
   children,
   theme: themeConfig,
-  mode = 'system',
+  mode = DEFAULT_THEME,
   detection = {},
   inheritFromBranding = true,
 }: PropsWithChildren<ThemeProviderProps>): ReactElement => {