How to recolor the VICIdial agent screen

Recoloring the agent screen is about giving the people on the phones a workspace that looks deliberate. Whether you are matching a client's brand or just making one Campaign visually distinct from another, you do it with a screen color template and the Agent Screen Colors pulldown. The agent screen has no hidden color fields of its own; it inherits whatever template you point it at, which means every visual change you make starts in a template and ends with a single assignment.

There are really two halves to this job. First you build a template that holds your hex values and your logo, and second you tell the agent screen to use it. Keeping those steps separate is deliberate, because it lets you reuse a single palette across many screens or swap one palette for another in seconds without re-entering a single color. If a recolor goes wrong, reverting is just as quick, since you only have to point the pulldown back at the original template.

Build the palette

Create a Screen Colors template and set its hex values. The Menu Background drives the sidebar and defaults to 015B91; keep it dark because white text sits over it. The Frame Background is the main area and defaults to D9E6FE; keep it light because black text sits over it. The Standard Row Backgrounds (defaults 9BB9FB, B9CBFD, 8EBCFD, B6D3FC, A3C3D6) shade sections and alternating rows. One detail matters specifically for agents: the Standard Row 5 Background is the color shown behind the logo after an agent has logged in, so pick it with the post-login view in mind. The Alternate Row Backgrounds (defaults BDFFBD, 99FF99, CCFFCC) set apart other sections.

Point the agent screen at it

sequenceDiagram
  participant Admin
  participant Settings
  participant AgentUI
  Admin->>Settings: Open System Settings page
  Admin->>Settings: Pick template in Agent Screen Colors
  Settings-->>AgentUI: Apply palette and logo
  AgentUI-->>Admin: Agent screen now themed

As the sequence shows, the agent UI does not change until you select your template in the Agent Screen Colors pulldown on the System Settings modification page. Make sure the template's Active flag is on, or it will not appear as an option. For the wider context of how this fits with scripts and labels, see our agent screen configuration guide.

Remember that this pulldown is independent from the admin and chat selections, so theming the agent screen leaves the rest of your interface untouched. If you want the whole platform to match, you assign the same template to all three pulldowns; if you only want callers to see the new look, you assign it to Agent Screen Colors alone. The custom logo you chose in the template travels with it onto the agent screen automatically.

Common gotcha

Agents may keep seeing the old colors because a browser cached the previous theme; a hard refresh after the next login usually clears it. Also remember the contrast rules: a dark Frame Background makes the black on-screen text unreadable, which slows down [[wrap-up]] and disposition selection. If you are theming the screen because you are reorganizing it, our piece on modifying a VICIdial script pairs well, and the right Hotkeys plus a calm palette keep agents moving.

If you would rather have a fully branded agent screen set up without touching hex codes yourself, see VICIfast pricing for managed VICIdial hosting.