Menu

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Overriding Flex UI themes, branding and styling

Flex UI exposes 3 main levels of customization:

  1. Base Themes: Predefined themes Flex comes with out of the box.
  2. Base Theme Color Overrides: Global color overrides that are inherited by all Flex UI Components.
  3. Component Theme Overrides: Granular color overrides that allow you to customize a specific component.

Defining your theme

Base themes

Base themes provide a set of color themes as a starting point for your contact center. Flex UI includes the following predefined base themes:

  • GreyLight
  • GreyDark
  • FlexLight
  • FlexDark

Configuring a base theme

You can configure the desired base theme in the Flex configuration object.

const configuration = {
        colorTheme: {
            baseName: "FlexDark"
        }
};

Overriding base theme colors

You can also create your own variation of a theme by re-configuring base colors used in the theme.

In the below example we take GreyDark as the base theme. We then apply our own theming on top, overriding standard theme colors.

const configuration = {
    colorTheme: {
        baseName: "GreyDark",
        colors: {
            base0: "#000000",
            base1: "#222222",
            base2: "#444444",
            base3: "#d4d4d4",
            base4: "#e0e0e0",
            base5: "#efefef",
            base6: "#ffffff",
            darkTextColor: "#222222",
            buttonHoverColor: "rgba(0, 0, 0, 0.2)",
            tabSelectedColor: "#009cff",
            connectingColor: "#ff9800",
            disconnectedColor: "#c0192d"
        }
    }
};

See the complete list of overridable base theme colors.

Overriding individual components

Flex Theming also supports granular customizations at the individual component level. Here we override the MainHeader background color, text color as well as the SideNav background color and button colors.

const configuration = {
    colorTheme: {
        overrides: {
            MainHeader: {
                Container: {
                    background: "#2f5771",
                    color: "#ffffff"
                }
            },
            SideNav: {
                Container: {
                    background: "#4a4e60"
                },
                Button: {
                    background: "#4a4e60"
                },
            }
        }
    }
};

See the complete list of customizable components and properties.

Applying your theme

Once you've defined a theme, you'll need to apply it to Flex UI.

Applying your theme in a Flex Plugin

Define your color theme by specifying a baseName, along with optional colors and component overrides.

CustomTheme.js

export default {
    baseName: "GreyDark",
    colors: {
        base0: "#000000",
        base1: "#222222",
        base2: "#444444"
    },
    overrides: {
        MainHeader: {
            Container: {
                background: "#2f5771",
                color: "#ffffff"
            }
        },
        SideNav: {
            Container: {
                background: "#4a4e60"
            },
            Button: {
                background: "#4a4e60"
            },
        }
    }
}

Then set your custom theme inside the Flex Configuration colorTheme property and apply it during plugin initialization.

ThemePlugin.js

import { FlexPlugin } from 'flex-plugin';
import React from 'react';
import CustomTheme from './CustomTheme'

const PLUGIN_NAME = 'ThemePlugin';

export default class ThemePlugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  init(flex, manager) {
    const configuration = {
        colorTheme: CustomTheme
    };

    // apply theme
    manager.updateConfig(configuration);
  }
}

Applying themes to self-hosted installations of Flex

Include your custom theme in the configuration object's colorTheme property when initializing Flex.

const configuration = {
    colorTheme: {
        baseTheme: 'FlexDark'
    }
}

Twilio.Flex.runDefault(configuration);

Appendix

List of Base Theme Colors

{
    base1: "#000000",
    base2: "#000000",
    base3: "#000000",
    base4: "#000000",
    base5: "#000000",
    base6: "#000000",
    base7: "#000000",
    base8: "#000000",
    base9: "#000000",
    base10: "#000000",
    base11: "#000000",
    errorColor: "#CB3232",
    errorGlow: "rgba(234, 16, 16, 0.2)",
    buttonHoverColor: "rgba(0, 0, 0, 0.2)",
    tabSelectedColor: "#009cff",
    connectingColor: "#ff9800",
    disconnectedColor: "#c0192d",
    notificationBackgroundColorInformation: "#ffffff",
    notificationBackgroundColorSuccess: "#d0f4d1",
    notificationBackgroundColorWarning: "#ffe3b9",
    notificationBackgroundColorError: "#feced3",
    notificationIconColorError: "#d32f2f",
    notificationIconColorWarning: "#ea6c00",
    userAvailableColor: "#31aa71",
    userUnavailableColor: "#999999",
    defaultButtonColor: "#1976d2",
    lightTextColor: "#ffffff",
    darkTextColor: "#222222",
    disabledColor: "#d9dce4",
    focusColor: "#197bdd",
    focusGlow: "rgba(25, 123, 221, 0.2)",
};

