@moneylion/react-native-offer-carousel 1.3.1 → 1.4.0

package/lib/typescript/src/utils/getThemeColors.d.ts

@@ -0,0 +1,8 @@
+import type { ReshapedThemeColors } from "../capabilities/core/src/system/cnfContext/schemas/Brand";
+import type { ThemeColors } from "../context/ThemeProvider";
+/** This util checks for missing theme colors from reshapedThemeColors in the API response
+ * and merges them with fallback theme colors.
+ * It returns a ThemeColors object with the appropriate colors based on the isDarkTheme flag.
+ */
+export declare const getThemeColors: (reshapedThemeColors: ReshapedThemeColors, isDarkTheme?: boolean) => ThemeColors;
+//# sourceMappingURL=getThemeColors.d.ts.map

package/lib/typescript/src/utils/getThemeColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getThemeColors.d.ts","sourceRoot":"","sources":["../../../../src/utils/getThemeColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAEpG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;;GAGG;AACH,eAAO,MAAM,cAAc,wBACL,mBAAmB,gBAC3B,OAAO,KAClB,WAiBF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@moneylion/react-native-offer-carousel",
-	"version": "1.3.1",
+	"version": "1.4.0",
 	"description": "React Native components for the Engine by MoneyLion Mobile SDK",
 	"main": "lib/commonjs/index",
 	"module": "lib/module/index",

package/src/capabilities/core/src/system/cnfContext/schemas/Brand.ts

@@ -1,50 +1,55 @@
 import { Schema } from "effect";
 
