From 63f1672e1fd07b0549a879af7d74487131f25945 Mon Sep 17 00:00:00 2001
From: johnsonwong666 <1067100250@qq.com>
Date: Mon, 26 Feb 2024 15:47:57 +0800
Subject: [PATCH 1/2] fix(Dialog): fix button color with different theme

---
 packages/dialog/dialog.ts  |  2 ++
 packages/dialog/index.ts   | 19 ++++++++++++++++---
 packages/dialog/index.wxml |  8 ++++----
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/dialog/dialog.ts b/packages/dialog/dialog.ts
index e205f46b0..81a29b6f2 100644
--- a/packages/dialog/dialog.ts
+++ b/packages/dialog/dialog.ts
@@ -43,6 +43,8 @@ interface DialogOptions {
   showCancelButton?: boolean;
   closeOnClickOverlay?: boolean;
   confirmButtonOpenType?: string;
+  confirmButtonColor?: string;
+  cancelButtonColor?: string;
 }
 
 const defaultOptions: DialogOptions = {
diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts
index 5ec1628ec..8c7025609 100644
--- a/packages/dialog/index.ts
+++ b/packages/dialog/index.ts
@@ -1,6 +1,6 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
-import { GRAY, RED } from '../common/color';
+import { GRAY, RED, WHITE } from '../common/color';
 import { toPromise } from '../common/utils';
 import type { Action } from './dialog';
 
@@ -13,6 +13,7 @@ VantComponent({
       type: Boolean,
       observer(show: boolean) {
         !show && this.stopLoading();
+        this.handleButtonColor();
       },
     },
     title: String,
@@ -50,11 +51,11 @@ VantComponent({
     },
     confirmButtonColor: {
       type: String,
-      value: RED,
+      value: '',
     },
     cancelButtonColor: {
       type: String,
-      value: GRAY,
+      value: '',
     },
     showConfirmButton: {
       type: Boolean,
@@ -79,6 +80,8 @@ VantComponent({
       confirm: false,
       cancel: false,
     },
+    innerConfirmButtonColor: '',
+    innerCancelButtonColor: '',
     callback: (() => {}) as unknown as (
       action: string,
       context: WechatMiniprogram.Component.TrivialInstance
@@ -143,5 +146,15 @@ VantComponent({
         });
       }
     },
+
+    handleButtonColor() {
+      const { confirmButtonColor, cancelButtonColor, theme } = this.data;
+      this.setData({
+        innerConfirmButtonColor:
+          confirmButtonColor || (theme === 'default' ? RED : WHITE),
+        innerCancelButtonColor:
+          cancelButtonColor || (theme === 'default' ? GRAY : WHITE),
+      });
+    },
   },
 });
diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml
index a1d8e3cfc..a28fa1c59 100644
--- a/packages/dialog/index.wxml
+++ b/packages/dialog/index.wxml
@@ -35,7 +35,7 @@
       loading="{{ loading.cancel }}"
       class="van-dialog__button van-hairline--right"
       custom-class="van-dialog__cancel cancle-button-class"
-      custom-style="color: {{ cancelButtonColor }}"
+      custom-style="color: {{ innerCancelButtonColor }}"
       bind:click="onCancel"
     >
       {{ cancelButtonText }}
@@ -46,7 +46,7 @@
       class="van-dialog__button"
       loading="{{ loading.confirm }}"
       custom-class="van-dialog__confirm confirm-button-class"
-      custom-style="color: {{ confirmButtonColor }}"
+      custom-style="color: {{ innerConfirmButtonColor }}"
       button-id="{{ confirmButtonId }}"
       open-type="{{ confirmButtonOpenType }}"
       lang="{{ lang }}"
@@ -81,7 +81,7 @@
         loading="{{ loading.cancel }}"
         class="van-dialog__button van-hairline--right"
         custom-class="van-dialog__cancel cancle-button-class"
-        custom-style="color: {{ cancelButtonColor }}"
+        custom-style="color: {{ innerCancelButtonColor }}"
         bind:click="onCancel"
       >
         {{ cancelButtonText }}
@@ -97,7 +97,7 @@
         class="van-dialog__button"
         loading="{{ loading.confirm }}"
         custom-class="van-dialog__confirm confirm-button-class"
-        custom-style="color: {{ confirmButtonColor }}"
+        custom-style="color: {{ innerConfirmButtonColor }}"
         button-id="{{ confirmButtonId }}"
         open-type="{{ confirmButtonOpenType }}"
         lang="{{ lang }}"

From 2a045f70d27764cdcb582c0fc0e98a75a6099889 Mon Sep 17 00:00:00 2001
From: johnsonwong666 <1067100250@qq.com>
Date: Thu, 14 Mar 2024 20:48:55 +0800
Subject: [PATCH 2/2] fix(Dialog): use wxs to set button color

---
 packages/dialog/index.ts   | 14 --------------
 packages/dialog/index.wxml |  9 +++++----
 packages/dialog/index.wxs  | 26 ++++++++++++++++++++++++++
 3 files changed, 31 insertions(+), 18 deletions(-)
 create mode 100644 packages/dialog/index.wxs

diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts
index 8c7025609..a11350c90 100644
--- a/packages/dialog/index.ts
+++ b/packages/dialog/index.ts
@@ -1,6 +1,5 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
-import { GRAY, RED, WHITE } from '../common/color';
 import { toPromise } from '../common/utils';
 import type { Action } from './dialog';
 
@@ -13,7 +12,6 @@ VantComponent({
       type: Boolean,
       observer(show: boolean) {
         !show && this.stopLoading();
-        this.handleButtonColor();
       },
     },
     title: String,
@@ -80,8 +78,6 @@ VantComponent({
       confirm: false,
       cancel: false,
     },
-    innerConfirmButtonColor: '',
-    innerCancelButtonColor: '',
     callback: (() => {}) as unknown as (
       action: string,
       context: WechatMiniprogram.Component.TrivialInstance
@@ -146,15 +142,5 @@ VantComponent({
         });
       }
     },
-
-    handleButtonColor() {
-      const { confirmButtonColor, cancelButtonColor, theme } = this.data;
-      this.setData({
-        innerConfirmButtonColor:
-          confirmButtonColor || (theme === 'default' ? RED : WHITE),
-        innerCancelButtonColor:
-          cancelButtonColor || (theme === 'default' ? GRAY : WHITE),
-      });
-    },
   },
 });
diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml
index a28fa1c59..a457a8bce 100644
--- a/packages/dialog/index.wxml
+++ b/packages/dialog/index.wxml
@@ -1,4 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
 
 <van-popup
   show="{{ show }}"
@@ -35,7 +36,7 @@
       loading="{{ loading.cancel }}"
       class="van-dialog__button van-hairline--right"
       custom-class="van-dialog__cancel cancle-button-class"
-      custom-style="color: {{ innerCancelButtonColor }}"
+      custom-style="{{computed.buttonColor({theme, cancelButtonColor, buttonName: 'cancelButton'})}}"
       bind:click="onCancel"
     >
       {{ cancelButtonText }}
@@ -46,7 +47,7 @@
       class="van-dialog__button"
       loading="{{ loading.confirm }}"
       custom-class="van-dialog__confirm confirm-button-class"
-      custom-style="color: {{ innerConfirmButtonColor }}"
+      custom-style="{{computed.buttonColor({theme, confirmButtonColor, buttonName: 'confirmButton'})}}"
       button-id="{{ confirmButtonId }}"
       open-type="{{ confirmButtonOpenType }}"
       lang="{{ lang }}"
@@ -81,7 +82,7 @@
         loading="{{ loading.cancel }}"
         class="van-dialog__button van-hairline--right"
         custom-class="van-dialog__cancel cancle-button-class"
-        custom-style="color: {{ innerCancelButtonColor }}"
+        custom-style="{{computed.buttonColor({theme, cancelButtonColor, buttonName: 'cancelButton'})}}"
         bind:click="onCancel"
       >
         {{ cancelButtonText }}
@@ -97,7 +98,7 @@
         class="van-dialog__button"
         loading="{{ loading.confirm }}"
         custom-class="van-dialog__confirm confirm-button-class"
-        custom-style="color: {{ innerConfirmButtonColor }}"
+        custom-style="{{computed.buttonColor({theme, confirmButtonColor, buttonName: 'confirmButton'})}}"
         button-id="{{ confirmButtonId }}"
         open-type="{{ confirmButtonOpenType }}"
         lang="{{ lang }}"
diff --git a/packages/dialog/index.wxs b/packages/dialog/index.wxs
new file mode 100644
index 000000000..c245b03c5
--- /dev/null
+++ b/packages/dialog/index.wxs
@@ -0,0 +1,26 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var RED = '#ee0a24';
+var WHITE = '#fff';
+var GRAY = '#323233';
+function buttonColor(data) {
+  var type = data.buttonName;
+  var theme = data.theme;
+  var color = '';
+  switch (type) {
+    case 'confirmButton':
+      color = data.confirmButtonColor || (theme === 'default' ? RED : WHITE);
+      break;
+    case 'cancelButton':
+      color = data.cancelButtonColor || (theme === 'default' ? GRAY : WHITE);
+      break;
+  }
+
+  return style({
+    color: color,
+  });
+}
+
+module.exports = {
+  buttonColor: buttonColor,
+};