List of Flex UI components and themable objects

UserCard: {
    AvatarContainer: {
        background: colors.base1,
    },
    AvailabilityContainer: {
        borderColor: colors.base5
    }
},

UserActivityControls: {
    Item: {
        color: textColor,
        lightHover: false
    },
    Items: {
        background: colors.base2,
    },
    Divider: {
        background: colors.base4,
    }
},

LoginView: {
    Container: {
        background: colors.base2,
        color: textColor,
    },
    LoginButton: {
        background: colors.defaultButtonColor,
        color: colors.lightTextColor,
    },
    Logo: {
        color: colors.base11
    }
},

RuntimeLoginView: {
    Container: {
        background: colors.base2,
        color: textColor
    },
    LoginButton: {
        background: colors.defaultButtonColor,
        lightHover: true
    }
},

AgentDesktopView: {
    Panel1: {
        background: colors.base2
    },
    Panel2: {
        background: colors.base2
    },
    ContentSplitter: {
        background: colors.base2,
        borderColor: colors.base4,
        color: colors.base10
    }
},

MainHeader: {
    Container: {
        background: lightTheme ? colors.base9 : colors.base3,
        color: colors.lightTextColor,
        borderColor: colors.base4
    },
    Button: {
        color: colors.lightTextColor,
        lightHover: true
    }
},

SideNav: {
    Container: {
        background: lightTheme ? colors.base8 : colors.base3,
        borderColor: colors.base4
    },
    Button: {
        color: colors.lightTextColor,
        background: lightTheme ? colors.base8 : colors.base3,
        lightHover: true
    },
    Icon: {
        color: colors.lightTextColor
    },
},

TaskDetailsPanel: {
    Container: {
        background: `linear-gradient(to bottom, ${colors.base1}, ${colors.base2})`,
        color: textColor
    },
    IconContainer: {
        color: colors.base10
    },
    SecondLine: {
        color: colors.base8
    }
},

IncomingTaskCanvas: {
    AcceptTaskButton: {
        color: colors.acceptTextColor,
        background: colors.acceptColor
    },
    RejectTaskButton: {
        color: colors.declineTextColor,
        background: colors.declineColor
    }
},

TaskInfoPanel: {
    Container: {
        color: textColor
    }
},

CallCanvas: {
    Button: {
        background: colors.base3,
        color: colors.base11
    },
    HangUpButton: {
        background: colors.declineColor,
        color: colors.declineTextColor
    },
},

TaskCanvas: {
    Container: {
        background: colors.base1
    }
},

TaskCanvasHeader: {
    Container: {
        background: colors.base1,
        color: textColor
    },
    WrapupTaskButton: {
        background: colors.declineColor,
        color: colors.declineTextColor,
    },
    EndTaskButton: {
        background: colors.completeTaskColor,
        color: colors.declineTextColor,
    }
},

TaskList: {
    Filter: {
        Container: {
            background: colors.base2,
            borderColor: colors.base4
        },
        EntryButton: {
            color: textColor
        },
        Menu: {
            Item: {
                color: textColor,
                lightHover: !lightTheme
            },
            Items: {}
        }
    },
    Item: {
        Container: {
            color: textColor,
            borderColor: colors.base4,
            background: colors.base2,
            lightHover: !lightTheme
        },
        Icon: {
            color: colors.lightTextColor
        },
        SelectedContainer: {
            background: colors.base1,
            color: textColor,
            lightHover: !lightTheme
        },
        Buttons: {
            DefaultButton: {
                color: colors.base11,
                background: colors.base3,
                lightHover: !lightTheme
            },
            AcceptButton: {
                color: colors.acceptTextColor,
                background: colors.acceptColor
            },
            RejectButton: {
                color: colors.declineTextColor,
                background: colors.declineColor
            }
        }
    },
},

