diff --git a/src/components/app-wrapper.js b/src/components/app-wrapper.js
index 356803dee..b67e50a6d 100644
--- a/src/components/app-wrapper.js
+++ b/src/components/app-wrapper.js
@@ -85,6 +85,21 @@ let lightTheme = createTheme({
     },
 });
 
+lightTheme = createTheme(lightTheme, {
+    palette: {
+        cancelButtonColor: {
+            main: lightTheme.palette.text.secondary,
+        },
+    },
+    components: {
+        CancelButton: {
+            defaultProps: {
+                color: 'cancelButtonColor',
+            },
+        },
+    },
+});
+
 let darkTheme = createTheme({
     palette: {
         mode: 'dark',
@@ -124,6 +139,21 @@ let darkTheme = createTheme({
     },
 });
 
+darkTheme = createTheme(darkTheme, {
+    palette: {
+        cancelButtonColor: {
+            main: darkTheme.palette.text.secondary,
+        },
+    },
+    components: {
+        CancelButton: {
+            defaultProps: {
+                color: 'cancelButtonColor',
+            },
+        },
+    },
+});
+
 const getMuiTheme = (theme) => {
     if (theme === LIGHT_THEME) {
         return lightTheme;