diff --git a/components/lib/themes/helpers/dt.js b/components/lib/themes/helpers/dt.js
index b7238b67c..172314854 100644
--- a/components/lib/themes/helpers/dt.js
+++ b/components/lib/themes/helpers/dt.js
@@ -3,10 +3,10 @@ import Theme, { SharedUtils } from 'primevue/themes';
 export const $dt = (tokenPath, type) => {
     const config = Theme.getPConfig();
 
-    return dt(config?.theme, tokenPath, type);
+    return dt(config?.theme, tokenPath, undefined, type);
 };
 
-export const dt = (theme = {}, tokenPath, type) => {
+export const dt = (theme = {}, tokenPath, fallback, type) => {
     if (tokenPath) {
         const VARIABLE = Theme.defaults.variable;
         const { prefix, transform } = theme?.options || {};
@@ -14,7 +14,7 @@ export const dt = (theme = {}, tokenPath, type) => {
         const token = SharedUtils.object.test(regex, tokenPath) ? tokenPath : `{${tokenPath}}`;
         const isStrictTransform = type === 'value' || transform === 'strict'; // @todo - TRANSFORM: strict | lenient(default)
 
-        return isStrictTransform ? Theme.getTokenValue(tokenPath) : SharedUtils.object.getVariableValue(token, undefined, prefix, [VARIABLE.excludedKeyRegex]);
+        return isStrictTransform ? Theme.getTokenValue(tokenPath) : SharedUtils.object.getVariableValue(token, undefined, prefix, [VARIABLE.excludedKeyRegex], fallback);
     }
 
     return '';
diff --git a/components/lib/themes/utils/sharedUtils.js b/components/lib/themes/utils/sharedUtils.js
index 134e4d84d..c760d0bfc 100644
--- a/components/lib/themes/utils/sharedUtils.js
+++ b/components/lib/themes/utils/sharedUtils.js
@@ -109,7 +109,7 @@ export default {
         getVariableName(prefix = '', variable = '') {
             return `--${this.toNormalizeVariable(prefix, variable)}`;
         },
-        getVariableValue(value, variable = '', prefix = '', excludedKeyRegexes = []) {
+        getVariableValue(value, variable = '', prefix = '', excludedKeyRegexes = [], fallback) {
             if (this.isString(value)) {
                 const regex = /{([^}]*)}/g;
                 const val = value.trim();
@@ -119,7 +119,7 @@ export default {
                         const path = v.replace(/{|}/g, '');
                         const keys = path.split('.').filter((_v) => !excludedKeyRegexes.some((_r) => this.test(_r, _v)));
 
-                        return `var(${this.getVariableName(prefix, this.toKebabCase(keys.join('-')))})`;
+                        return `var(${this.getVariableName(prefix, this.toKebabCase(keys.join('-')))}${fallback ? `,${fallback}` : ''})`;
                     });
 
                     const calculationRegex = /(\d+\s+[\+\-\*\/]\s+\d+)/g;
diff --git a/components/lib/themes/utils/themeUtils.js b/components/lib/themes/utils/themeUtils.js
index 3f20227ce..2e52e4f57 100644
--- a/components/lib/themes/utils/themeUtils.js
+++ b/components/lib/themes/utils/themeUtils.js
@@ -63,7 +63,7 @@ export default {
             semantic_css = `${semantic_light_css}${semantic_dark_css}`;
         }
 
-        global_css = SharedUtils.object.getItemValue(base?.global?.css, { ...params, dt: (tokenPath, type) => dt(theme, tokenPath, type) });
+        global_css = SharedUtils.object.getItemValue(base?.global?.css, { ...params, dt: (tokenPath, fallback, type) => dt(theme, tokenPath, fallback, type) });
 
         return {
             primitive: primitive_css,
@@ -84,7 +84,7 @@ export default {
     getBaseC({ name = '', theme = {}, params, set, defaults }) {
         const { base, options } = theme;
         const { css } = base?.components?.[name] || {};
-        const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath, type) => dt(theme, tokenPath, type) });
+        const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath, fallback, type) => dt(theme, tokenPath, fallback, type) });
 
         return this._transformCSS(name, computed_css, undefined, 'style', options, set, defaults);
     },
@@ -101,7 +101,7 @@ export default {
     getBaseD({ name = '', theme = {}, params, set, defaults }) {
         const { base, options } = theme;
         const { css } = base?.directives?.[name] || {};
-        const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath, type) => dt(theme, tokenPath, type) });
+        const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath, fallback, type) => dt(theme, tokenPath, fallback, type) });
 
         return this._transformCSS(name, computed_css, undefined, 'style', options, set, defaults);
     },