diff --git a/components/lib/base/style/BaseStyle.js b/components/lib/base/style/BaseStyle.js
index c62de86c7..1ac7d44f4 100644
--- a/components/lib/base/style/BaseStyle.js
+++ b/components/lib/base/style/BaseStyle.js
@@ -49,6 +49,9 @@ export default {
     getDirectiveThemeCSS(params) {
         return Theme.getDirectiveCSS(this.name, params);
     },
+    getPresetThemeCSS(preset, selector, params) {
+        return Theme.getPresetCSS(this.name, preset, selector, params);
+    },
     getLayerOrderThemeCSS() {
         return Theme.getLayerOrderCSS(this.name);
     },
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index 366346eb8..12699061c 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -1,7 +1,7 @@
 <script>
 import BaseStyle from 'primevue/base/style';
 import Theme, { ThemeService } from 'primevue/themes';
-import { ObjectUtils } from 'primevue/utils';
+import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseComponentStyle from './style/BaseComponentStyle';
 
@@ -19,6 +19,10 @@ export default {
         unstyled: {
             type: Boolean,
             default: undefined
+        },
+        dt: {
+            type: Object,
+            default: undefined
         }
     },
     inject: {
@@ -38,8 +42,17 @@ export default {
                     this._loadThemeStyles();
                 }
             }
+        },
+        dt: {
+            immediate: true,
+            handler(newValue) {
+                if (newValue) {
+                    this._loadScopedThemeStyles(newValue);
+                }
+            }
         }
     },
+    scopedStyleEl: undefined,
     beforeCreate() {
         const _usept = this.pt?.['_usept'];
         const originalValue = _usept ? this.pt?.originalValue?.[this.$.type.name] : undefined;
@@ -61,6 +74,9 @@ export default {
         this._hook('onBeforeMount');
     },
     mounted() {
+        const rootElement = DomHandler.findSingle(this.$el, `[data-pc-name="${ObjectUtils.toFlatCase(this.$.type.name)}"]`);
+
+        rootElement?.setAttribute(this.$attrSelector, '');
         this._hook('onMounted');
     },
     beforeUpdate() {
@@ -73,6 +89,7 @@ export default {
         this._hook('onBeforeUnmount');
     },
     unmounted() {
+        this.scopedStyleEl?.value?.remove();
         this._hook('onUnmounted');
     },
     methods: {
@@ -143,6 +160,12 @@ export default {
                 Theme.setLoadedStyleName('layer-order');
             }
         },
+        _loadScopedThemeStyles(preset) {
+            const variables = this.$style?.getPresetThemeCSS?.(preset, `[${this.$attrSelector}]`) || {};
+            const scopedStyle = this.$style?.loadTheme(variables, { name: `${this.$attrSelector}-${this.$style.name}`, ...this.$styleOptions });
+
+            this.scopedStyleEl = scopedStyle.el;
+        },
         _getHostInstance(instance) {
             return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
         },
@@ -322,6 +345,9 @@ export default {
 
                     return acc;
                 }, {});
+        },
+        $attrSelector() {
+            return UniqueComponentId('pc');
         }
     }
 };
diff --git a/components/lib/themes/config/index.js b/components/lib/themes/config/index.js
index a31ccb64a..cdc57919f 100644
--- a/components/lib/themes/config/index.js
+++ b/components/lib/themes/config/index.js
@@ -108,6 +108,11 @@ export default {
             variables: ThemeUtils.getPresetD(options)
         };
     },
+    getPresetCSS(name = '', preset, selector, params) {
+        const options = { name, preset, options: this.options, selector, params, defaults: this.defaults, set: { layerNames: this.setLayerNames.bind(this) } };
+
+        return ThemeUtils.getPreset(options);
+    },
     getLayerOrderCSS(name = '') {
         return ThemeUtils.getLayerOrder(name, this.options, { names: this.getLayerNames() }, this.defaults);
     },
diff --git a/components/lib/themes/utils/themeUtils.js b/components/lib/themes/utils/themeUtils.js
index dc5f98b7a..a380437ab 100644
--- a/components/lib/themes/utils/themeUtils.js
+++ b/components/lib/themes/utils/themeUtils.js
@@ -71,19 +71,24 @@ export default {
             global: global_css
         };
     },
-    getPresetC({ name = '', theme = {}, params, set, defaults }) {
-        const { preset, options } = theme;
-        const { colorScheme, ...vRest } = preset?.components?.[name] || {};
+    getPreset({ name = '', preset = {}, options, params, set, defaults, selector }) {
+        const { colorScheme, ...vRest } = preset;
         const { dark, ...csRest } = colorScheme || {};
         const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: vRest }, options).declarations : '';
         const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: csRest }, options).declarations : '';
         const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: dark }, options).declarations : '';
 
-        const light_variable_css = this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults);
-        const dark_variable_css = this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults);
+        const light_variable_css = this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults, selector);
+        const dark_variable_css = this._transformCSS(name, dark_css, 'dark', 'variable', options, set, defaults, selector);
 
         return `${light_variable_css}${dark_variable_css}`;
     },
