Ionic 4 - Unable to change toast close button color

Ionic Framework
1

I read the documentation, I followed it but I’m unable to change the close button color

I show the toast with the following code where I specify the cssClass as shown in documentation

    await this.toastController.create({
      message: error,
      color: 'danger',
      showCloseButton: true,
      cssClass: 'button-color-changed',
    }).then(toast => toast.present());

Then to my component scss file I add the corresponding class shown below but never changed

.button-color-changed {
  --button-color: #fff;
}

Then I read this issue and changed the css prepending the class with ion-toast but again nothing changed

ion-toast.button-color-changed {
  --button-color: #fff;
}

Then I moved the css class to variables.scss (before using the ion-toast prefixed then the other) but again nothing

Please help me to understand what I missed


Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0
   @angular-devkit/build-angular : 0.12.3
   @angular-devkit/schematics    : 7.2.3
   @angular/cli                  : 7.2.3
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 8 other plugins)

System:

   Android SDK Tools : 26.1.1 (/opt/devel/android/android-sdk-macosx/)
   NodeJS            : v11.12.0 (/usr/local/Cellar/node/11.12.0/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001
2

Try this code… this is work for me…

Add this code in global.scss file,

::ng-deep {
    .toast-button{
        color: var(--button-color);
    }
}

Add button variable code in your variables.scss.

--button-color: #181473;

3

Thanks but it doesn’t work, after adding the code you posted I simply changed the cssClass property to match the name on your example


    await this.toastController.create({
      message: error,
      color: 'danger',
      showCloseButton: true,
      cssClass: 'toast-button'
    }).then(toast => toast.present());
4

Well, I tell you… I’m stumped. I’ve tried everything I can think of to help you, but to no avail.

This may just be one of those things you cannot do… Because Ionic uses the shadow-dom stuff, you cannot just “reach in” to those items in the shadow-dom and style them. I think the only way to solve this problem is for the Ionic folks to expose a variable in their API, like --button-background-color or some such, so that you can change that value.

5

Thanks for your reply but I want to change the text color (for the CLOSE BUTTON) not the background color and the documentation says "use --button-color", this is the link to the toast css custom properties but where, how??

Properties like --button-color should solve problems related to shadow dom…

Here we have two problems

  • the close button seems not customizable
  • adding buttons and declaring the cssClass to them (see the example below) doesn’t work

Inspecting the DOM the <button> (inside the ion-toast element) contains the declared class but the css code isn’t found (I’ve placed it in variables.scss, global.scss and the component page .scss)

shoot01
shoot01.jpg942×181 51.8 KB 


    await this.toastController.create({
      message: error,
      // color: 'danger',
      showCloseButton: true,
      buttons: [
        {
          text: 'Mimic Close',
          cssClass: 'damned-class-not-applied',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    }).then(toast => toast.present());
6

This worked for me.

In global.scss, put this:

.button-color-changed {
  --button-color: purple;
}

Works for me. Let me know.

7

Already tried without success, just to be clear (maybe I missed something)

The global.scss contains the code posted by you and the home.page.ts contains the code shown below

  constructor(
    public toastController: ToastController) {}

  ngOnInit() {
    this.onUpdateError('simulated toast error');
  }

  async onUpdateError(error: any) {
    await this.toastController.create({
      message: error,
      // color: 'danger',
      showCloseButton: true,
      cssClass: 'button-color-changed',
      buttons: [
        {
          text: 'Mimic Close',
          cssClass: 'button-color-changed',
          handler: () => {
            console.log('Cancel clicked');
          }
        }
      ]
    }).then(toast => toast.present());  }
8

Here is my entire project. Note that I use it to test some other stuff, so there are a few things in here that have nothing to do with your problem.

home.page.ts:

import { Component } from '@angular/core';
import { ToastController } from '@ionic/angular';

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

  public item2BackgroundSet = false;

  constructor(
    private toastCtrl: ToastController,
  ) {}

  async handleClick() {
    this.item2BackgroundSet = !this.item2BackgroundSet;
    await this.toastCtrl.create({
      message: 'hello world',
      color: 'danger',
      showCloseButton: true,
      cssClass: 'button-color-changed',
    }).then(toast => toast.present());
  }

}

home.page.html:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-label>I am item 1</ion-label>
    </ion-item>
    <ion-item [ngClass]="{ 'use-pink-background': item2BackgroundSet }">
      <ion-label>I am item 2. Value of backgroundSet: {{item2BackgroundSet}}</ion-label>
    </ion-item>
  </ion-list>
  <ion-button (click)="handleClick()">
    I am a button. Push me to toggle the background color of item 2 and pop up a toast.
  </ion-button>
</ion-content>

home.page.scss: (nothing in here useful to you)

.use-pink-background {
  --ion-background-color: pink;
}

global.scss:

// http://ionicframework.com/docs/theming/

@import '~@ionic/angular/css/core.css';
@import '~@ionic/angular/css/normalize.css';
@import '~@ionic/angular/css/structure.css';
@import '~@ionic/angular/css/typography.css';
@import '~@ionic/angular/css/display.css';
@import '~@ionic/angular/css/padding.css';
@import '~@ionic/angular/css/float-elements.css';
@import '~@ionic/angular/css/text-alignment.css';
@import '~@ionic/angular/css/text-transformation.css';
@import '~@ionic/angular/css/flex-utils.css';

.button-color-changed {
   --button-color: purple;
}
9

Thanks for your time, i’m drive crazy, I’ve created a new blank project and copied your code but the toast button is always blue, the cssClass value is totally ignored

02
02731×70 3.68 KB

Tried Chrome, Firefox and Safari

1 Like
10

You must have some css somewhere that sets it to blue, because by default it would be white. When I comment out the --button-color css in global.scss then my button text color is white.

11

Maybe the default color changes by OS, the demo at the toast documentation page is blue (both MD and IOS)
I’m on MacOS Mojave

12

It looks like there was a bug which is fixed now:
https://github.com/ionic-team/ionic/pull/18133

So, to get the color changed I used the following in my global.scss

ion-toast.dangerToast {
    opacity: 0.9;
    //text-align: center;
    color: white;
    --background: var(--ion-color-danger);
    --button-color:#333 !important;
}

with the toast generation code as:

  async showToastAlert(message: string) {
    
    const toast = await this.toastController.create(
      {
        message: message,
        showCloseButton: true,
        translucent: false,
        position: 'bottom',
        cssClass: 'dangerToast',
        closeButtonText: 'OK',
        duration: 5000
      });
    toast.present();
  }