Refactor on theme structure

components/lib/base/style/BaseStyle.js

@@ -1,4 +1,4 @@
-import BaseThemeStyle from 'primevue/basetheme/style';
+import Theme from 'primevue/themes';
 import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 
@@ -40,17 +40,14 @@ export default {
     loadTheme(theme, options = {}) {
         return theme ? useStyle(ObjectUtils.minifyCSS(theme), { name: `${this.name}-style`, ...options }) : {};
     },
-    getCommonThemeCSS(preset, base, params, theme) {
+    getCommonThemeCSS(theme, params) {
-        return BaseThemeStyle.getCommon(this.name, preset, base, params, theme);
+        return Theme.getCommonCSS(this.name, theme, params);
     },
-    getPresetThemeCSS(presetCTheme, theme) {
+    getComponentThemeCSS(theme, params) {
-        return BaseThemeStyle.getPresetC(this.name, presetCTheme, theme);
+        return Theme.getComponentCSS(this.name, theme, params);
     },
-    getBaseThemeCSS(baseCTheme, params, theme) {
+    getDirectiveThemeCSS(theme, params) {
-        return BaseThemeStyle.getBaseC(this.name, baseCTheme, params, theme);
+        return Theme.getDirectiveCSS(this.name, theme, params);
-    },
-    getColorSchemeOption(colorScheme) {
-        return BaseThemeStyle.getColorSchemeOption(colorScheme);
     },
     getStyleSheet(extendedCSS = '', props = {}) {
         if (this.css) {
@@ -65,10 +62,10 @@ export default {
         return '';
     },
     getCommonThemeStyleSheet(theme = {}, params, props = {}) {
-        return BaseThemeStyle.getCommonStyleSheet(this.name, theme, params, props);
+        return Theme.getCommonStyleSheet(this.name, theme, params, props);
     },
     getThemeStyleSheet(theme = {}, params, props = {}) {
-        return BaseThemeStyle.getStyleSheet(this.name, theme, params, props);
+        return Theme.getStyleSheet(this.name, theme, params, props);
     },
     extend(style) {
         return { ...this, css: undefined, ...style };

components/lib/basecomponent/BaseComponent.vue

@@ -1,7 +1,7 @@
 <script>
 import BaseStyle from 'primevue/base/style';
 import Theme from 'primevue/themes';
-import { DomHandler, ObjectUtils } from 'primevue/utils';
+import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 import BaseComponentStyle from './style/BaseComponentStyle';
 
@@ -36,37 +36,11 @@ export default {
                 }
             }
         },
-        $globalPresetTheme: {
+        $theme: {
             deep: true,
             immediate: true,
             handler(newValue) {
-                const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(newValue, this.$globalBaseTheme, this.$themeParams, this.$globalTheme) || {};
+                this._loadThemeStyles(newValue);
-
-                BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
-                BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
-                BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions);
-            }
-        },
-        $globalPresetCTheme: {
-            deep: true,
-            immediate: true,
-            handler(newValue) {
-                if (newValue) {
-                    const variables_css = this.$style?.getPresetThemeCSS?.(newValue, this.$globalTheme);
-
-                    this.$style?.loadTheme(`${variables_css}`, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions });
-                }
-            }
-        },
-        $globalBaseCTheme: {
-            deep: true,
-            immediate: true,
-            handler(newValue) {
-                if (newValue) {
-                    const style_css = this.$style?.getBaseThemeCSS(newValue, this.$themeParams, this.$globalTheme);
-
-                    this.$style?.loadTheme(style_css, { useStyleOptions: this.$styleOptions });
-                }
             }
         }
     },
@@ -87,28 +61,8 @@ export default {
         this._hook('onCreated');
     },
     beforeMount() {
-        BaseStyle.loadStyle(this.$styleOptions);
+        this._loadStyles();
-        this._loadGlobalStyles();
         this._hook('onBeforeMount');
-
-        // apply colorScheme settings
-        const { colorScheme } = this.$globalThemeOptions || {};
-
-        if (colorScheme && !Theme.isColorSchemeInit()) {
-            const colorSchemeOption = BaseStyle.getColorSchemeOption(colorScheme);
-            const isClient = DomHandler.isClient();
-
-            const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default;
-            const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)').matches : colorSchemeOption.dark?.default;
-            const defaultDocument = isClient ? window.document : undefined;
-
-            Theme.setColorScheme(isDark ? 'dark' : 'light');
-            Theme.setColorSchemeInit(true);
-
-            if (isDark && defaultDocument) {
-                DomHandler.addClass(defaultDocument.documentElement, colorSchemeOption.dark?.class);
-            }
-        }
     },
     mounted() {
         this._hook('onMounted');
@@ -138,6 +92,13 @@ export default {
         _mergeProps(fn, ...args) {
             return ObjectUtils.isFunction(fn) ? fn(...args) : mergeProps(...args);
         },
+        _loadStyles() {
+            BaseStyle.loadStyle(this.$styleOptions);
+            this._loadGlobalStyles();
+
+            // apply theme settings
+            Theme.init();
+        },
         _loadGlobalStyles() {
             /*
              * @todo Add self custom css support;
@@ -153,6 +114,20 @@ export default {
 
             ObjectUtils.isNotEmpty(globalCSS) && BaseComponentStyle.loadGlobalStyle(globalCSS, this.$styleOptions);
         },
+        _loadThemeStyles(theme) {
+            // common
+            const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(theme, this.$themeParams) || {};
+
+            BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
+            BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
+            BaseComponentStyle.loadGlobalTheme(global, this.$styleOptions);
+
+            // component
+            const { variables, style } = this.$style?.getComponentThemeCSS?.(theme, this.$themeParams) || {};
+
+            this.$style?.loadTheme(variables, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions });
+            this.$style?.loadTheme(style, { useStyleOptions: this.$styleOptions });
+        },
         _getHostInstance(instance) {
             return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
         },
@@ -277,27 +252,9 @@ export default {
         isUnstyled() {
             return this.unstyled !== undefined ? this.unstyled : this.$config?.unstyled;
         },
-        $globalTheme() {
+        $theme() {
             return this.$config?.theme;
         },
-        $globalThemeOptions() {
-            return this.$globalTheme?.options;
-        },
-        $globalThemeExtend() {
-            return this.$globalTheme?.extend;
-        },
-        $globalBaseTheme() {
-            return ObjectUtils.getItemValue(this.$globalTheme?.base);
-        },
-        $globalBaseCTheme() {
-            return ObjectUtils.getItemValue(this.$globalBaseTheme?.components?.[this.$style.name], this.$themeParams);
-        },
-        $globalPresetTheme() {
-            return ObjectUtils.getItemValue(this.$globalTheme?.preset, { options: { ...this.$globalThemeOptions } });
-        },
-        $globalPresetCTheme() {
-            return ObjectUtils.getItemValue(this.$globalPresetTheme?.components?.[this.$style.name], this.$themeParams);
-        },
         $style() {
             return { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, loadCustomStyle: () => {}, loadTheme: () => {}, ...(this._getHostInstance(this) || {}).$style, ...this.$options.style };
         },
@@ -331,12 +288,7 @@ export default {
         $themeParams() {
             return {
                 ...this.$params,
-                globalTheme: {
+                theme: this.$theme
-                    base: { ...this.$globalBaseTheme },
-                    preset: { ...this.$globalPresetTheme },
-                    options: { ...this.$globalThemeOptions },
-                    extend: { ...this.$globalThemeExtend }
-                }
             };
         },
         $_attrsPT() {

components/lib/basedirective/BaseDirective.js

@@ -1,5 +1,5 @@
 import BaseStyle from 'primevue/base/style';
-import { toVariables } from 'primevue/themes';
+import Theme from 'primevue/themes';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
@@ -74,27 +74,31 @@ const BaseDirective = {
     _useDefaultPT: (instance = {}, defaultPT = {}, callback, key, params) => {
         return BaseDirective._usePT(instance, defaultPT, callback, key, params);
     },
-    _loadGlobalThemeStyles: (instance = {}, useStyleOptions) => {
+    _loadStyles: (el, binding, vnode) => {
-        const preset = instance.globalPresetCTheme();
+        const config = BaseDirective._getConfig(binding, vnode);
 
-        if (preset) {
+        BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
-            const { colorScheme, ...vRest } = preset;
+        !el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
-            const { dark, ...csRest } = colorScheme || {};
-            const vRest_css = ObjectUtils.isNotEmpty(vRest) ? toVariables({ [instance.$name]: vRest }).css : '';
-            const csRest_css = ObjectUtils.isNotEmpty(csRest) ? toVariables({ [instance.$name]: csRest }).css : '';
-            const dark_css = ObjectUtils.isNotEmpty(dark) ? toVariables({ [instance.$name]: dark }, { selector: '.p-dark' }).css : '';
-            const variables_css = `${vRest_css}${csRest_css}${dark_css}`;
 
-            instance.$style?.loadTheme(`${variables_css}`, { name: `${instance.$name}-directive-variable`, useStyleOptions });
+        // apply theme settings
-        }
+        Theme.init();
+        BaseDirective._loadThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
+    },
+    _loadThemeStyles: (instance = {}, useStyleOptions) => {
+        const [theme, themeParams] = [instance.theme(), instance.themeParams()];
 
-        const base = instance.globalBaseCTheme();
+        // common
+        const { primitive, semantic, global } = instance.$style?.getCommonThemeCSS?.(theme, themeParams) || {};
 
-        if (base) {
+        BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions });
-            const { css } = base;
+        BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions });
+        BaseStyle.loadTheme(global, { name: 'global-style', useStyleOptions });
 
-            instance.$style?.loadTheme(`${css}`, { name: `${instance.$name}-directive-style`, useStyleOptions });
+        // component
-        }
+        const { variables, style } = instance.$style?.getDirectiveThemeCSS?.(theme, themeParams) || {};
+
+        instance.$style?.loadTheme(variables, { name: `${instance.$name}-directive-variables`, useStyleOptions });
+        instance.$style?.loadTheme(style, { name: `${instance.$name}-directive-style`, useStyleOptions });
     },
     _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
         const name = `on${ObjectUtils.toCapitalCase(hookName)}`;
@@ -132,11 +136,8 @@ const BaseDirective = {
                 /* computed instance variables */
                 defaultPT: () => BaseDirective._getPT(config?.pt, undefined, (value) => value?.directives?.[name]),
                 isUnstyled: () => (el.$instance?.$binding?.value?.unstyled !== undefined ? el.$instance?.$binding?.value?.unstyled : config?.unstyled),
-                globalTheme: () => config?.theme,
+                theme: () => config?.theme,
-                globalBaseTheme: () => ObjectUtils.getItemValue(el.$instance?.globalTheme?.()?.base),
+                themeParams: () => ({ theme: el.$instance?.theme }),
-                globalBaseCTheme: () => ObjectUtils.getItemValue(el.$instance?.globalBaseTheme?.()?.directives?.[name], undefined),
-                globalPresetTheme: () => ObjectUtils.getItemValue(el.$instance?.globalTheme?.()?.preset, el.$instance?.globalTheme?.()?.options),
-                globalPresetCTheme: () => ObjectUtils.getItemValue(el.$instance?.globalPresetTheme?.()?.directives?.[name], undefined),
                 /* instance's methods */
                 ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance, el.$instance?.$binding?.value?.pt, key, { ...params }),
                 ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance, obj, key, params, false),
@@ -156,19 +157,11 @@ const BaseDirective = {
                 handleHook('created', el, binding, vnode, prevVnode);
             },
             beforeMount: (el, binding, vnode, prevVnode) => {
-                const config = BaseDirective._getConfig(binding, vnode);
+                BaseDirective._loadStyles(el, binding, vnode);
-
-                BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
-                !el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
-                BaseDirective._loadGlobalThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
                 handleHook('beforeMount', el, binding, vnode, prevVnode);
             },
             mounted: (el, binding, vnode, prevVnode) => {
-                const config = BaseDirective._getConfig(binding, vnode);
+                BaseDirective._loadStyles(el, binding, vnode);
-
-                BaseStyle.loadStyle({ nonce: config?.csp?.nonce });
-                !el.$instance?.isUnstyled() && el.$instance?.$style?.loadStyle({ nonce: config?.csp?.nonce });
-                BaseDirective._loadGlobalThemeStyles(el.$instance, { nonce: config?.csp?.nonce });
                 handleHook('mounted', el, binding, vnode, prevVnode);
             },
             beforeUpdate: (el, binding, vnode, prevVnode) => {

components/lib/basetheme/BaseTheme.js

@@ -1 +0,0 @@
-export default {};

components/lib/basetheme/package.json

@@ -1,5 +0,0 @@
-{
-    "main": "./basetheme.cjs.js",
-    "module": "./basetheme.esm.js",
-    "unpkg": "./basetheme.min.js"
-}

components/lib/basetheme/style/BaseThemeStyle.d.ts

@@ -1 +0,0 @@
-export declare interface BaseThemeStyle {}

components/lib/basetheme/style/BaseThemeStyle.js

@@ -1,139 +0,0 @@
-import { SharedUtils, dt, toVariables } from 'primevue/themes';
-import { ObjectUtils } from 'primevue/utils';
-
-export default {
-    getCommon(name, preset, base, params, theme) {
-        let primitive_css, semantic_css, global_css;
-
-        if (ObjectUtils.isNotEmpty(preset)) {
-            const { options, extend } = theme;
-            const { primitive, semantic } = preset;
-            const { colorScheme, ...sRest } = semantic || {};
-            const { dark, ...csRest } = colorScheme || {};
-            const { primitive: primitiveExt, semantic: semanticExt } = extend || {};
-            const { colorScheme: colorSchemeExt, ...sRestExt } = semanticExt || {};
-            const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
-            const prim_css = ObjectUtils.isNotEmpty(primitive) ? this._toVariables({ primitive: { ...primitive, ...primitiveExt } }, options).declarations : '';
-            const sRest_css = ObjectUtils.isNotEmpty(sRest) ? this._toVariables({ semantic: { ...sRest, ...sRestExt } }, options).declarations : '';
-            const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ light: { ...csRest, ...csRestExt } }, options).declarations : '';
-            const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ dark: { ...dark, ...darkExt } }, options).declarations : '';
-
-            primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options);
-            semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options)}`;
-        }
-
-        global_css = ObjectUtils.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
-
-        return {
-            primitive: primitive_css,
-            semantic: semantic_css,
-            global: global_css
-        };
-    },
-    getPresetC(name, presetCTheme = {}, theme) {
-        const { options, extend } = theme;
-        const { colorScheme, ...vRest } = presetCTheme;
-        const { dark, ...csRest } = colorScheme || {};
-        const { colorScheme: colorSchemeExt, ...vRestExt } = extend?.components?.[name] || {};
-        const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
-        const vRest_css = ObjectUtils.isNotEmpty(vRest) ? this._toVariables({ [name]: { ...vRest, ...vRestExt } }, options).declarations : '';
-        const csRest_css = ObjectUtils.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : '';
-        const dark_css = ObjectUtils.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : '';
-
-        return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options)}${this._transformCSS(name, dark_css, 'dark', 'variable', options)}`;
-    },
-    getBaseC(name, baseCTheme = {}, params, theme) {
-        const { options } = theme;
-        const { css } = baseCTheme;
-        const computed_css = ObjectUtils.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
-
-        return this._transformCSS(name, computed_css, undefined, 'style', options);
-    },
-    getCommonStyleSheet(name, theme = {}, params, props = {}) {
-        const { preset, base } = theme;
-        const common_css = this.getCommon(preset, base, params, theme);
-        const _props = Object.entries(props)
-            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
-            .join(' ');
-
-        return Object.entries(common_css || {})
-            .reduce((acc, [key, value]) => {
-                if (value) {
-                    const _css = ObjectUtils.minifyCSS(value);
-
-                    acc.push(`<style type="text/css" data-primevue-style-id="${key}" ${_props}>${_css}</style>`);
-                }
-
-                return acc;
-            }, [])
-            .join('');
-    },
-    getStyleSheet(name, theme = {}, params, props = {}) {
-        const { preset, base } = theme;
-        const presetCTheme = preset?.components?.[name];
-        const baseCTheme = base?.components?.[name];
-        const presetC_css = this.getPresetC(name, presetCTheme, theme);
-        const baseC_css = this.getBaseC(name, baseCTheme, params, theme);
-        const _props = Object.entries(props)
-            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
-            .join(' ');
-
-        let css = [];
-
-        presetC_css && css.push(`<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${ObjectUtils.minifyCSS(presetC_css)}</style>`);
-        baseC_css && css.push(`<style type="text/css" data-primevue-style-id="${name}-style" ${_props}>${ObjectUtils.minifyCSS(baseC_css)}</style>`);
-
-        return css.join('');
-    },
-    getColorSchemeOption(colorScheme) {
-        let options = {
-            light: {
-                class: '',
-                rule: `:root{[CSS]}`,
-                default: false
-            },
-            dark: {
-                class: 'p-dark',
-                rule: `.p-dark{[CSS]}`,
-                default: false
-            }
-        };
-
-        if (colorScheme) {
-            if (ObjectUtils.isObject(colorScheme)) {
-                options.light = { ...options.light, ...colorScheme.light };
-                options.dark = { ...options.dark, ...colorScheme.dark };
-            } else {
-                options.light = { ...options.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
-                options.dark = { ...options.dark, default: colorScheme === 'dark' };
-            }
-        }
-
-        return options;
-    },
-    _toVariables(theme, options) {
-        return toVariables(theme, { prefix: options?.prefix });
-    },
-    _transformCSS(name, css, mode, type, options = {}) {
-        const { layer, colorScheme } = options;
-
-        if (type !== 'style') {
-            const colorSchemeOption = this.getColorSchemeOption(colorScheme);
-
-            mode = mode === 'dark' ? 'dark' : 'light';
-            css = colorSchemeOption[mode]?.rule?.replace('[CSS]', css);
-        }
-
-        if (layer) {
-            let layerOptions = {
-                name: 'primevue'
-                //order: 'primevue' // @todo
-            };
-
-            ObjectUtils.isObject(layer) && (layerOptions.name = ObjectUtils.getItemValue(layer.name, { name, type }));
-            css = ObjectUtils.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css;
-        }
-
-        return css;
-    }
-};

