diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index 394479325..2ab2e12a1 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -281,6 +281,9 @@ export default {
         $globalThemeOptions() {
             return this.$globalTheme?.options;
         },
+        $globalThemeExtend() {
+            return this.$globalTheme?.extend;
+        },
         $globalBaseTheme() {
             return ObjectUtils.getItemValue(this.$globalTheme?.base);
         },
@@ -329,7 +332,8 @@ export default {
                 globalTheme: {
                     base: { ...this.$globalBaseTheme },
                     preset: { ...this.$globalPresetTheme },
-                    options: { ...this.$globalThemeOptions }
+                    options: { ...this.$globalThemeOptions },
+                    extend: { ...this.$globalThemeExtend }
                 }
             };
         },
diff --git a/components/lib/themes/utils/color/palette.js b/components/lib/themes/utils/color/palette.js
index 7046c2bc0..66f799ae1 100644
--- a/components/lib/themes/utils/color/palette.js
+++ b/components/lib/themes/utils/color/palette.js
@@ -1,11 +1,14 @@
 import shade from './shade';
 import tint from './tint';
 
-export default (color) =>
-    typeof color === 'string'
-        ? Array.from({ length: 10 }).reduce((acc, _, i) => {
-              i <= 5 ? (acc[i === 0 ? '50' : `${i * 100}`] = tint(color, (5 - i) * 19)) : (acc[`${i * 100}`] = shade(color, (i - 5) * 15));
+const scales = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 
-              return acc;
-          }, {})
-        : color;
+export default (color) => {
+    if (/{([^}]*)}/g.test(color)) {
+        const token = color.replace(/{|}/g, '');
+
+        return scales.reduce((acc, scale) => ((acc[scale] = `{${token}.${scale}}`), acc), {});
+    }
+
+    return typeof color === 'string' ? scales.reduce((acc, scale, i) => ((acc[scale] = i <= 5 ? tint(color, (5 - i) * 19) : shade(color, (i - 5) * 15)), acc), {}) : color;
+};
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index ae9510525..8bc0d0e70 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -260,6 +260,7 @@ const THEME_ALIAS = {
     'primevue/themes/primeone/aura': path.resolve(__dirname, './components/lib/themes/primeone/aura/index.js'),
     'primevue/themes/primeone': path.resolve(__dirname, './components/lib/themes/primeone/index.js'),
     'primevue/themes/config': path.resolve(__dirname, './components/lib/themes/config/index.js'),
+    'primevue/themes/utils': path.resolve(__dirname, './components/lib/themes/utils/index.js'),
     'primevue/themes': path.resolve(__dirname, './components/lib/themes/index.js')
 };