TaskCard: {
    Container: {
        Default: {
            borderColor: colors.base4,
            lightHover: !lightTheme
        },
        Selected: {
            borderColor: colors.base11
        },
        Hover: {
            borderColor: colors.base11
        }
    },
    IconArea: {
        Default: {
            color: colors.lightTextColor
        },
    },
    ContentArea: {
        Default: {
            color: textColor,
            backgroundColor: colors.base1
        },
        Inactive: {
            color: textColor,
            backgroundColor: colors.base2
        }
    }
},

TaskCardPlaceholder: {
    borderColor: colors.base4
},

NoTasksCanvas: {
    Container: {
        color: textColor,
        background: colors.base2
    },
    Hint: {
        color: colors.base8
    },
},

CRMContainer: {
    Container: {
        borderColor: colors.base4
    },
    Placeholder: {
        Container: {
            color: textColor,
            background: colors.base1
        },
        Icon: {
            color: colors.base11
        },
        Button: {
            background: colors.defaultButtonColor,
            color: colors.lightTextColor
        },
        Hint: {
            color: colors.base8
        }
    }
},

Supervisor: {
    Container: {
        background: colors.base1
    },
    TaskCanvas: {
        HeaderButton: {
            color: colors.base11,
            background: colors.base3,
            lightHover: !lightTheme
        },
        Container: {
            borderColor: colors.base4
        },
        MonitorActiveButton: {
            background: colors.flexBlueColor,
            color: colors.lightTextColor
        },
        Button: {
            background: colors.base3,
            color: colors.base11
        },
    },
    WorkerCanvas: {
        Container: {
            background: colors.base2,
            borderColor: colors.base4,
            color: textColor
        },
        Header: {
            borderColor: colors.base4,
            color: textColor
        }
    }
},

WorkerDirectory: {
    Container: {
        boxShadow: "-2px 0 10px 0 rgba(0, 0, 0, 0.2)",
        background: colors.base2,
        color: textColor
    },
    Header: {
        Button: {
            color: colors.base11,
            background: colors.base3,
            lightHover: !lightTheme
        },
        Container: {
        },
    },
    ItemsContainer: {
        borderColor: colors.base4,
    },
    Item: {
        borderColor: colors.base4,
        background: colors.base2,
        lightHover: !lightTheme
    },
    ItemActionButton: {
        color: colors.base11,
        background: colors.base3,
        lightHover: !lightTheme
    },
    QueueItem: {
        Avatar: {
            background: colors.base3
        }
    }
},

WorkerSkills: {
    SaveButton: {
        background: colors.flexBlueColor,
        color: colors.lightTextColor
    },
    CancelButton: {
        background: colors.disabledColor,
        color: colors.darkTextColor
    },
    DeleteButton: {
        borderColor: colors.base4,
        lightHover: !lightTheme
    },
},

LoadingView: {
    Container: {
        background: colors.base2,
        color: colors.base6
    }
},
ParticipantsCanvas: {
 ParticipantCanvas: {
     Container: {
         color: textColor
     },
     Avatar: {
         background: colors.flexBlueColor,
         color: colors.lightTextColor,
         borderColor: colors.base5
     },
     StateHover: {
         background: colors.buttonHoverColor,
         color: colors.lightTextColor
     },
     ConnectingAnimation: {
         color: colors.lightTextColor
     },
     Button: {
         background: colors.base3,
         color: colors.base11
     },
     HangUpButton: {
         background: colors.declineColor,
         color: colors.declineTextColor
     }
 },
 Notification: {
     Container: {
         background: colors.holdColor,
         color: lightTheme ? colors.base1 : colors.base11
     }
 }
}
Rate this page:

Need some help?

We all do sometimes; code is hard. Get help now from our support team, or lean on the wisdom of the crowd browsing the Twilio tag on Stack Overflow.