how to customize background color in toastrservice angular

FYI - I'm using ngx-toastr to show toaster on UI.

/* Custom Toastr Styles */ .custom-toast-success { background-color: #00FF00; /* Green background for success */ color: #FFFFFF; /* White text color for success */ width: 300px; /* Set custom width */ height: 80px; /* Set custom height */ } .custom-toast-warning { background-color: #FF0000; /* Red background for warning */ color: #FFFFFF; /* White text color for warning */ width: 400px; /* Set custom width */ height: 100px; /* Set custom height */ }
use this kind of above CSS for your toaster style and colors and below is the component file source code.


import { ToastrService } from 'ngx-toastr'; @Component({ // ... }) export class YourComponent { constructor(private toastr: ToastrService) {} showSuccess() { this.toastr.success('Custom Success Message', 'Success', { toastClass: 'custom-toast-success', // Apply custom CSS class }); } showWarning() { this.toastr.warning('Custom Warning Message', 'Warning', { toastClass: 'custom-toast-warning', // Apply custom CSS class }); } }