Rename `colorMode` with `colorScheme`

app.vue

@@ -6,7 +6,7 @@
 
 <script>
 import EventBus from '@/layouts/AppEventBus';
-import { useColorMode } from 'primevue/themes';
+import { useColorScheme } from 'primevue/themes';
 
 export default {
     mounted() {
@@ -26,9 +26,9 @@ export default {
             document.startViewTransition(() => this.applyTheme(event));
         },
         applyTheme(event) {
-            const { toggleColorMode } = useColorMode();
+            const { toggleColorScheme } = useColorScheme();
 
-            toggleColorMode();
+            toggleColorScheme();
             /*this.$appState.darkTheme = event.dark;
 
             if (event.dark) document.documentElement.classList.add('p-dark');

components/lib/basecomponent/BaseComponent.vue

@@ -101,7 +101,7 @@ export default {
             const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)') : colorSchemeOption.dark?.default;
             const defaultDocument = isClient ? window.document : undefined;
 
-            Theme.setColorMode(isDark ? 'dark' : 'light');
+            Theme.setColorScheme(isDark ? 'dark' : 'light');
 
             if (isDark && defaultDocument) {
                 DomHandler.addClass(defaultDocument.documentElement, colorSchemeOption.dark?.class);

components/lib/config/PrimeVue.js

@@ -167,7 +167,8 @@ export const defaultOptions = {
                 name: '', // (component_name, type=variable|style) => layer_names // default: primevue
                 order: '' // (layer_names) => layer_order // default: @layer primevue
             }*/
-        }
+        },
+        extend: {}
     },
     pt: undefined,
     ptOptions: {

components/lib/themes/config/index.js

@@ -4,7 +4,7 @@ const ServiceSymbol = Symbol();
 
 export default {
     _pConfig: undefined,
-    _colorMode: 'dark',
+    _colorScheme: 'dark',
     getPConfig() {
         return this._pConfig;
     },
@@ -15,20 +15,44 @@ export default {
     onPConfigChange(callback) {
         ThemeService.on(ServiceSymbol, callback);
     },
-    getColorMode() {
+    getColorScheme() {
-        return this._colorMode;
+        return this._colorScheme;
     },
-    setColorMode(newValue) {
+    setColorScheme(newValue) {
-        this._colorMode = newValue;
+        this._colorScheme = newValue;
     },
-    toggleColorMode() {
+    toggleColorScheme() {
-        this._colorMode = this._colorMode === 'dark' ? 'light' : 'dark';
+        this._colorScheme = this._colorScheme === 'dark' ? 'light' : 'dark';
         const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined;
 
         if (defaultDocument) {
-            const className = 'p-dark'; // @todo
+            //@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
+                }
+            };
 
-            this._colorMode !== 'dark' ? SharedUtils.dom.removeClass(defaultDocument.documentElement, className) : SharedUtils.dom.addClass(defaultDocument.documentElement, className);
+            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' };
+                }
+            }
+
+            SharedUtils.dom.removeMultipleClasses(defaultDocument.documentElement, [options.dark.class, options.light.class]);
+            SharedUtils.dom.addClass(defaultDocument.documentElement, this._colorScheme === 'dark' ? options.dark.class : options.light.class);
         }
 
         return this._colorMode;

components/lib/themes/utils/index.js

@@ -3,4 +3,4 @@ export * from './dt';
 export { default as ThemeService } from './service';
 export { default as SharedUtils } from './sharedUtils';
 export { default as toVariables } from './toVariables';
-export { default as useColorMode } from './useColorMode';
+export { default as useColorScheme } from './useColorScheme';

components/lib/themes/utils/sharedUtils.js

@@ -163,6 +163,14 @@ export default {
             }
 
             return false;
+        },
+        removeMultipleClasses(element, classNames) {
+            if (element && classNames) {
+                [classNames]
+                    .flat()
+                    .filter(Boolean)
+                    .forEach((cNames) => cNames.split(' ').forEach((className) => this.removeClass(element, className)));
+            }
         }
     }
 };

components/lib/themes/utils/useColorMode.js

@@ -1,12 +0,0 @@
-import Theme from 'primevue/themes';
-
-export default () => {
-    return {
-        colorMode: Theme.getColorMode(),
-        toggleColorMode() {
-            this.colorMode = Theme.toggleColorMode();
-
-            return this.colorMode;
-        }
-    };
-};

components/lib/themes/utils/useColorScheme.js

@@ -0,0 +1,12 @@
+import Theme from 'primevue/themes';
+
+export default () => {
+    return {
+        colorScheme: Theme.getColorScheme(),
+        toggleColorScheme() {
+            this.colorScheme = Theme.toggleColorScheme();
+
+            return this.colorScheme;
+        }
+    };
+};