bug: Action Sheet cancel button background not showing in Ionic Dark Mode in iOS

[canserkanuren]

Bug Report

Ionic version:

[x] 5.x

Current behavior:

The background of the cancel button of the Action Sheet Controller is not visible when using Dark Mode in iOS but is visible when using normal mode.

Expected behavior:

The background of the cancel button should the same as the other action sheet buttons.

Steps to reproduce:

Nothing much, I created a new Ionic App, and then copied this code into home.component.ts:

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private actionSheetController: ActionSheetController) {}
  async showActionSheet() {
    const actionSheet = await this.actionSheetController.create({
      header: 'Albums',
      buttons: [{
        text: 'Delete',
        role: 'destructive',
        icon: 'trash',
        handler: () => {
          console.log('Delete clicked');
        }
      }, {
        text: 'Share',
        icon: 'share',
        handler: () => {
          console.log('Share clicked');
        }
      }, {
        text: 'Play (open modal)',
        icon: 'scan-outline',
        handler: () => {
          console.log('Play clicked');
        }
      }, {
        text: 'Favorite',
        icon: 'heart',
        handler: () => {
          console.log('Favorite clicked');
        }
      }, {
        text: 'Cancel',
        icon: 'close',
        role: 'cancel',
        handler: () => {
          console.log('Cancel clicked');
        }
      }]
    });
    await actionSheet.present();
  }
}

Related code:

Here's my GitHub repository for the project : https://github.com/canserkanuren/ionic-action-sheet

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.6.0 (/Users/canserkanuren/.nvm/versions/node/v12.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res (update available: 0.12.1) : 0.11.0
   native-run (update available: 1.0.0)   : 0.3.0

System:

   NodeJS : v12.13.1 (/Users/canserkanuren/.nvm/versions/node/v12.13.1/bin/node)
   npm    : 6.14.2
   OS     : macOS Catalina

Here's a few screenshots for the normal mode and Dark mode :

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm i @ionic/angular@5.1.0-dev.202004201558.57b2a6b

[canserkanuren]

It seems like it's working!

Thank you!!

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/21084, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.