I am currently utilizing a platform that displays toast messages to the user, and I have integrated hyperlinks within these toasts using innerHTML. The content of the toast is styled with white text on a blue background. However, the hyperlinks within anchor tags are not easily readable as they appear in a slightly lighter shade of blue compared to the toast's background. My aim is to have them displayed in the same color as the rest of the text (white).
import { ToastController } from '@ionic/angular';
async presentToast(message, color, duration, position) {
const toast = await this.toastController.create({
message: message,
duration: duration,
color: color,
position: position
});
toast.present();
}
Here's an example of how I'm using the service:
showToast(){
this.toastService.presentToast('Please <a href = \'https://www.google.co.uk\' target= \'_blank\'> click me</a>', 'primary', 4000, 'top', );
}
These are the primary colors being passed through:
--ion-color-primary: #0000A0;
--ion-color-primary-rgb: 66,140,255;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #0000A0;
--ion-color-primary-tint: #0000A0;
Is there a CSS class I could apply to override the hyperlink color? Alternatively, is there a specific value within my primary colors that I can tweak to achieve the desired result?