diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss
index 3703dfaa0f..fdb00aad11 100644
--- a/core/src/components/toast/toast.scss
+++ b/core/src/components/toast/toast.scss
@@ -53,6 +53,8 @@ ion-toast {
 }
 
 .toast-button {
+  --color: inherit;
+
   font-size: $toast-button-font-size;
 }
 
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 5e18b55b16..67cda9aef8 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -197,7 +197,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
             <div class="toast-message">{this.message}</div>
           }
           {this.showCloseButton &&
-            <ion-button fill="clear" color="light" ion-activatable class="toast-button" onClick={() => this.dismiss(undefined, 'cancel')}>
+            <ion-button fill="clear" ion-activatable class="toast-button" onClick={() => this.dismiss(undefined, 'cancel')}>
               {this.closeButtonText || 'Close'}
             </ion-button>
           }