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..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 } from '../common/color';
 import { toPromise } from '../common/utils';
 import type { Action } from './dialog';
 
@@ -50,11 +49,11 @@ VantComponent({
     },
     confirmButtonColor: {
       type: String,
-      value: RED,
+      value: '',
     },
     cancelButtonColor: {
       type: String,
-      value: GRAY,
+      value: '',
     },
     showConfirmButton: {
       type: Boolean,
diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml
index a1d8e3cfc..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: {{ cancelButtonColor }}"
+      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: {{ confirmButtonColor }}"
+      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: {{ cancelButtonColor }}"
+        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: {{ confirmButtonColor }}"
+        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,
+};