+    getPresetC({ name = '', theme = {}, params, set, defaults }) {
+        const { preset, options } = theme;
+        const cPreset = preset?.components?.[name];
+
+        return this.getPreset({ name, preset: cPreset, options, params, set, defaults });
+    },
     getBaseC({ name = '', theme = {}, params, set, defaults }) {
         const { base, options } = theme;
         const { css } = base?.components?.[name] || {};
@@ -94,16 +99,9 @@ export default {
     getPresetD({ name = '', theme = {}, params, set, defaults }) {
         const dName = name.replace('-directive', '');
         const { preset, options } = theme;
-        const { colorScheme, ...vRest } = preset?.directives?.[dName] || {};
-        const { dark, ...csRest } = colorScheme || {};
-        const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [dName]: vRest }, options).declarations : '';
-        const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [dName]: csRest }, options).declarations : '';
-        const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [dName]: dark }, options).declarations : '';
+        const dPreset = preset?.directives?.[dName];
 
-        const light_variable_css = this._transformCSS(dName, `${vRest_css}${csRest_css}`, 'light', 'variable', options, set, defaults);
-        const dark_variable_css = this._transformCSS(dName, dark_css, 'dark', 'variable', options, set, defaults);
-
-        return `${light_variable_css}${dark_variable_css}`;
+        return this.getPreset({ name: dName, preset: dPreset, options, params, set, defaults });
     },
     getBaseD({ name = '', theme = {}, params, set, defaults }) {
         const dName = name.replace('-directive', '');
@@ -235,23 +233,24 @@ export default {
     _toVariables(theme, options) {
         return toVariables(theme, { prefix: options?.prefix });
     },
-    _transformCSS(name, css, mode, type, options = {}, set, defaults) {
+    _transformCSS(name, css, mode, type, options = {}, set, defaults, selector) {
         if (SharedUtils.object.isNotEmpty(css)) {
             const { cssLayer } = options;
 
             if (type !== 'style') {
                 const colorSchemeOption = this.getColorSchemeOption(options, defaults);
+                const _css = selector ? SharedUtils.object.getRule(selector, css) : css;
 
                 css =
                     mode === 'dark'
-                        ? colorSchemeOption.reduce((acc, { selector }) => {
-                              if (SharedUtils.object.isNotEmpty(selector)) {
-                                  acc += selector.includes('[CSS]') ? selector.replace('[CSS]', css) : SharedUtils.object.getRule(selector, css);
+                        ? colorSchemeOption.reduce((acc, { selector: _selector }) => {
+                              if (SharedUtils.object.isNotEmpty(_selector)) {
+                                  acc += _selector.includes('[CSS]') ? _selector.replace('[CSS]', _css) : SharedUtils.object.getRule(_selector, _css);
                               }
 
                               return acc;
                           }, '')
-                        : SharedUtils.object.getRule(':root', css);
+                        : SharedUtils.object.getRule(selector ?? ':root', css);
             }
 
             if (cssLayer) {
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index deba01f78..7875f9ce2 100755
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -180,7 +180,7 @@ export default {
     },
 
     findSingle(element, selector) {
-        return this.isElement(element) ? element.querySelector(selector) : null;
+        return this.isElement(element) ? (element.matches(selector) ? element : element.querySelector(selector)) : null;
     },
 
     createElement(type, attributes = {}, ...children) {
diff --git a/components/lib/utils/UniqueComponentId.js b/components/lib/utils/UniqueComponentId.js
index ccb65ff83..87b831b57 100755
--- a/components/lib/utils/UniqueComponentId.js
+++ b/components/lib/utils/UniqueComponentId.js
@@ -1,7 +1,11 @@
-var lastId = 0;
+const lastIds = {};
 
 export default function (prefix = 'pv_id_') {
-    lastId++;
+    if (!lastIds.hasOwnProperty(prefix)) {
+        lastIds[prefix] = 0;
+    }
 
-    return `${prefix}${lastId}`;
+    lastIds[prefix]++;
+
+    return `${prefix}${lastIds[prefix]}`;
 }
diff --git a/doc/migration/v4/breakingchanges/ComponentsDoc.vue b/doc/migration/v4/breakingchanges/ComponentsDoc.vue
index 57ee08b37..96ee178a5 100644
--- a/doc/migration/v4/breakingchanges/ComponentsDoc.vue
+++ b/doc/migration/v4/breakingchanges/ComponentsDoc.vue
@@ -6,8 +6,8 @@
         <li><i>DataViewLayoutOptions</i> is removed, use SelectButton instead as in the demo.</li>
         <li><i>TriStateCheckbox</i> is removed, use Checkbox with the new <i>indeterminate</i> state as a replacement.</li>
         <li>
-            Enhancements to internal structure of some components, see the tickets <a href="https://tailwind.primevue.org" target="_blank" rel="noopener noreferrer" class="doc-link">#5426</a> and
-            <a href="https://tailwind.primevue.org" target="_blank" rel="noopener noreferrer" class="doc-link">#5437</a> for more information.
+            Enhancements to internal structure of some components, see the tickets <a href="https://github.com/primefaces/primevue/issues/5426" target="_blank" rel="noopener noreferrer" class="doc-link">#5426</a> and
+            <a href="https://github.com/primefaces/primevue/issues/5437" target="_blank" rel="noopener noreferrer" class="doc-link">#5437</a> for more information.
         </li>
     </ul>
 </template>
diff --git a/doc/migration/v4/breakingchanges/PluginDoc.vue b/doc/migration/v4/breakingchanges/PluginDoc.vue
deleted file mode 100644
index 84c203133..000000000
--- a/doc/migration/v4/breakingchanges/PluginDoc.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>The <i>PrimeVue</i> plugin is replaced with <i>PrimeVueStyled</i> and <i>PrimeVueUnstyled</i> plugins depending on the theming mode.</p>
-    </DocSectionText>
-    <DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
-    <DocSectionCode :code="code2" hideToggleCode importCode hideStackBlitz />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code1: {
-                basic: `
-//v3 styled mode
-import PrimeVue from 'primevue/config';
-
-const app = createApp(App);
-app.use(PrimeVue);
-
-//v4 styled mode
-import PrimeVueStyled from 'primevue/styled';
-
-const app = createApp(App);
-app.use(PrimeVueStyled);
-`
-            },
-            code2: {
-                basic: `
-///v3 unstyled mode
-import PrimeVue from 'primevue/config';
-
-const app = createApp(App);
-app.use(PrimeVue, {
-    unstyled: true
-});
-
-///v4 unstyled mode
-import PrimeVueUnstyled from 'primevue/styled';
-
-const app = createApp(App);
-app.use(PrimeVueUnstyled);
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/doc/theming/styled/ScopedTokensDoc.vue b/doc/theming/styled/ScopedTokensDoc.vue
index 6d2bb21e1..dcfbe6982 100644
--- a/doc/theming/styled/ScopedTokensDoc.vue
+++ b/doc/theming/styled/ScopedTokensDoc.vue
@@ -27,8 +27,8 @@ export default {
                             borderRadius: '4px'
                         },
                         handle: {
-                            checkedBackground: '{amber.900}',
-                            checkedHoverBackground: '{amber.950}'
+                            checkedBackground: '{amber.50}',
+                            checkedHoverBackground: '{amber.100}'
                         }
                     },
                     dark: {
@@ -38,8 +38,8 @@ export default {
                             borderRadius: '4px'
                         },
                         handle: {
-                            checkedBackground: '{amber.50}',
-                            checkedHoverBackground: '{amber.100}'
+                            checkedBackground: '{amber.900}',
+                            checkedHoverBackground: '{amber.800}'
                         }
                     }
                 }
@@ -49,7 +49,7 @@ export default {
 <template>
     <div>
         <InputSwitch v-model="checked1" />
-        <InputSwitch v-model="checked2" :dt"amberSwitch" />
+        <InputSwitch v-model="checked2" :dt="amberSwitch" />
     </div>
 </template>
 
@@ -70,8 +70,8 @@ const amberSwitch = ref({
                 borderRadius: '4px'
             },
             handle: {
-                checkedBackground: '{amber.900}',
-                checkedHoverBackground: '{amber.950}'
+                checkedBackground: '{amber.50}',
+                checkedHoverBackground: '{amber.100}'
             }
         },
         dark: {
@@ -81,8 +81,8 @@ const amberSwitch = ref({
                 borderRadius: '4px'
             },
             handle: {
-                checkedBackground: '{amber.50}',
-                checkedHoverBackground: '{amber.100}'
+                checkedBackground: '{amber.900}',
+                checkedHoverBackground: '{amber.800}'
             }
         }
     }
diff --git a/pages/migration/v4/index.vue b/pages/migration/v4/index.vue
index 9136dff91..1a76404f6 100644
--- a/pages/migration/v4/index.vue
+++ b/pages/migration/v4/index.vue
@@ -19,7 +19,6 @@
 import NewFeaturesDoc from '@/doc/migration/v4/NewFeaturesDoc.vue';
 import OverviewDoc from '@/doc/migration/v4/OverviewDoc.vue';
 import ComponentsDoc from '@/doc/migration/v4/breakingchanges/ComponentsDoc.vue';
-import PluginDoc from '@/doc/migration/v4/breakingchanges/PluginDoc.vue';
 import StyledModeDoc from '@/doc/migration/v4/breakingchanges/StyledModeDoc.vue';
 
 export default {
@@ -40,11 +39,6 @@ export default {
                     id: 'breakingchanges',
                     label: 'Breaking Changes',
                     children: [
-                        {
-                            id: 'plugin',
-                            label: 'Plugin',
-                            component: PluginDoc
-                        },
                         {
                             id: 'styledmode',
                             label: 'Styled Mode',