CODEWITHSUNDEEP
ionic-frameworkionic2
user2828442
user2828442

Reputation: 2525

How can i change the background color of my toast

I have added a toast in my project using the below code in my newrecord.ts

constructor(private toastCtrl: ToastController,
    private _listProduct : ListproductService,
    private _deleteProduct : DeleteProductService,
    public navCtrl: NavController,public navParams: NavParams,
    public loadingCtrl: LoadingController,
    private datePipe: DatePipe) {
        this.loading = this.loadingCtrl.create({
                            content: 'Please wait...'
                        });

        this.mytoast = this.toastCtrl.create({
                            message: 'Data loaded successfully',
                            duration: 3000,
                            position: 'top'
                        });

        this.initializeItems();
}

and inside ngOnInit() I have called my toast like this this.mytoast.present();

It is working perfectly fine but instead of black can I use any other background color for my toast?

I have read cssClass property but I don't know how to use it

Upvotes: 0

Views: 1942

Answers (1)

David Dal Busco
David Dal Busco

Reputation: 8692

You could define another background color by overriding a Ionic Sass Variables in your variables.scss

In case of toast background you could define for example white or #ffffff like following:

$toast-ios-background: #ffffff; // Apply for iOS
$toast-md-background: #ffffff; // Apply for Android
$toast-wp-background: white; // Apply for Windows

You could find the all list of sass variables you could override in the documentation:

https://ionicframework.com/docs/theming/overriding-ionic-variables/

In case you would like even more flexibility or to set other styles, you could set a custom css property to your toast with the cssClass option

For example:

 this.mytoast = this.toastCtrl.create({
                        message: 'Data loaded successfully',
                        duration: 3000,
                        position: 'top',
                        cssClass: 'myCustomCss'
                    });

Then you could modify it in your stylesheets, like in app.component.scss

.myCustomCss {
    // The styles you would like to apply
 }

See ToastController API documentation:

https://ionicframework.com/docs/api/components/toast/ToastController/

But when it goes to the background of the toast, first try with the variables ;)

Upvotes: 3

Related Questions