diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index 30aa2770a..1505b208c 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -49,6 +49,9 @@ export default {
             handler(newValue) {
                 if (newValue) {
                     this._loadScopedThemeStyles(newValue);
+                    this._themeChangeListener(() => this._loadScopedThemeStyles(newValue));
+                } else {
+                    this._unloadScopedThemeStyles();
                 }
             }
         }
@@ -91,7 +94,7 @@ export default {
         this._hook('onBeforeUnmount');
     },
     unmounted() {
-        this.scopedStyleEl?.value?.remove();
+        this._unloadScopedThemeStyles();
         this._hook('onUnmounted');
     },
     methods: {
@@ -185,6 +188,9 @@ export default {
 
             this.scopedStyleEl = scopedStyle.el;
         },
+        _unloadScopedThemeStyles() {
+            this.scopedStyleEl?.value?.remove();
+        },
         _themeChangeListener(callback = () => {}) {
             Base.clearLoadedStyleNames();
             ThemeService.on('theme:change', callback);
diff --git a/components/lib/themes/actions/definePreset.js b/components/lib/themes/actions/definePreset.js
index 6a1cbe698..16ca5dcd2 100644
--- a/components/lib/themes/actions/definePreset.js
+++ b/components/lib/themes/actions/definePreset.js
@@ -1,8 +1,7 @@
 import Theme, { SharedUtils } from 'primevue/themes';
 
 export default (preset1, preset2) => {
-    const VARIABLE = Theme.defaults.variable;
-    const newPreset = SharedUtils.object.mergeKeysByRegex(preset1, preset2, VARIABLE.excludedKeyRegex);
+    const newPreset = SharedUtils.object.mergeKeys(preset1, preset2);
 
     Theme.setPreset(newPreset);
 
diff --git a/components/lib/themes/actions/updatePreset.js b/components/lib/themes/actions/updatePreset.js
index e36f053c2..df8d72aae 100644
--- a/components/lib/themes/actions/updatePreset.js
+++ b/components/lib/themes/actions/updatePreset.js
@@ -1,8 +1,7 @@
 import Theme, { SharedUtils } from 'primevue/themes';
 
 export default (preset) => {
-    const VARIABLE = Theme.defaults.variable;
-    const newPreset = SharedUtils.object.mergeKeysByRegex(Theme.getPreset(), preset, VARIABLE.excludedKeyRegex);
+    const newPreset = SharedUtils.object.mergeKeys(Theme.getPreset(), preset);
 
     Theme.setPreset(newPreset);
 
diff --git a/components/lib/themes/utils/sharedUtils.js b/components/lib/themes/utils/sharedUtils.js
index d58750e2a..2e56177cc 100644
--- a/components/lib/themes/utils/sharedUtils.js
+++ b/components/lib/themes/utils/sharedUtils.js
@@ -61,6 +61,19 @@ export default {
 
             return mergedObj;
         },
+        mergeKeys(target = {}, source = {}) {
+            const mergedObj = { ...target };
+
+            Object.keys(source).forEach((key) => {
+                if (this.isObject(source[key]) && key in target && this.isObject(target[key])) {
+                    mergedObj[key] = this.mergeKeys(target[key], source[key]);
+                } else {
+                    mergedObj[key] = source[key];
+                }
+            });
+
+            return mergedObj;
+        },
         getItemValue(obj, ...params) {
             return this.isFunction(obj) ? obj(...params) : obj;
         },