From 75b5f494d3e4c9104d543816597a5d8f4f21df5f Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 12 Mar 2024 09:46:43 +0000
Subject: [PATCH] Refactor on dynamic changes

---
 components/lib/basecomponent/BaseComponent.vue | 11 +++++++----
 components/lib/themes/config/index.js          |  7 +++++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index 2ab2e12a1..d0ba4ca3d 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -40,7 +40,7 @@ export default {
             deep: true,
             immediate: true,
             handler(newValue) {
-                const { primitive, semantic, global } = this.$style?.getCommonThemeCSS(newValue, this.$globalBaseTheme, this.$themeParams, this.$globalTheme);
+                const { primitive, semantic, global } = this.$style?.getCommonThemeCSS?.(newValue, this.$globalBaseTheme, this.$themeParams, this.$globalTheme) || {};
 
                 BaseStyle.loadTheme(primitive, { name: 'primitive-variables', useStyleOptions: this.$styleOptions });
                 BaseStyle.loadTheme(semantic, { name: 'semantic-variables', useStyleOptions: this.$styleOptions });
@@ -52,7 +52,7 @@ export default {
             immediate: true,
             handler(newValue) {
                 if (newValue) {
-                    const variables_css = this.$style?.getPresetThemeCSS(newValue, this.$globalTheme);
+                    const variables_css = this.$style?.getPresetThemeCSS?.(newValue, this.$globalTheme);
 
                     this.$style?.loadTheme(`${variables_css}`, { name: `${this.$style.name}-variables`, useStyleOptions: this.$styleOptions });
                 }
@@ -94,14 +94,17 @@ export default {
         // apply colorScheme settings
         const { colorScheme } = this.$globalThemeOptions || {};
 
-        if (colorScheme) {
+        if (colorScheme && !Theme.isColorSchemeInit()) {
             const colorSchemeOption = BaseStyle.getColorSchemeOption(colorScheme);
             const isClient = DomHandler.isClient();
+
+            console.log(window.matchMedia('(prefers-color-scheme: dark)'));
             const isAuto = !colorSchemeOption.light?.default && !colorSchemeOption.dark?.default;
-            const isDark = isAuto && isClient ? window.matchMedia('(prefers-color-scheme: dark)') : 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);
diff --git a/components/lib/themes/config/index.js b/components/lib/themes/config/index.js
index fcfd5538c..b6449d75d 100644
--- a/components/lib/themes/config/index.js
+++ b/components/lib/themes/config/index.js
@@ -5,6 +5,7 @@ const ServiceSymbol = Symbol();
 export default {
     _pConfig: undefined,
     _colorScheme: 'dark',
+    _initializeColorScheme: false,
     getPConfig() {
         return this._pConfig;
     },
@@ -21,6 +22,12 @@ export default {
     setColorScheme(newValue) {
         this._colorScheme = newValue;
     },
+    isColorSchemeInit() {
+        return this._initializeColorScheme;
+    },
+    setColorSchemeInit(newValue) {
+        this._initializeColorScheme = newValue;
+    },
     toggleColorScheme() {
         this._colorScheme = this._colorScheme === 'dark' ? 'light' : 'dark';
         const defaultDocument = SharedUtils.dom.isClient() ? window.document : undefined;