Dynamically change Background Color of Overlay

[cmbarnett87]

I'm trying to change the background color in the "ui-widget-overlay" class when a p-dialog appears based on the value of a variable in my code. For example, I've figured out how to change the style of the dialog itself using styleClass but can't seem to figure out how to do something like this for the overlay. Any thoughts?

Example of changing classes dynamically
<p-dialog [styleClass]="activityStyleClass">

switch (this.currentActivity.ShortDesc) {
case 'Practice':
this.activityStyleClass = 'orangeDialog';
break;
case 'Live':
this.activityStyleClass = 'greenDialog';
break;
case 'Break':
this.activityStyleClass = 'redDialog';
break;
default:
break;
}

Class I'd like to modify by changing the background color based on the "ShortDesc" variable
.ui-widget-overlay {
background: red;
}