fix(vue): change approach to solve theme toggle issue

Author: mohdashraf010897

packages/vue/src/components/ReactiveBase/index.jsx

@@ -275,6 +275,7 @@ const ReactiveBase = {
 					className={className}
 					getSearchParams={this.getSearchParams}
 					setSearchParams={this.setSearchParams}
+					userThemeProp={this.$props.theme}
 				>
 					{children()}
 				</URLParamsProvider>

packages/vue/src/components/URLParamsProvider.jsx

@@ -17,6 +17,7 @@ const URLParamsProvider = {
 		getSearchParams: types.func,
 		setSearchParams: types.func,
 		as: VueTypes.string.def('div'),
+		userThemeProp: VueTypes.oneOf([VueTypes.bool, VueTypes.object.def({})]),
 	},
 	mounted() {
 		this.init();
@@ -238,7 +239,11 @@ const URLParamsProvider = {
 	render() {
 		const children = this.$slots.default();
 		return (
-			<Base as={this.$props.as} class={this.$props.className}>
+			<Base
+				as={this.$props.as}
+				class={this.$props.className}
+				userThemeProp={this.$props.userThemeProp}
+			>
 				{children}
 			</Base>
 		);

packages/vue/src/styles/Base.js

@@ -13,10 +13,12 @@ const Base = ({
 };
 
 export default styled(Base)`
-	font-family: ${({ theme }) =>
-		theme && theme.typography ? theme.typography.fontFamily : 'unset'};
-	font-size: ${({ theme }) => (theme && theme.typography ? theme.typography.fontSize : 'unset')};
-	color: ${({ theme }) => (theme && theme.colors ? theme.colors.textColor : 'unset')};
+	${({ userThemeProp, theme }) =>
+		userThemeProp === false
+			? ''
+			: `font-family: ${theme && theme.typography ? theme.typography.fontFamily : 'unset'};
+	font-size: ${theme && theme.typography ? theme.typography.fontSize : 'unset'};
+	color: ${theme && theme.colors ? theme.colors.textColor : 'unset'};`}
 	width: 100%;
 
 	input,

packages/vue/src/utils/index.js

@@ -17,22 +17,7 @@ export const X_SEARCH_CLIENT = 'ReactiveSearch Vue';
 
 export const composeThemeObject = (ownTheme = {}, userThemeParam = {}) => {
 	let userTheme = {};
-	if (typeof userThemeParam === 'boolean' && userThemeParam === false) {
-		userTheme = {
-			typography: {
-				fontFamily: 'inherit',
-				fontSize: 'inherit',
-			},
-			colors: {
-				textColor: 'inherit',
-				primaryTextColor: 'inherit',
-				primaryColor: 'inherit',
-				titleColor: 'inherit',
-				alertColor: 'inherit',
-				borderColor: 'inherit',
-			},
-		};
-	} else {
+	if (typeof userThemeParam !== 'boolean' && Object.keys(userThemeParam).length) {
 		userTheme = { ...userThemeParam };
 	}
 	return {