Refactor

components/lib/base/style/BaseStyle.js

@@ -49,6 +49,9 @@ export default {
     getBaseThemeCSS(baseCTheme, params, theme) {
         return BaseThemeStyle.getBaseC(this.name, baseCTheme, params, theme);
     },
+    getColorSchemeOption(colorScheme) {
+        return BaseThemeStyle.getColorSchemeOption(colorScheme);
+    },
     getStyleSheet(extendedCSS = '', props = {}) {
         if (this.css) {
             const _css = ObjectUtils.minifyCSS(`${this.css}${extendedCSS}`);

components/lib/basecomponent/BaseComponent.vue

@@ -91,32 +91,15 @@ export default {
         this._loadGlobalStyles();
         this._hook('onBeforeMount');
 
-        // @todo
+        // apply colorScheme settings
         const { colorScheme } = this.$globalThemeOptions || {};
 
-        let colorSchemeOption = {
-            light: {
-                class: '',
-                default: false
-            },
-            dark: {
-                class: 'p-dark',
-                default: false
-            }
-        };
-
         if (colorScheme) {
-            if (ObjectUtils.isObject(colorScheme)) {
+            const colorSchemeOption = BaseStyle.getColorSchemeOption(colorScheme);
-                colorSchemeOption.light = { ...colorSchemeOption.light, ...colorScheme.light };
+            const isClient = DomHandler.isClient();
-                colorSchemeOption.dark = { ...colorSchemeOption.dark, ...colorScheme.dark };
-            } else {
-                colorSchemeOption.light = { ...colorSchemeOption.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
-                colorSchemeOption.dark = { ...colorSchemeOption.dark, default: colorScheme === 'dark' };
-            }
-
             const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default;
-            const isDark = isAuto ? window.matchMedia('(prefers-color-scheme: dark)') : colorSchemeOption.dark?.default;
+            const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)') : colorSchemeOption.dark?.default;
-            const defaultDocument = DomHandler.isClient() ? window.document : undefined;
+            const defaultDocument = isClient ? window.document : undefined;
 
             Theme.setColorMode(isDark ? 'dark' : 'light');
 

components/lib/basetheme/style/BaseThemeStyle.js

@@ -80,14 +80,8 @@ export default {
 
         return css.join('');
     },
-    _toVariables(theme, options) {
+    getColorSchemeOption(colorScheme) {
-        return toVariables(theme, { prefix: options?.prefix });
+        let options = {
-    },
-    _transformCSS(name, css, mode, type, options = {}) {
-        const { layer, colorScheme } = options;
-
-        if (type !== 'style') {
-            let colorSchemeOption = {
             light: {
                 class: '',
                 rule: `:root{[CSS]}`,
@@ -102,14 +96,25 @@ export default {
 
         if (colorScheme) {
             if (ObjectUtils.isObject(colorScheme)) {
-                    colorSchemeOption.light = { ...colorSchemeOption.light, ...colorScheme.light };
+                options.light = { ...options.light, ...colorScheme.light };
-                    colorSchemeOption.dark = { ...colorSchemeOption.dark, ...colorScheme.dark };
+                options.dark = { ...options.dark, ...colorScheme.dark };
             } else {
-                    colorSchemeOption.light = { ...colorSchemeOption.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
+                options.light = { ...options.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
-                    colorSchemeOption.dark = { ...colorSchemeOption.dark, default: 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);
         }
@@ -117,12 +122,10 @@ export default {
         if (layer) {
             let layerOptions = {
                 name: 'primevue'
-                //order: '@layer'
+                //order: 'primevue'
             };
 
-            const _layer = ObjectUtils.isObject(layer) ? layer.name : layer;
+            ObjectUtils.isObject(layer) && (layerOptions.name = ObjectUtils.getItemValue(layer.name, { name, type }));
-
-            layerOptions.name = ObjectUtils.getItemValue(_layer, { name, type });
             css = ObjectUtils.isNotEmpty(layerOptions.name) ? SharedUtils.object.getRule(`@layer ${layerOptions.name}`, css) : css;
         }