From 2841ed36845e27b1d5805396f5c624488f105fd8 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Wed, 6 Mar 2024 10:38:51 +0000
Subject: [PATCH] Rename `colorMode` with `colorScheme`

---
 app.vue                                       |  6 +--
 .../lib/basecomponent/BaseComponent.vue       |  2 +-
 components/lib/config/PrimeVue.js             |  3 +-
 components/lib/themes/config/index.js         | 42 +++++++++++++++----
 components/lib/themes/utils/index.js          |  2 +-
 components/lib/themes/utils/sharedUtils.js    |  8 ++++
 components/lib/themes/utils/useColorMode.js   | 12 ------
 components/lib/themes/utils/useColorScheme.js | 12 ++++++
 8 files changed, 60 insertions(+), 27 deletions(-)
 delete mode 100644 components/lib/themes/utils/useColorMode.js
 create mode 100644 components/lib/themes/utils/useColorScheme.js

diff --git a/app.vue b/app.vue
index 85643b6a3..0dcfaafc1 100644
--- a/app.vue
+++ b/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');
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index da0a6a1e4..394479325 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/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);
diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js
index 27acaec56..ffdf46e7d 100644
--- a/components/lib/config/PrimeVue.js
+++ b/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: {
diff --git a/components/lib/themes/config/index.js b/components/lib/themes/config/index.js
index 73b47f013..fcfd5538c 100644
--- a/components/lib/themes/config/index.js
+++ b/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() {
-        return this._colorMode;
+    getColorScheme() {
+        return this._colorScheme;
     },
-    setColorMode(newValue) {
-        this._colorMode = newValue;
+    setColorScheme(newValue) {
+        this._colorScheme = newValue;
     },
-    toggleColorMode() {
-        this._colorMode = this._colorMode === 'dark' ? 'light' : 'dark';
+    toggleColorScheme() {
+        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;
diff --git a/components/lib/themes/utils/index.js b/components/lib/themes/utils/index.js
index 496950606..dca1e9a57 100644
--- a/components/lib/themes/utils/index.js
+++ b/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';
diff --git a/components/lib/themes/utils/sharedUtils.js b/components/lib/themes/utils/sharedUtils.js
index 07ccd49cf..982bb628d 100644
--- a/components/lib/themes/utils/sharedUtils.js
+++ b/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)));
+            }
         }
     }
 };
diff --git a/components/lib/themes/utils/useColorMode.js b/components/lib/themes/utils/useColorMode.js
deleted file mode 100644
index 0c0ab5da4..000000000
--- a/components/lib/themes/utils/useColorMode.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Theme from 'primevue/themes';
-
-export default () => {
-    return {
-        colorMode: Theme.getColorMode(),
-        toggleColorMode() {
-            this.colorMode = Theme.toggleColorMode();
-
-            return this.colorMode;
-        }
-    };
-};
diff --git a/components/lib/themes/utils/useColorScheme.js b/components/lib/themes/utils/useColorScheme.js
new file mode 100644
index 000000000..0b72160ab
--- /dev/null
+++ b/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;
+        }
+    };
+};