@zezosoft/zezo-ott-react-native-ui-kit 1.0.5 → 1.0.6

package/src/components/ContentView/components/EpisodeCard.tsx

@@ -11,10 +11,11 @@ import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import Display from '../../../utils/Display';
 import type { IContentEpisodes, IContentSeasons } from '../../../types';
-import type { ITheme } from '../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../theme/themes';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
+import { useInternalTheme } from '../../../theme/hook';
 
 // Constants
 const SKELETON_COUNT = 3;
@@ -43,6 +44,7 @@ interface EpisodeCardItemProps {
   season_id: string;
   season_number: number;
   episode: IContentEpisodes;
+  isDarkMode: boolean;
   onPress: (e: IOnPressParams) => void;
   theme: ITheme;
   style?: React.ComponentProps<typeof TouchableOpacity>['style'];
@@ -53,7 +55,7 @@ interface EpisodeCardItemProps {
 interface EpisodeCardProps {
   seasons: IContentSeasons[];
   onPress: (e: IOnPressParams) => void;
-  theme: ITheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   mode?: 'horizontal' | 'vertical';
 }
@@ -74,6 +76,7 @@ const EpisodeCardItem = memo(
     season_number,
     episode,
     onPress,
+    isDarkMode,
     theme,
     style,
     thumbnailHeight,
@@ -109,15 +112,21 @@ const EpisodeCardItem = memo(
           flexDirection: isVerticalMode
             ? ('row' as const)
             : ('column' as const),
-          borderWidth: isVerticalMode ? 0 : theme.dark ? 0 : BORDER_WIDTH,
+          borderWidth: isVerticalMode ? 0 : isDarkMode ? 0 : BORDER_WIDTH,
           borderColor: isVerticalMode
             ? 'transparent'
-            : theme.dark
+            : isDarkMode
               ? 'transparent'
               : theme.colors.border,
         },
       ],
-      [style, isVerticalMode, theme]
+      [
+        style,
+        isVerticalMode,
+        theme.colors.surfaceVariant,
+        theme.colors.border,
+        isDarkMode,
+      ]
     );
 
     const windowWidth = Display.fullWidth;
@@ -202,6 +211,7 @@ const EpisodeCardItem = memo(
         <View style={[styles.cardContent, isVerticalMode && styles.cardGrid]}>
           <View style={thumbnailStyle}>
             <RentOrBuyIcon
+              theme={theme}
               content_offering_type={episode.content_offering_type}
             />
             <ThumbnailCard
@@ -254,10 +264,11 @@ const EpisodeCardItem = memo(
 export const EpisodeCard = ({
   seasons,
   onPress,
-  theme,
+  theme: themeOverride,
   isLoading = false,
   mode = 'horizontal',
 }: EpisodeCardProps) => {
+  const { isDarkMode, theme } = useInternalTheme(themeOverride);
   const [selectedSeasonIndex, setSelectedSeasonIndex] = useState(0);
   const windowWidth = Display.fullWidth;
 
@@ -324,13 +335,14 @@ export const EpisodeCard = ({
           theme={theme}
           season_id={selectedSeason._id}
           episode={item}
+          isDarkMode={isDarkMode}
           season_number={selectedSeason.season_number}
           onPress={onPress}
           style={{ width: cardWidth }}
           thumbnailHeight={thumbnailHeight}
         />
       ) : null,
-    [theme, selectedSeason, onPress, cardWidth, thumbnailHeight]
+    [selectedSeason, theme, isDarkMode, onPress, cardWidth, thumbnailHeight]
   );
 
   const renderLoadingItem = useCallback(
@@ -338,6 +350,7 @@ export const EpisodeCard = ({
       <EpisodeCardItem
         theme={theme}
         season_id=""
+        isDarkMode={isDarkMode}
         season_number={0}
         episode={{
           _id: '',
@@ -361,7 +374,7 @@ export const EpisodeCard = ({
         isLoading
       />
     ),
-    [theme, onPress, cardWidth, thumbnailHeight]
+    [theme, isDarkMode, onPress, cardWidth, thumbnailHeight]
   );
 
   if (isLoading) {

package/src/components/ContentView/components/HeroBanner.tsx

@@ -17,6 +17,7 @@ import MenuBtn from '../../Button/MenuBtn';
 import type { HeroBannerProps } from '../../../types/content/content-view.types';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
+import { useInternalTheme } from '../../../theme/hook';
 
 const SKELETON_CIRCLE_SIZE = scale(50);
 const BANNER_HEIGHT = verticalScale(200);
@@ -26,7 +27,7 @@ const BACK_BTN_SIZE = scale(35);
 export const HeroBanner = ({
   backgroundImage,
   title,
-  theme,
+  theme: themeOverride,
   isLoading = false,
   onPressPlay,
   onBackPress,
@@ -36,6 +37,7 @@ export const HeroBanner = ({
   menuActions,
   content_offering_type,
 }: HeroBannerProps) => {
+  const { theme } = useInternalTheme(themeOverride);
   const [hasImageLoaded, setHasImageLoaded] = useState(false);
   const [imageLoadError, setImageLoadError] = useState(false);
 
@@ -154,7 +156,7 @@ export const HeroBanner = ({
         : (renderButtons?.back?.() ??
           (onBackPress && (
             <BackBtn
-              theme={theme}
+              theme={themeOverride}
               onPress={onBackPress}
               style={styles.defaultBackBtn}
               size={scale(20)}
@@ -181,7 +183,7 @@ export const HeroBanner = ({
         : menuActions &&
           (renderButtons?.menu?.() ?? (
             <MenuBtn
-              theme={theme}
+              theme={themeOverride}
               style={styles.defaultMenuBtn}
               actions={menuActions}
             />
@@ -200,6 +202,7 @@ export const HeroBanner = ({
           {content_offering_type && (
             <RentOrBuyIcon
               size={30}
+              theme={theme}
               style={styles.rentOrBuyIcon}
               content_offering_type={content_offering_type}
             />
@@ -269,6 +272,8 @@ export const HeroBanner = ({
           <Animated.View style={styles.centeredContent}>
             {renderButtons?.play?.() ?? (
               <PlayButton
+                color={theme.colors.buttonText}
+                backgroundColor={theme.colors.button}
                 onPress={() => handlePressPlay({ is_trailer: false })}
               />
             )}
@@ -277,6 +282,8 @@ export const HeroBanner = ({
           <Animated.View style={styles.trailerButtonWrapper}>
             {renderButtons?.trailer?.() ?? (
               <TrailerButton
+                color={theme.colors.buttonText}
+                backgroundColor={theme.colors.button}
                 onPress={() => handlePressPlay({ is_trailer: true })}
               />
             )}

package/src/components/ContentView/components/TrailerButton.tsx

@@ -18,7 +18,7 @@ interface Props {
   onPress?: (event: GestureResponderEvent) => void;
   label?: string;
   iconSize?: number;
-  iconColor?: string;
+  color?: string;
   backgroundColor?: string;
   textStyle?: TextStyle;
   style?: ViewStyle;
@@ -28,7 +28,7 @@ export const TrailerButton = ({
   onPress,
   label = 'Watch Trailer',
   iconSize = scale(18),
-  iconColor = '#000',
+  color = '#000',
   backgroundColor = '#FFD700',
   textStyle,
   style,
@@ -39,8 +39,10 @@ export const TrailerButton = ({
       activeOpacity={0.8}
       style={[styles.button, { backgroundColor }, style]}
     >
-      <PlayCircle size={iconSize} color={iconColor} />
-      <Text style={[styles.text, textStyle]}> {label}</Text>
+      <PlayCircle size={iconSize} color={color} />
+      <Text style={[styles.text, textStyle]} color={color}>
+        {label}
+      </Text>
     </TouchableOpacity>
   );
 };
@@ -54,7 +56,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   text: {
-    color: '#000',
     fontWeight: '600',
     fontSize: scale(12),
     marginLeft: scale(2),

package/src/components/Headers/AppHeader.tsx

@@ -12,10 +12,10 @@ import {
   type TextStyle,
 } from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../Text';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export type AppHeaderProps = {
@@ -26,7 +26,7 @@ export type AppHeaderProps = {
   style?: StyleProp<ViewStyle>;
   titleStyle?: TextStyle;
   titleAlign?: 'center' | 'left';
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 const AppHeader: React.FC<AppHeaderProps> = ({
@@ -39,7 +39,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   titleAlign = 'center',
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   return (
     <View

package/src/components/Headers/One.tsx

@@ -7,15 +7,15 @@ import React, { useMemo } from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
-import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import {
   Menu as DefaultMenuIcon,
   Search as DefaultSearchIcon,
 } from 'lucide-react-native';
 
 export interface HeaderOneProps {
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   logoUri: string;
   MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
   SearchIcon?: React.FC<{ width: number; height: number; color?: string }>;
@@ -34,7 +34,7 @@ const HeaderOne: React.FC<HeaderOneProps> = ({
   onSearchPress,
   isLoading,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const iconColor = appliedTheme.colors?.onSurface;
   const rippleColor = appliedTheme.colors.surfaceVariant + '33';

package/src/components/Headers/Three.tsx

@@ -6,13 +6,13 @@ import React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
-import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 
 export interface HeaderThreeProps {
   logoUri: string;
   category?: React.ReactNode;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
 }
 
@@ -22,7 +22,7 @@ const HeaderThree: React.FC<HeaderThreeProps> = ({
   theme,
   isLoading,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   return (
     <View
       style={[

package/src/components/Headers/Two.tsx

@@ -6,11 +6,11 @@ import React from 'react';
 import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
-import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { Menu } from 'lucide-react-native';
 export interface HeaderTwoProps {
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   logoUri: string;
   MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
   onMenuPress?: () => void;
@@ -24,7 +24,7 @@ const HeaderTwo: React.FC<HeaderTwoProps> = ({
   onMenuPress,
   isLoading,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const rippleColor = appliedTheme.colors.surfaceVariant + '33';
   const pressedBackgroundColor = appliedTheme.colors.surfaceVariant;

package/src/components/Input/InputOne.tsx

@@ -15,8 +15,8 @@ import {
 } from 'react-native';
 import { Eye, EyeOff } from 'lucide-react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/hook/useTheme';
-import type { AppTheme } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface InputOneProps extends Omit<TextInputProps, 'theme'> {
@@ -25,7 +25,7 @@ export interface InputOneProps extends Omit<TextInputProps, 'theme'> {
   errorMessage?: string;
   error?: boolean;
   secureTextEntry?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   label?: string;
   placeholderTextColor?: string;
   disabled?: boolean;
@@ -43,7 +43,7 @@ const InputOne: React.FC<InputOneProps> = ({
   disabled,
   ...props
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordField = !!secureTextEntry;
   const inputSecure = isPasswordField && !showPassword;

package/src/components/Input/InputTwo.tsx

@@ -16,8 +16,8 @@ import {
 } from 'react-native';
 import { Eye, EyeOff } from 'lucide-react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/hook/useTheme';
-import type { AppTheme } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface InputTwoProps extends Omit<TextInputProps, 'theme'> {
@@ -26,7 +26,7 @@ export interface InputTwoProps extends Omit<TextInputProps, 'theme'> {
   errorMessage?: string;
   error?: boolean;
   secureTextEntry?: boolean;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   label?: string;
   placeholderTextColor?: string;
   disabled?: boolean;
@@ -53,7 +53,7 @@ const InputTwo: React.FC<InputTwoProps> = ({
   onPressRightIcon,
   ...props
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [showPassword, setShowPassword] = useState(false);
   const isPasswordField = !!secureTextEntry;
   const inputSecure = isPasswordField && !showPassword;

package/src/components/Input/PhoneNumberInput.tsx

@@ -26,8 +26,8 @@ import { getExampleNumber } from 'libphonenumber-js';
 import examples from 'libphonenumber-js/mobile/examples';
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 import debounce from 'lodash.debounce';
-import { useTheme } from '../../theme/hook/useTheme';
-import type { AppTheme } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export interface PhoneNumberInputProps
@@ -44,7 +44,7 @@ export interface PhoneNumberInputProps
   errorMessage?: string;
   inputStyle?: TextStyle;
   containerStyle?: ViewStyle;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   disabled?: boolean;
 }
 
@@ -79,7 +79,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
   disabled = false,
 }) => {
   const phoneInputRef = useRef<PhoneInput>(null);
-  const { theme: appliedTheme } = useTheme(propTheme);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(propTheme);
   const [inputError, setInputError] = useState<string | null>(null);
   const [isFocused, setIsFocused] = useState<boolean>(false);
   const errorAnimation = useRef(new Animated.Value(0)).current;
@@ -343,7 +343,7 @@ const PhoneNumberInputOne: React.FC<PhoneNumberInputProps> = ({
             onFocus: () => setIsFocused(true),
             onBlur: () => setIsFocused(false),
           }}
-          withDarkTheme={appliedTheme.dark}
+          withDarkTheme={isDarkMode}
         />
       </View>
       {(error || inputError) && (

package/src/components/Logo/Logo.tsx

@@ -13,8 +13,8 @@ import {
 import { moderateScale } from 'react-native-size-matters';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { useSplashCache } from '../../hooks/useSplashCache';
-import { useTheme } from '../../theme/hook/useTheme';
-import type { AppTheme } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../theme/themes';
 
 interface ILogoProps {
   width?: number;
@@ -25,7 +25,7 @@ interface ILogoProps {
   containerStyle?: StyleProp<ViewStyle>;
   aspectRatio?: number;
   fallbackUri?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
 }
 
@@ -41,7 +41,7 @@ export const Logo: React.FC<ILogoProps> = ({
   theme,
   isLoading = false,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const {
     data: { logoPath },

package/src/components/Search/One.tsx

@@ -12,7 +12,7 @@ import {
   Keyboard,
   type ListRenderItem,
 } from 'react-native';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import InputTwo from '../Input/InputTwo';
 import { LucideSearch, XCircle } from 'lucide-react-native';
 import { Text } from '../Text';
@@ -28,7 +28,7 @@ import type {
   ISectionItem,
   MoreFetchData,
 } from '../../types';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { useRecentSearchesStore } from '../../store/RecentSearchesStore';
 import RecentSearchesSection from './components/RecentSearchesSection';
 import Cards from '../Content/Card';
@@ -62,7 +62,7 @@ export type SearchOneProps = {
   noResultsText?: string;
   recommendedContentCardStyles?: RecommendedCardStyles;
   skeletonConfig?: SearchCardSkeletonConfig;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   recommendedContent?: ISectionItem | null;
 };
 
@@ -80,7 +80,7 @@ const SearchBar: React.FC<SearchOneProps> = ({
   theme,
   recommendedContent,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const {
     recentSearches,
     addSearchTerm,
@@ -172,7 +172,7 @@ const SearchBar: React.FC<SearchOneProps> = ({
             type={recommendedContent.type}
             data={recommendedContent.content}
             isLoading={isLoading}
-            theme={appliedTheme}
+            theme={theme}
             onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
             onPressMore={events?.onPressRecommendedMore}
             moreFetchData={events?.moreFetchDataRecommended}
@@ -184,13 +184,14 @@ const SearchBar: React.FC<SearchOneProps> = ({
   }, [
     shouldShowFooter,
     showRecent,
-    recommendedContent,
     recentSearches,
-    appliedTheme,
-    clearSearches,
+    isLoading,
     handleTyping,
+    clearSearches,
+    appliedTheme,
+    recommendedContent,
+    theme,
     events,
-    isLoading,
     recommendedContentCardStyles,
   ]);
 

package/src/components/Search/components/SearchCard.tsx

@@ -9,8 +9,8 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 
-import { useTheme } from '../../../theme/hook/useTheme';
-import type { AppTheme } from '../../../theme/themes';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
+import type { ThemeOverride } from '../../../theme/themes';
 
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { Text } from '../../Text';
@@ -34,7 +34,7 @@ export type SearchCardProps = {
   category?: string;
   isLoading?: boolean;
   onPress?: () => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   skeletonConfig?: SearchCardSkeletonConfig;
 };
 
@@ -51,7 +51,7 @@ const SearchCard: React.FC<SearchCardProps> = ({
   theme,
   skeletonConfig,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const {
     colors: {
       textPrimary,

package/src/components/Settings/AppSettings.tsx

@@ -20,7 +20,7 @@ import {
   type TextStyle,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import DeviceInfo from 'react-native-device-info';
 import AppHeader from '../Headers/AppHeader';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
@@ -30,7 +30,7 @@ import UserSection, {
 } from '../User/components/UserSection';
 import { Text } from '../Text';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 // ✅ Types
@@ -64,7 +64,7 @@ export type AppSettingsProps = {
   titleAlign?: 'left' | 'center';
   userInfo?: UserInfo;
   menuItems: MenuItem[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   versionText?: string;
   onBackPress?: () => void;
@@ -106,7 +106,7 @@ export const AppSettings: FC<AppSettingsProps> = ({
   userInfoTextStyle = {},
   menuItemStyle = {},
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const insets = useSafeAreaInsets();
   // ✅ State for toggle values
   const [toggleStates, setToggleStates] = useState<Record<string, boolean>>(
@@ -242,7 +242,7 @@ export const AppSettings: FC<AppSettingsProps> = ({
             title={title || 'Settings'}
             titleAlign={titleAlign}
             onBackPress={onBackPress}
-            theme={appliedTheme}
+            theme={theme}
           />
         ))}
       <ScrollView
@@ -255,7 +255,7 @@ export const AppSettings: FC<AppSettingsProps> = ({
       >
         {userInfo && (
           <UserSection
-            theme={appliedTheme}
+            theme={theme}
             userInfo={userInfo}
             avatarComponent={avatarComponent}
             isLoading={isLoading}