CODEWITHSUNDEEP
htmlcssangulartypescriptionic4
Sampath
Sampath

Reputation: 65880

Change the background color of the toast message Ionic 4

How can I change the background color of the toast message?

I have tried this: But no luck. Is that due to the shadow DOM effect?

variable.scss

--background:red;

global.scss

ion-toast>.toast-wrapper {
    background-color: red !important;
}

.ts

  async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      message: data,
      duration: 3000000,
      position: 'bottom'
    });
    toast.present();
  }

enter image description here

Upvotes: 5

Views: 8563

Answers (7)

suyashpatil
suyashpatil

Reputation: 329

For someone looking for a solution with Ionic v7, this is what you can do to apply custom CSS for toastController.

  1. Specify cssClass property in toastController.create().

    const toast = await this.toastController.create({
  message: 'Your Toast Message',
  duration: 2000,
  cssClass: 'toast-success'
});

  2. In your global.scss, specify your styles.

    ion-toast.toast-success {
  &::part(container) {
    background: #24a148;
    color: #fff;
    border-color: #24a148;
    border-radius: 4px;
  }
}

Upvotes: 1

dpetraz
dpetraz

Reputation: 1

this solution works in ionic v4 as well as in ionic v6:

first define your background color using the ionic attribute "--background" (class does not need to be defined in global.scss)

.toast-background {
    --background: rgb(175,175,175);
}

and then reference the new class when you launch your toastController

const toast = await this.toastCtrl.create({
    message: 'Message Here.',
    duration: 30000,
    cssClass: 'toast-background'
});
toast.present();

Upvotes: 0

Rajitha Udayanga
Rajitha Udayanga

Reputation: 1732

You can use colors from your application's color palette. Default options are: primary, secondary, tertiary, success, warning, danger, light, medium, and dark.

async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      ...
      color: 'primary'
    });
    toast.present();
  }

for more details Ionic docs

Upvotes: 0

aamp
aamp

Reputation: 126

You can set the color in the toast parameters:

 const toastController = document.querySelector('ion-toast-controller');
 await toastController.componentOnReady();
 const toast = await toastController.create({
   showCloseButton: false,
   message: 'test toast message',
   position: 'top',
   duration: 2000,
   color: 'danger'
 });
 await toast.present();

Upvotes: 11

EinfachHans
EinfachHans

Reputation: 255

Make sure youe declare the sytle class in the public .scss file. I think it is called app.scss for Ionic 3 and global.scss in Ionic v4.

Upvotes: 1

Sivaramakrishnan
Sivaramakrishnan

Reputation: 739

Add the cssClass property while creating the toast and add the class name to it

 async showErrorToast(data: string) {
    const toast = await this.toastCtrl.create({
      message: data,
      duration: 3000000,
      position: 'bottom',
      cssClass: 'toast_style'
    });
    toast.present();
  }

Add style class

.toast_style {
background-color:red;
}

Refer ionic documentation of toast here toast

Upvotes: 0

Ahmed Atoui
Ahmed Atoui

Reputation: 1556

first define class like this :

.toast-bg {
background-color:red;
}

then pass class as param to toast option like this :

{
    message: data,
    duration: 3000000,
    position: 'bottom',
    cssClass:'toast-bg'

}

Upvotes: 1

Related Questions