-export type ThemeColors = Schema.Schema.Type<typeof ThemeColors>;
-const ThemeColors = Schema.Struct({
-	backgroundPrimary: Schema.String,
-	backgroundPrimaryFaded: Schema.String,
-	backgroundPrimaryHighlighted: Schema.String,
-	backgroundCritical: Schema.String,
-	backgroundCriticalFaded: Schema.String,
-	backgroundCriticalHighlighted: Schema.String,
-	backgroundWarning: Schema.String,
-	backgroundWarningFaded: Schema.String,
-	backgroundWarningHighlighted: Schema.String,
-	backgroundPositive: Schema.String,
-	backgroundPositiveFaded: Schema.String,
-	backgroundPositiveHighlighted: Schema.String,
-	backgroundNeutral: Schema.String,
-	backgroundNeutralFaded: Schema.String,
-	backgroundNeutralHighlighted: Schema.String,
-	backgroundDisabled: Schema.String,
-	backgroundDisabledFaded: Schema.String,
-	backgroundElevationBase: Schema.String,
-	backgroundElevationRaised: Schema.String,
-	backgroundElevationOverlay: Schema.String,
-	backgroundPage: Schema.String,
-	backgroundPageFaded: Schema.String,
-	borderPrimary: Schema.String,
-	borderPrimaryFaded: Schema.String,
-	borderCritical: Schema.String,
-	borderCriticalFaded: Schema.String,
-	borderWarning: Schema.String,
-	borderWarningFaded: Schema.String,
-	borderPositive: Schema.String,
-	borderPositiveFaded: Schema.String,
-	borderNeutral: Schema.String,
-	borderNeutralFaded: Schema.String,
-	borderDisabled: Schema.String,
-	foregroundPrimary: Schema.String,
-	foregroundCritical: Schema.String,
-	foregroundWarning: Schema.String,
-	foregroundPositive: Schema.String,
-	foregroundNeutral: Schema.String,
-	foregroundNeutralFaded: Schema.String,
-	foregroundDisabled: Schema.String,
-	brand: Schema.String,
-	white: Schema.String,
-	black: Schema.String,
+export type ReshapedThemeColorObject = Schema.Schema.Type<
+	typeof ReshapedThemeColorObject
+>;
+const ReshapedThemeColorObject = Schema.Struct({
+	hex: Schema.String,
+	hexDark: Schema.optional(Schema.String),
+});
+
+export type ReshapedThemeColors = Schema.Schema.Type<
+	typeof ReshapedThemeColors
+>;
+const ReshapedThemeColors = Schema.Struct({
+	backgroundCritical: ReshapedThemeColorObject,
+	backgroundCriticalFaded: ReshapedThemeColorObject,
+	backgroundDisabled: ReshapedThemeColorObject,
+	backgroundDisabledFaded: ReshapedThemeColorObject,
+	backgroundElevationBase: ReshapedThemeColorObject,
+	backgroundElevationOverlay: ReshapedThemeColorObject,
+	backgroundElevationRaised: ReshapedThemeColorObject,
+	backgroundNeutral: ReshapedThemeColorObject,
+	backgroundNeutralFaded: ReshapedThemeColorObject,
+	backgroundPage: ReshapedThemeColorObject,
+	backgroundPageFaded: ReshapedThemeColorObject,
+	backgroundPositive: ReshapedThemeColorObject,
+	backgroundPositiveFaded: ReshapedThemeColorObject,
+	backgroundPrimary: ReshapedThemeColorObject,
+	backgroundPrimaryFaded: ReshapedThemeColorObject,
+	backgroundWarning: ReshapedThemeColorObject,
+	backgroundWarningFaded: ReshapedThemeColorObject,
+	black: ReshapedThemeColorObject,
+	borderCritical: ReshapedThemeColorObject,
+	borderCriticalFaded: ReshapedThemeColorObject,
+	borderDisabled: ReshapedThemeColorObject,
+	borderNeutral: ReshapedThemeColorObject,
+	borderNeutralFaded: ReshapedThemeColorObject,
+	borderPositive: ReshapedThemeColorObject,
+	borderPositiveFaded: ReshapedThemeColorObject,
+	borderPrimary: ReshapedThemeColorObject,
+	borderPrimaryFaded: ReshapedThemeColorObject,
+	borderWarning: ReshapedThemeColorObject,
+	borderWarningFaded: ReshapedThemeColorObject,
+	brand: ReshapedThemeColorObject,
+	foregroundCritical: ReshapedThemeColorObject,
+	foregroundDisabled: ReshapedThemeColorObject,
+	foregroundNeutral: ReshapedThemeColorObject,
+	foregroundNeutralFaded: ReshapedThemeColorObject,
+	foregroundPositive: ReshapedThemeColorObject,
+	foregroundPrimary: ReshapedThemeColorObject,
+	foregroundWarning: ReshapedThemeColorObject,
+	white: ReshapedThemeColorObject,
 });
 
 export type Links = Schema.Schema.Type<typeof Links>;
@@ -120,7 +125,7 @@ const BrandFields = Schema.Struct({
 	displayName: Schema.String,
 	isLicensed: Schema.optional(Schema.Boolean),
 	hideLicensedLogo: Schema.optional(Schema.Boolean),
-	themeColors: ThemeColors,
+	reshapedThemeColors: ReshapedThemeColors,
 	links: Schema.optional(Links),
 	logos: Schema.optional(Logos),
 	font: Schema.optional(Font),

package/src/capabilities/ui/elements/src/components/MarkdownText/components.tsx

@@ -10,7 +10,7 @@ import Text, {
 	type TextWeight,
 	type Variant,
 } from "../../../../../../components/Text";
-import type { ThemeColors } from "../../../../../core/src";
+import type { ThemeColors } from "../../../../../../context/ThemeProvider";
 
 const BoldText = ({ children }: { children: React.ReactNode }) => {
 	const processChildren = (_children: React.ReactNode) => {

package/src/components/DynamicOffers/Render/DynamicOffersRender.tsx

@@ -291,13 +291,13 @@ export const DynamicOffersRender = ({
 					isHorizontalScroll,
 				});
 	}, [
+		offers,
+		isHorizontalScroll,
 		displayLayout,
 		productTypeBuilder,
-		offers,
 		showProductTypeLabel,
 		fallbackTemplate,
 		showCardBorder,
-		isHorizontalScroll,
 	]);
 
 	// Wrapped offer components with layout measurement

package/src/components/ErrorBoundary/index.tsx

@@ -0,0 +1,40 @@
+import React, { Component } from "react";
+import type { CustomError } from "../MoneyLionOfferCarousel";
+
+interface Props {
+	children: React.ReactNode;
+	fallbackUI?: React.ReactNode;
+	onError: (error: CustomError) => void;
+}
+
+interface State {
+	hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+	constructor(props: Props) {
+		super(props);
+		this.state = { hasError: false };
+	}
+
+	static getDerivedStateFromError(_error: Error) {
+		return { hasError: true };
+	}
+
+	componentDidCatch(error: Error) {
+		this.props.onError({
+			message: error.message,
+			timestamp: new Date().toISOString(),
+		});
+	}
+
+	render() {
+		if (this.state.hasError) {
+			return this.props.fallbackUI ?? null;
+		}
+
+		return this.props.children;
+	}
+}
+
+export default ErrorBoundary;

package/src/components/Layouts/HeadlineWithDescriptionCard/index.tsx

@@ -16,6 +16,7 @@ type HeadlineWithDescriptionCardProps = {
 	fullCardWidth?: boolean;
 	isHorizontalScroll?: boolean;
 };
+
 export const HeadlineWithDescriptionCard = ({
 	offer,
 	productTypeBuilder,

package/src/components/Modal/AllOffersModal.tsx

@@ -14,6 +14,7 @@ import {
 import Text from "../Text";
 import { DynamicOffersContainer } from "../DynamicOffers/DynamicOffersContainer";
 import type { DynamicOfferProps } from "../DynamicOffers/DynamicOffers";
+import { useTheme } from "../../context/ThemeProvider";
 
 type AllOffersModalProps = {
 	visible: boolean;
@@ -50,6 +51,8 @@ export const AllOffersModal = ({
 	onClose,
 	config,
 }: AllOffersModalProps) => {
+	const { theme } = useTheme();
+
 	const { brand, title } = config;
 	const footerLinks = brand.links;
 
@@ -100,16 +103,28 @@ export const AllOffersModal = ({
 			visible={visible}
 			onRequestClose={onClose}
 		>
-			<SafeAreaView style={styles.modalContainer}>
+			<SafeAreaView
+				style={[
+					styles.modalContainer,
+					{ backgroundColor: theme.backgroundPageFaded },
+				]}
+			>
 				<View style={styles.modalHeader}>
 					<TouchableOpacity
 						onPress={onClose}
 						style={styles.closeXButton}
 						hitSlop={{ top: 15, right: 15, bottom: 15, left: 15 }}
 					>
-						<Text style={styles.closeXText}>✕</Text>
+						<Text style={styles.closeXText} color={"foregroundNeutral"}>
+							✕
+						</Text>
 					</TouchableOpacity>
-					<Text variant="title-3" weight="bold" style={styles.headerTitle}>
+					<Text
+						variant="title-3"
+						weight="bold"
+						color={"foregroundNeutral"}
+						style={styles.headerTitle}
+					>
 						{title}
 					</Text>
 				</View>
@@ -157,7 +172,6 @@ export const AllOffersModal = ({
 const styles = StyleSheet.create({
 	modalContainer: {
 		flex: 1,
-		backgroundColor: "#EEEEEE",
 	},
 	modalHeader: {
 		flexDirection: "row",
@@ -173,11 +187,11 @@ const styles = StyleSheet.create({
 	},
 	closeXText: {
 		fontSize: 20,
-		color: "#000000",
 	},
 	headerTitle: {
 		textAlign: "center",
 		alignSelf: "center",
+		paddingHorizontal: 36, // To ensure title doesn't overlap with close button
 	},
 	contentWrapper: {
 		flex: 1,

package/src/components/Modal/OfferDetailsModal.tsx

@@ -15,6 +15,7 @@ import { Disclaimer } from "./Disclaimer";
 import { CallToAction } from "../Common/DynamicOfferCard/CallToAction";
 import Divider from "../Divider";
 import type { BaseOffer } from "../../capabilities/offer-catalog/src";
+import { useTheme } from "../../context/ThemeProvider";
 
 type OfferDetailsModalProps = {
 	visible: boolean;
@@ -31,12 +32,16 @@ export const OfferDetailsModal = ({
 	onClose,
 	offerIndex,
 }: OfferDetailsModalProps) => {
+	const { theme } = useTheme();
+
 	const showDescriptionPoints = Boolean(offer?.descriptionPoints?.length);
 
 	const showDisclaimer = Boolean(offer?.legalLanguage);
 
 	const showDivider = showDescriptionPoints && showDisclaimer;
 
+	const backgroundColor = theme.backgroundElevationOverlay;
+
 	return (
 		<Modal
 			animationType="slide"
@@ -45,10 +50,10 @@ export const OfferDetailsModal = ({
 			onRequestClose={onClose}
 			statusBarTranslucent={true}
 		>
-			<SafeAreaView style={styles.modalContainer}>
+			<SafeAreaView style={[styles.modalContainer, { backgroundColor }]}>
 				{visible && (
 					<StatusBar
-						backgroundColor={"#ffffff"}
+						backgroundColor={backgroundColor}
 						barStyle={"dark-content"}
 						translucent={false}
 					/>
@@ -59,7 +64,11 @@ export const OfferDetailsModal = ({
 						style={styles.closeXButton}
 						hitSlop={{ top: 15, right: 15, bottom: 15, left: 15 }}
 					>
-						<Text style={styles.closeXText}>✕</Text>
+						<Text
+							style={[styles.closeXText, { color: theme.foregroundNeutral }]}
+						>
+							✕
+						</Text>
 					</TouchableOpacity>
 				</View>
 
@@ -91,7 +100,6 @@ export const OfferDetailsModal = ({
 const styles = StyleSheet.create({
 	modalContainer: {
 		flex: 1,
-		backgroundColor: "#ffffff",
 		marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
 	},
 	modalHeader: {
@@ -111,7 +119,6 @@ const styles = StyleSheet.create({
 	},
 	closeXText: {
 		fontSize: 20,
-		color: "#000000",
 	},
 	modalContent: {
 		flex: 1,

package/src/components/MoneyLionOfferCarousel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { localCnfContext } from "../config/mocks/cnfContext";
 import { Text } from "react-native";
 import { getPageData } from "../pageData";
@@ -16,6 +16,15 @@ import {
 import { getConfigApiBaseUrl } from "../apiEnvironment";
 import { ConfigurationProvider } from "../context/ConfigurationProvider";
 import type { CnfContext } from "../capabilities/core/src/system/cnfContext/CnfContext";
+import { getThemeColors } from "../utils/getThemeColors";
+import type { ReshapedThemeColors } from "../capabilities/core/src";
+import ErrorBoundary from "./ErrorBoundary";
+
+export type CustomError = {
+	code?: number;
+	message: string;
+	timestamp: string;
+};
 
 export type MoneyLionOfferCarouselProps = {
 	channel: string;
@@ -34,11 +43,9 @@ export type MoneyLionOfferCarouselProps = {
 	showDescriptionPoints?: boolean;
 	title?: string;
 	subtitle?: string;
-	onError?: (error: {
-		code?: number;
-		message: string;
-		timestamp: string;
-	}) => void;
+	isDarkTheme?: boolean;
+	fallbackUI?: React.ReactNode;
+	onError?: (error: CustomError) => void;
 	onLoad?: (numOffers: number) => void;
 };
 
@@ -91,8 +98,8 @@ const getConfiguration = async ({
 	}
 };
 
-export const MoneyLionOfferCarousel = (
-	props: MoneyLionOfferCarouselProps &
+const InternalMoneyLionOfferCarousel = (
+	props: Omit<MoneyLionOfferCarouselProps, "fallbackUI"> &
 		Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">
 ) => {
 	const {
@@ -106,6 +113,7 @@ export const MoneyLionOfferCarousel = (
 		onLoad,
 		title,
 		subtitle,
+		isDarkTheme = false,
 	} = props;
 
 	const {
@@ -227,6 +235,17 @@ export const MoneyLionOfferCarousel = (
 		onLoad,
 	]);
 
+	const themeColors = useMemo(
+		() =>
+			context
+				? getThemeColors(
+						context.brand.reshapedThemeColors || ({} as ReshapedThemeColors),
+						isDarkTheme
+					)
+				: getThemeColors({} as ReshapedThemeColors, isDarkTheme),
+		[context, isDarkTheme]
+	);
+
 	if (isLoading) {
 		return <DynamicOfferSkeleton displayLayout={"fixed"} />;
 	}
@@ -264,12 +283,12 @@ export const MoneyLionOfferCarousel = (
 		brand: context.brand,
 	};
 
-	const themeColor = {
-		...context.brand.themeColors,
-	};
-
 	return (
-		<ThemeProvider themeColors={themeColor} fontFamily={fontFamily}>
+		<ThemeProvider
+			themeColors={themeColors}
+			fontFamily={fontFamily}
+			isDarkTheme={isDarkTheme}
+		>
 			<EventHandlerProvider
 				eventHandlers={{
 					...eventHandlers,
@@ -284,3 +303,20 @@ export const MoneyLionOfferCarousel = (
 		</ThemeProvider>
 	);
 };
+
+export const MoneyLionOfferCarousel = (
+	props: MoneyLionOfferCarouselProps &
+		Omit<EventHandlerContextType, "rateTableUuid" | "leadUuid">
+) => {
+	const { fallbackUI, onError } = props;
+
+	const handleError = (err: CustomError): void => {
+		onError?.(err);
+	};
+
+	return (
+		<ErrorBoundary fallbackUI={fallbackUI} onError={handleError}>
+			<InternalMoneyLionOfferCarousel {...props} />
+		</ErrorBoundary>
+	);
+};

package/src/config/mocks/cnfContext.ts

@@ -36,50 +36,46 @@ export const localCnfContext: CnfContext = {
 			icon: null,
 		},
 		type: "business",
-		themeColors: {
-			backgroundCritical: "#ff7200",
-			backgroundCriticalFaded: "#fff2e8",
-			backgroundCriticalHighlighted: "#ee6a00",
-			backgroundDisabled: "#eeeeee",
-			backgroundDisabledFaded: "#f6f6f6",
-			backgroundElevationBase: "#ffffff",
-			backgroundElevationOverlay: "#ffffff",
-			backgroundElevationRaised: "#ffffff",
-			backgroundNeutral: "#e2e2e2",
-			backgroundNeutralFaded: "#f5f5f5",
-			backgroundNeutralHighlighted: "#d7d7d7",
-			backgroundPage: "#ffffff",
-			backgroundPageFaded: "#f9f9f9",
-			backgroundPositive: "#00e5c4",
-			backgroundPositiveFaded: "#e8fffc",
-			backgroundPositiveHighlighted: "#00d9b9",
-			backgroundPrimary: "#00e5c4",
-			backgroundPrimaryFaded: "#e8fffc",
-			backgroundPrimaryHighlighted: "#00d9b9",
-			backgroundWarning: "#facc15",
-			backgroundWarningFaded: "#fffae9",
-			backgroundWarningHighlighted: "#edc113",
-			black: "#000000",
-			borderCritical: "#d35d00",
-			borderCriticalFaded: "#fce3ce",
-			borderDisabled: "#e2e2e2",
-			borderNeutral: "#bbbbbb",
-			borderNeutralFaded: "#e1e1e1",
-			borderPositive: "#00bfa3",
-			borderPositiveFaded: "#b8faf2",
-			borderPrimary: "#00bfa3",
-			borderPrimaryFaded: "#b8faf2",
-			borderWarning: "#cfa90f",
-			borderWarningFaded: "#faedbb",
-			brand: "#00e5c4",
-			foregroundCritical: "#a94900",
-			foregroundDisabled: "#cccccc",
-			foregroundNeutral: "#181818",
-			foregroundNeutralFaded: "#666666",
-			foregroundPositive: "#007362",
-			foregroundPrimary: "#007362",
-			foregroundWarning: "#7b6305",
-			white: "#ffffff",
+		// reshapedThemeColors is being used as fallback in the getThemeColors util
+		reshapedThemeColors: {
+			backgroundCritical: { hex: "#ff7200", hexDark: "#ff7200" },
+			backgroundCriticalFaded: { hex: "#fff2ec", hexDark: "#361e11" },
+			backgroundDisabled: { hex: "#eeeeed", hexDark: "#252523" },
+			backgroundDisabledFaded: { hex: "#f7f6f6", hexDark: "#1c1b19" },
+			backgroundElevationBase: { hex: "#ffffff", hexDark: "#171615" },
+			backgroundElevationOverlay: { hex: "#ffffff", hexDark: "#1e1e1c" },
+			backgroundElevationRaised: { hex: "#ffffff", hexDark: "#191917" },
+			backgroundNeutral: { hex: "#e2e2e2", hexDark: "#3f3c35" },
+			backgroundNeutralFaded: { hex: "#f4f4f4", hexDark: "#24221e" },
+			backgroundPage: { hex: "#ffffff", hexDark: "#0e0e0e" },
+			backgroundPageFaded: { hex: "#fbfbfb", hexDark: "#141413" },
+			backgroundPositive: { hex: "#00e5c4", hexDark: "#00e5c4" },
+			backgroundPositiveFaded: { hex: "#ebfff9", hexDark: "#122a24" },
+			backgroundPrimary: { hex: "#00e5c4", hexDark: "#00e5c4" },
+			backgroundPrimaryFaded: { hex: "#ebfff9", hexDark: "#122a24" },
+			backgroundWarning: { hex: "#facc15", hexDark: "#facc15" },
+			backgroundWarningFaded: { hex: "#fff6dd", hexDark: "#2b2410" },
+			black: { hex: "#000000" },
+			borderCritical: { hex: "#aa4a00", hexDark: "#f4b89b" },
+			borderCriticalFaded: { hex: "#f3dcd0", hexDark: "#553220" },
+			borderDisabled: { hex: "#e3e2e0", hexDark: "#282725" },
+			borderNeutral: { hex: "#0000001f", hexDark: "#ffffff24" },
+			borderNeutralFaded: { hex: "#00000014", hexDark: "#ffffff14" },
+			borderPositive: { hex: "#007c6a", hexDark: "#bbf7e7" },
+			borderPositiveFaded: { hex: "#cfede5", hexDark: "#21443c" },
+			borderPrimary: { hex: "#007c6a", hexDark: "#bbf7e7" },
+			borderPrimaryFaded: { hex: "#cfede5", hexDark: "#21443c" },
+			borderWarning: { hex: "#816802", hexDark: "#fbf3db" },
+			borderWarningFaded: { hex: "#ece2c4", hexDark: "#453c1e" },
+			brand: { hex: "#00e5c4" },
+			foregroundCritical: { hex: "#aa4a00", hexDark: "#f4b89b" },
+			foregroundDisabled: { hex: "#cdccc9", hexDark: "#4c4a47" },
+			foregroundNeutral: { hex: "#2e2e2e", hexDark: "#f4f4f4" },
+			foregroundNeutralFaded: { hex: "#6a6a6a", hexDark: "#c9c9c9" },
+			foregroundPositive: { hex: "#007c6a", hexDark: "#bbf7e7" },
+			foregroundPrimary: { hex: "#007c6a", hexDark: "#bbf7e7" },
+			foregroundWarning: { hex: "#816802", hexDark: "#fbf3db" },
+			white: { hex: "#ffffff" },
 		},
 		isLicensed: true,
 		allowedMarks: { logo: true, name: true },

package/src/context/ThemeProvider.tsx

@@ -68,8 +68,10 @@ const defaultFontFamily: FontFamily = {
 interface ThemeContextType {
 	theme: ThemeColors;
 	fontFamily: FontFamily;
+	isDarkTheme: boolean;
 	updateTheme: (newTheme: Partial<ThemeColors>) => void;
 	updateFontFamily: (newFontFamily: Partial<FontFamily>) => void;
+	setIsDarkTheme: (isDark: boolean) => void;
 }
 
 export const ThemeContext = createContext<ThemeContextType | null>(null);
@@ -85,12 +87,14 @@ export const useTheme = () => {
 interface ThemeProviderProps {
 	themeColors?: ThemeColors;
 	fontFamily?: Partial<FontFamily>;
+	isDarkTheme?: boolean;
 	children: ReactNode;
 }
 
 export const ThemeProvider: FC<ThemeProviderProps> = ({
-	themeColors = {} as ThemeColors, // should be safe to assert as ThemePalette since the fallback colors are already handled by the consumers of ThemeProvider
+	themeColors = {} as ThemeColors,
 	fontFamily = {},
+	isDarkTheme = false,
 	children,
 }) => {
 	const [theme, setTheme] = useState<ThemeColors>(themeColors);
@@ -98,6 +102,7 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({
 		...defaultFontFamily,
 		...fontFamily,
 	});
+	const [darkTheme, setDarkTheme] = useState<boolean>(isDarkTheme);
 
 	const updateTheme = (newTheme: Partial<ThemeColors>) => {
 		setTheme((prevTheme) => ({
@@ -113,11 +118,17 @@ export const ThemeProvider: FC<ThemeProviderProps> = ({
 		}));
 	};
 
+	const setIsDarkTheme = (isDark: boolean) => {
+		setDarkTheme(isDark);
+	};
+
 	const contextValue = {
 		theme,
 		fontFamily: fonts,
+		isDarkTheme: darkTheme,
 		updateTheme,
 		updateFontFamily,
+		setIsDarkTheme,
 	};
 
 	return (

package/src/utils/getThemeColors.ts

@@ -0,0 +1,29 @@
+import type { ReshapedThemeColors } from "../capabilities/core/src/system/cnfContext/schemas/Brand";
+import { localCnfContext } from "../config/mocks/cnfContext";
+import type { ThemeColors } from "../context/ThemeProvider";
+
+/** This util checks for missing theme colors from reshapedThemeColors in the API response
+ * and merges them with fallback theme colors.
+ * It returns a ThemeColors object with the appropriate colors based on the isDarkTheme flag.
+ */
+export const getThemeColors = (
+	reshapedThemeColors: ReshapedThemeColors,
+	isDarkTheme: boolean = false
+): ThemeColors => {
+	const defaultThemeColors = localCnfContext.brand.reshapedThemeColors;
+
+	const themeColors = Object.keys(defaultThemeColors).reduce((acc, key) => {
+		const reshapedColor = reshapedThemeColors[key as keyof ReshapedThemeColors];
+		const defaultColor = defaultThemeColors[key as keyof ReshapedThemeColors];
+
+		const themeColor = reshapedColor ?? defaultColor;
+
+		acc[key as keyof ThemeColors] = isDarkTheme
+			? (themeColor.hexDark ?? themeColor.hex)
+			: themeColor.hex;
+
+		return acc;
+	}, {} as ThemeColors);
+
+	return themeColors;
+};