In order to send alerts when a specific event is about to end, I have developed a CSHTML email template file. The goal is to notify users 10 minutes before the event ends and then again at 5 minutes before the end time. To distinguish between different types of events, I would like to use color coding in the messages. Here is what I currently have:
<strong style="color: {event color}">@alert.event</strong> is scheduled to end: <strong>@endEasternTime
I am looking for a way to dynamically set the {event color} based on the value in @alert.event. I attempted to write a script within the file but struggled with transferring its return value into the style tag:
<script>
// Retrieving the root element
var r = document.querySelector(':root');
// Function for determining the event color
function getEventColor(event) {
// Obtaining styles (properties and values) for the root
var rs = getComputedStyle(r);
// Assigning colors based on the event type
return (event === "event1"
? rs.getPropertyValue('--evt1Color')
: (event === "event2"
? rs.getPropertyValue('--evt2Color')
: (event === "event3"
? rs.getPropertyValue('--evt3Color')
: rs.getPropertyValue('--bdrColor')
)
)
);
}
</script>
Please note that I have created HTML variables in the file to link color schemes with other styles present (such as border-color). For brevity and clarity, these are not included here.
Is there a viable method to accomplish this task? If not through the inline CSS approach mentioned above, could I potentially update a class or id dynamically using a technique similar to the script method discussed earlier? Any assistance provided will be greatly appreciated.