To modify Dispatch Console 'Change Status' action status color

Step 1 — Create a CSS File

Create a .css file with your desired color overrides. Use the CSS snippets in the examples below as a starting point.

Step 2 — Upload as a Static Resource

1. Go to Setup in Salesforce
2. Search for Static Resources
3. Click New and upload your CSS file
4. Give it a name (e.g., GanttColors) — note the exact name, you'll need it in the next step

Example: To change the ‘Change Status’ color on Gantt

/* Use any hex color */

• .serviceList_new { background: #FF6B6B !important; }        /* None */
• .serviceList_assigned { background: #4ECDC4 !important; }   /* Scheduled */
• .serviceList_dispatched { background: #45B7D1 !important; } /* Dispatched */
• .serviceList_travel { background: #FFEAA7 !important; }     /* In Progress */
• .serviceList_couldnt_complete { background: #96CEB4 !important; } /* Cannot Complete */
• .serviceList_completed { background: #DDA0DD !important; }  /* Completed */
• .serviceList_cancelled { background: #FF8C69 !important; }  /* Canceled */

Example: Remove/hide all Gantt bar colors (transparent)

• /* To completely hide/remove Gantt bar colors */
• .serviceList_new { background: transparent !important; }          /* None */
• .serviceList_assigned { background: transparent !important; }     /* Scheduled */
• .serviceList_dispatched { background: transparent !important; }   /* Dispatched */
• .serviceList_travel { background: transparent !important; }       /* In Progress */
• .serviceList_onsite { background: transparent !important; }       /* On-site */
• .serviceList_completed { background: transparent !important; }    /* Completed */
• .serviceList_couldnt_complete { background: transparent !important; } /* Cannot Complete */
• .serviceList_other { background: transparent !important; }        /* Other */
• .serviceList_cancelled { background: transparent !important; }    /* Canceled */

Step 3 — Set the External CSS in Field Service Settings

1. Go to Setup → search for Field Service Settings
2. Navigate to the Dispatcher Console UI section
3. In the External CSS field, enter the name of your Static Resource (e.g., GanttColors)
4. Save and refresh the Dispatch Console for the changes to take effect