title: Change the background color of the toast message Ionic 4
body: <p>How can I change the background color of the toast message?</p>
  
  <p>I have tried this: But no luck. Is that due to the <code>shadow DOM</code> effect?</p>
  
  <p><em>variable.scss</em></p>
  
  <pre><code>--background:red;
  </code></pre>
  
  <p><em>global.scss</em></p>
  
  <pre><code>ion-toast&gt;.toast-wrapper {
      background-color: red !important;
  }
  </code></pre>
  
  <p><em>.ts</em></p>
  
  <pre><code>  async showErrorToast(data: string) {
      const toast = await this.toastCtrl.create({
        message: data,
        duration: 3000000,
        position: 'bottom'
      });
      toast.present();
    }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/TqKR8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TqKR8.png" alt="enter image description here"></a></p>