components/lib/basetheme/style/package.json

@@ -1,6 +0,0 @@
-{
-    "main": "./basethemestyle.cjs.js",
-    "module": "./basethemestyle.esm.js",
-    "unpkg": "./basethemestyle.min.js",
-    "types": "./BaseThemeStyle.d.ts"
-}

components/lib/themes/config/index.js

@@ -1,67 +1,107 @@
-import { SharedUtils, ThemeService } from 'primevue/themes';
+import { ThemeUtils } from 'primevue/themes';
-
-const ServiceSymbol = Symbol();
 
 export default {
+    defaults: {
+        variable: {
+            prefix: '',
+            selector: ':root',
+            excludedKeyRegex: /^(primitive|semantic|variables|colorscheme|light|dark|common|colors|root|states)$/gi
+        },
+        colorScheme: {
+            light: {
+                class: '',
+                rule: `:root{[CSS]}`,
+                default: false
+            },
+            dark: {
+                class: 'p-dark',
+                rule: `.p-dark{[CSS]}`,
+                default: false
+            }
+        },
+        layer: {
+            name: 'primevue'
+            //order: 'primevue' // @todo
+        }
+    },
     _pConfig: undefined,
-    _colorScheme: 'dark',
+    _theme: undefined,
-    _initializeColorScheme: false,
+    _initialized: false,
+    _currentColorScheme: 'light',
+    init() {
+        if (!this._initialized) {
+            this.applyColorScheme();
+        }
+
+        this._initialized = true;
+    },
+    get theme() {
+        return this._theme || this._pConfig?.theme;
+    },
+    get base() {
+        return this.theme?.base || {};
+    },
+    get preset() {
+        return this.theme?.preset || {};
+    },
+    get options() {
+        return this.theme?.options || {};
+    },
+    get extend() {
+        return this.theme?.extend || {};
+    },
     getPConfig() {
         return this._pConfig;
     },
     setPConfig(newValue) {
         this._pConfig = newValue;
-        ThemeService.emit(ServiceSymbol, this._pConfig);
     },
-    onPConfigChange(callback) {
+    setTheme(newValue) {
-        ThemeService.on(ServiceSymbol, callback);
+        this._theme = newValue;
     },
-    getColorScheme() {
+    getCurrentColorScheme() {
-        return this._colorScheme;
+        return this._currentColorScheme;
     },
-    setColorScheme(newValue) {
+    setCurrentColorScheme(newValue) {
-        this._colorScheme = newValue;
+        this._currentColorScheme = newValue;
     },
-    isColorSchemeInit() {
+    applyColorScheme() {
-        return this._initializeColorScheme;
+        const newColorScheme = ThemeUtils.applyColorScheme(this.options, this.getCurrentColorScheme(), this.defaults);
-    },
+
-    setColorSchemeInit(newValue) {
+        this.setCurrentColorScheme(newColorScheme);
-        this._initializeColorScheme = newValue;
+
+        return newColorScheme;
     },
     toggleColorScheme() {
-        this._colorScheme = this._colorScheme === 'dark' ? 'light' : 'dark';
+        const newColorScheme = ThemeUtils.toggleColorScheme(this.options, this.getCurrentColorScheme(), this.defaults);
-        const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined;
 
-        if (defaultDocument) {
+        this.setCurrentColorScheme(newColorScheme);
-            //@todo
-            const { colorScheme } = this._pConfig?.theme?.options;
-            let options = {
-                light: {
-                    class: '',
-                    rule: `:root{[CSS]}`,
-                    default: false
-                },
-                dark: {
-                    class: 'p-dark',
-                    rule: `.p-dark{[CSS]}`,
-                    default: false
-                }
-            };
 
-            if (colorScheme) {
+        return newColorScheme;
-                if (SharedUtils.object.isObject(colorScheme)) {
+    },
-                    options.light = { ...options.light, ...colorScheme.light };
+    getCommonCSS(name = '', theme, params) {
-                    options.dark = { ...options.dark, ...colorScheme.dark };
+        return ThemeUtils.getCommon({ name, theme: theme || this.theme, params, defaults: this.defaults });
-                } else {
+    },
-                    options.light = { ...options.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
+    getComponentCSS(name = '', theme, params) {
-                    options.dark = { ...options.dark, default: colorScheme === 'dark' };
+        const options = { name, theme: theme || this.theme, params, defaults: this.defaults };
-                }
-            }
 
-            SharedUtils.dom.removeMultipleClasses(defaultDocument.documentElement, [options.dark.class, options.light.class]);
+        return {
-            SharedUtils.dom.addClass(defaultDocument.documentElement, this._colorScheme === 'dark' ? options.dark.class : options.light.class);
+            style: ThemeUtils.getBaseC(options),
-        }
+            variables: ThemeUtils.getPresetC(options)
+        };
+    },
+    getDirectiveCSS(name = '', theme, params) {
+        const options = { name, theme: theme || this.theme, params, defaults: this.defaults };
 
-        return this._colorMode;
+        return {
+            style: ThemeUtils.getBaseD(options),
+            variables: ThemeUtils.getPresetD(options)
+        };
+    },
+    getCommonStyleSheet(name = '', theme, params, props = {}) {
+        return ThemeUtils.getCommonStyleSheet(name, theme, params, props);
+    },
+    getStyleSheet(name, theme = {}, params, props = {}) {
+        return ThemeUtils.getStyleSheet(name, theme, params, props);
     }
 };

components/lib/themes/utils/dt.js

@@ -1,6 +1,6 @@
 import Theme, { SharedUtils } from 'primevue/themes';
 
-const EXCLUDED_KEY_REGEX = /^(primitive|semantic|variables|colorscheme|light|dark|common|colors|root|states)$/gi;
+const VARIABLE = Theme.defaults.variable;
 
 export const $dt = (tokenPath) => {
     const config = Theme.getPConfig();
@@ -15,7 +15,7 @@ export const dt = (theme = {}, tokenPath) => {
         const token = SharedUtils.object.test(regex, tokenPath) ? tokenPath : `{${tokenPath}}`;
         const isStrictTransform = transform === 'strict'; // @todo - TRANSFORM: strict | lenient
 
-        return isStrictTransform ? SharedUtils.object.getComputedValue(theme?.preset, token, [EXCLUDED_KEY_REGEX]) : SharedUtils.object.getVariableValue(token, undefined, prefix, [EXCLUDED_KEY_REGEX]);
+        return isStrictTransform ? SharedUtils.object.getComputedValue(theme?.preset, token, [VARIABLE.excludedKeyRegex]) : SharedUtils.object.getVariableValue(token, undefined, prefix, [VARIABLE.excludedKeyRegex]);
     }
 
     return '';

components/lib/themes/utils/index.js

@@ -2,5 +2,6 @@ export * from './color';
 export * from './dt';
 export { default as ThemeService } from './service';
 export { default as SharedUtils } from './sharedUtils';
+export { default as ThemeUtils } from './themeUtils';
 export { default as toVariables } from './toVariables';
 export { default as useColorScheme } from './useColorScheme';

components/lib/themes/utils/sharedUtils.js

@@ -138,6 +138,17 @@ export default {
             }
 
             return '';
+        },
+        minifyCSS(css) {
+            return css
+                ? css
+                      .replace(/\/\*(?:(?!\*\/)[\s\S])*\*\/|[\r\n\t]+/g, '')
+                      .replace(/ {2,}/g, ' ')
+                      .replace(/ ([{:}]) /g, '$1')
+                      .replace(/([;,]) /g, '$1')
+                      .replace(/ !/g, '!')
+                      .replace(/: /g, ':')
+                : css;
         }
     },
     dom: {

components/lib/themes/utils/themeUtils.js

@@ -0,0 +1,179 @@
+import { SharedUtils, dt, toVariables } from 'primevue/themes';
+
+export default {
+    getCommon({ name = '', theme = {}, params, defaults }) {
+        const { base, preset } = theme;
+        let primitive_css, semantic_css, global_css;
+
+        if (SharedUtils.object.isNotEmpty(preset)) {
+            const { options, extend } = theme;
+            const { primitive, semantic } = preset;
+            const { colorScheme, ...sRest } = semantic || {};
+            const { dark, ...csRest } = colorScheme || {};
+            const { primitive: primitiveExt, semantic: semanticExt } = extend || {};
+            const { colorScheme: colorSchemeExt, ...sRestExt } = semanticExt || {};
+            const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
+            const prim_css = SharedUtils.object.isNotEmpty(primitive) ? this._toVariables({ primitive: { ...primitive, ...primitiveExt } }, options).declarations : '';
+            const sRest_css = SharedUtils.object.isNotEmpty(sRest) ? this._toVariables({ semantic: { ...sRest, ...sRestExt } }, options).declarations : '';
+            const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ light: { ...csRest, ...csRestExt } }, options).declarations : '';
+            const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ dark: { ...dark, ...darkExt } }, options).declarations : '';
+
+            primitive_css = this._transformCSS(name, prim_css, 'light', 'variable', options, defaults);
+            semantic_css = `${this._transformCSS(name, `${sRest_css}${csRest_css}color-scheme:light`, 'light', 'variable', options, defaults)}${this._transformCSS(name, `${dark_css}color-scheme:dark`, 'dark', 'variable', options, defaults)}`;
+        }
+
+        global_css = SharedUtils.object.getItemValue(base?.components?.global?.css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
+
+        return {
+            primitive: primitive_css,
+            semantic: semantic_css,
+            global: global_css
+        };
+    },
+    getPresetC({ name = '', theme = {}, params, defaults }) {
+        const { preset, options, extend } = theme;
+        const { colorScheme, ...vRest } = preset?.components?.[name] || {};
+        const { dark, ...csRest } = colorScheme || {};
+        const { colorScheme: colorSchemeExt, ...vRestExt } = extend?.components?.[name] || {};
+        const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
+        const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: { ...vRest, ...vRestExt } }, options).declarations : '';
+        const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : '';
+        const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : '';
+
+        return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`;
+    },
+    getBaseC({ name = '', theme = {}, params, defaults }) {
+        const { base, options } = theme;
+        const { css } = base?.components?.[name] || {};
+        const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
+
+        return this._transformCSS(name, computed_css, undefined, 'style', options, defaults);
+    },
+    getPresetD({ name = '', theme = {}, params, defaults }) {
+        const { preset, options, extend } = theme;
+        const { colorScheme, ...vRest } = preset?.directives?.[name] || {};
+        const { dark, ...csRest } = colorScheme || {};
+        const { colorScheme: colorSchemeExt, ...vRestExt } = extend?.directives?.[name] || {};
+        const { dark: darkExt, ...csRestExt } = colorSchemeExt || {};
+        const vRest_css = SharedUtils.object.isNotEmpty(vRest) ? this._toVariables({ [name]: { ...vRest, ...vRestExt } }, options).declarations : '';
+        const csRest_css = SharedUtils.object.isNotEmpty(csRest) ? this._toVariables({ [name]: { ...csRest, ...csRestExt } }, options).declarations : '';
+        const dark_css = SharedUtils.object.isNotEmpty(dark) ? this._toVariables({ [name]: { ...dark, ...darkExt } }, options).declarations : '';
+
+        return `${this._transformCSS(name, `${vRest_css}${csRest_css}`, 'light', 'variable', options, defaults)}${this._transformCSS(name, dark_css, 'dark', 'variable', options, defaults)}`;
+    },
+    getBaseD({ name = '', theme = {}, params, defaults }) {
+        const { base, options } = theme;
+        const { css } = base?.directives?.[name] || {};
+        const computed_css = SharedUtils.object.getItemValue(css, { ...params, dt: (tokenPath) => dt(theme, tokenPath) });
+
+        return this._transformCSS(name, computed_css, undefined, 'style', options, defaults);
+    },
+    getColorSchemeOption(colorScheme, defaults) {
+        let options = { ...defaults.colorScheme };
+
+        if (colorScheme) {
+            if (SharedUtils.object.isObject(colorScheme)) {
+                options.light = { ...options.light, ...colorScheme.light };
+                options.dark = { ...options.dark, ...colorScheme.dark };
+            } else {
+                options.light = { ...options.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
+                options.dark = { ...options.dark, default: colorScheme === 'dark' };
+            }
+        }
+
+        return options;
+    },
+    applyColorScheme(options = {}, currentColorScheme, defaults) {
+        if (options.colorScheme) {
+            const colorSchemeOption = this.getColorSchemeOption(options.colorScheme, defaults);
+            const isClient = SharedUtils.dom.isClient();
+            const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default;
+            const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)').matches : colorSchemeOption.dark?.default;
+            const defaultDocument = isClient ? window.document : undefined;
+
+            if (isDark && defaultDocument) {
+                SharedUtils.dom.addClass(defaultDocument.documentElement, colorSchemeOption.dark?.class);
+            }
+
+            return isDark ? 'dark' : 'light';
+        }
+
+        return currentColorScheme;
+    },
+    toggleColorScheme(options = {}, currentColorScheme, defaults) {
+        const newColorScheme = currentColorScheme === 'dark' ? 'light' : 'dark';
+        const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined;
+
+        if (defaultDocument) {
+            const colorSchemeOption = this.getColorSchemeOption(options.colorScheme, defaults);
+            const [lightClass, darkClass] = [colorSchemeOption.light.class, colorSchemeOption.dark.class];
+
+            SharedUtils.dom.removeMultipleClasses(defaultDocument.documentElement, [lightClass, darkClass]);
+            SharedUtils.dom.addClass(defaultDocument.documentElement, newColorScheme === 'dark' ? darkClass : lightClass);
+        }
+
+        return newColorScheme;
+    },
+    getCommonStyleSheet(name, theme = {}, params, props = {}) {
+        const { preset, base } = theme;
+        const common_css = this.getCommon(preset, base, params, theme);
+        const _props = Object.entries(props)
+            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
+            .join(' ');
+
+        return Object.entries(common_css || {})
+            .reduce((acc, [key, value]) => {
+                if (value) {
+                    const _css = SharedUtils.object.minifyCSS(value);
+
+                    acc.push(`<style type="text/css" data-primevue-style-id="${key}" ${_props}>${_css}</style>`);
+                }
+
+                return acc;
+            }, [])
+            .join('');
+    },
+    getStyleSheet(name, theme = {}, params, props = {}) {
+        const { preset, base } = theme;
+        const presetCTheme = preset?.components?.[name];
+        const baseCTheme = base?.components?.[name];
+        const presetC_css = this.getPresetC(name, presetCTheme, theme);
+        const baseC_css = this.getBaseC(name, baseCTheme, params, theme);
+        const _props = Object.entries(props)
+            .reduce((acc, [k, v]) => acc.push(`${k}="${v}"`) && acc, [])
+            .join(' ');
+
+        let css = [];
+
+        presetC_css && css.push(`<style type="text/css" data-primevue-style-id="${name}-variables" ${_props}>${SharedUtils.object.minifyCSS(presetC_css)}</style>`);
+        baseC_css && css.push(`<style type="text/css" data-primevue-style-id="${name}-style" ${_props}>${SharedUtils.object.minifyCSS(baseC_css)}</style>`);
+
+        return css.join('');
+    },
+    _toVariables(theme, options) {
+        return toVariables(theme, { prefix: options?.prefix });
+    },
+    _transformCSS(name, css, mode, type, options = {}, defaults) {
+        if (SharedUtils.object.isNotEmpty(css)) {
+            const { layer, colorScheme } = options;
+
+            if (type !== 'style') {
+                const colorSchemeOption = this.getColorSchemeOption(colorScheme, defaults);
+
+                mode = mode === 'dark' ? 'dark' : 'light';
+                css = colorSchemeOption[mode]?.rule?.replace('[CSS]', css);
+            }
+
+            if (layer) {
+                let layerOptions = { ...defaults.layer };
+
+                SharedUtils.object.isObject(layer) && (layerOptions.name = SharedUtils.object.getItemValue(layer.name, { name, type }));
+                css = SharedUtils.object.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css;
+            }
+
+            return css;
+        }
+
+        return '';
+    }
+};

components/lib/themes/utils/toVariables.js

@@ -1,13 +1,9 @@
-import SharedUtils from './sharedUtils';
+import Theme, { SharedUtils } from 'primevue/themes';
 
-const VARIABLE = {
+const VARIABLE = Theme.defaults.variable;
-    PREFIX: '',
-    SELECTOR: ':root',
-    EXCLUDED_KEY_REGEX: /^(primitive|semantic|variables|colorscheme|light|dark|common|colors|root|states)$/gi
-};
 
 export default function (theme, options = {}) {
-    const { prefix = VARIABLE.PREFIX, selector = VARIABLE.SELECTOR, excludedKeyRegex = VARIABLE.EXCLUDED_KEY_REGEX } = options;
+    const { prefix = VARIABLE.prefix, selector = VARIABLE.selector, excludedKeyRegex = VARIABLE.excludedKeyRegex } = options;
 
     const _toVariables = (_theme, _prefix = '') => {
         return Object.entries(_theme).reduce((acc, [key, value]) => {

components/lib/themes/utils/useColorScheme.js

@@ -2,7 +2,7 @@ import Theme from 'primevue/themes';
 
 export default () => {
     return {
-        colorScheme: Theme.getColorScheme(),
+        colorScheme: Theme.getCurrentColorScheme(),
         toggleColorScheme() {
             this.colorScheme = Theme.toggleColorScheme();
 

nuxt-vite.config.js

@@ -4,7 +4,6 @@ import path from 'path';
 
 const STYLE_ALIAS = {
     'primevue/base/style': path.resolve(__dirname, './components/lib/base/style/BaseStyle.js'),
-    'primevue/basetheme/style': path.resolve(__dirname, './components/lib/basetheme/style/BaseThemeStyle.js'),
     'primevue/basecomponent/style': path.resolve(__dirname, './components/lib/basecomponent/style/BaseComponentStyle.js'),
     'primevue/accordion/style': path.resolve(__dirname, './components/lib/accordion/style/AccordionStyle.js'),
     'primevue/accordiontab/style': path.resolve(__dirname, './components/lib/accordiontab/style/AccordionTabStyle.js'),
@@ -272,7 +271,6 @@ export default {
             ...STYLE_ALIAS,
             ...THEME_ALIAS,
             'primevue/base': path.resolve(__dirname, './components/lib/base/Base.js'),
-            'primevue/basetheme': path.resolve(__dirname, './components/lib/basetheme/BaseTheme.js'),
             'primevue/basedirective': path.resolve(__dirname, './components/lib/basedirective/BaseDirective.js'),
             'primevue/ripple': path.resolve(__dirname, './components/lib/ripple/Ripple.js'),
             'primevue/tooltip': path.resolve(__dirname, './components/lib/tooltip/Tooltip.js'),