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,6 +80,32 @@ export default {
 
         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 });
     },
@@ -87,28 +113,7 @@ export default {
         const { layer, colorScheme } = options;
 
         if (type !== 'style') {
-            let colorSchemeOption = {
+            const colorSchemeOption = this.getColorSchemeOption(colorScheme);
-                light: {
-                    class: '',
-                    rule: `:root{[CSS]}`,
-                    default: false
-                },
-                dark: {
-                    class: 'p-dark',
-                    rule: `.p-dark{[CSS]}`,
-                    default: false
-                }
-            };
-
-            if (colorScheme) {
-                if (ObjectUtils.isObject(colorScheme)) {
-                    colorSchemeOption.light = { ...colorSchemeOption.light, ...colorScheme.light };
-                    colorSchemeOption.dark = { ...colorSchemeOption.dark, ...colorScheme.dark };
-                } else {
-                    colorSchemeOption.light = { ...colorSchemeOption.light, default: colorScheme !== 'auto' && colorScheme !== 'dark' };
-                    colorSchemeOption.dark = { ...colorSchemeOption.dark, default: colorScheme === 'dark' };
-                }
-            }
 
             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;
         }