Menu

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 themes, branding and styling

Preconfigured Flex Themes

Flex Agent UI supports the following preconfigured UI themes:

  • GreyLight
  • GreyDark
  • FlexLight
  • FlexDark

Flex WebChat UI supports the following themes:

  • MediumTheme
  • DarkTheme

Configuring a base theme

In the Flex configuration object you can define the desired theme.

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

Overriding base theme colors

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

In below example we take GreyDark as the base theme (which defines the colors and the mapping of those colors). We then apply our own base color theming on top of that base theme overriding theme standard 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"
        }
    }
};

Creating a custom theme

You can create a custom theme by reconfiguring a subset of the original theme where necessary.

Defining a theme in MyCustomTheme.ts

import { Theme } from "@twilio/flex-ui";
import { DeepPartial } from "@twilio/frame-ui";

const brandColor1 = "#2f5771";
const brandColor2 = "#4a4e60";
const brandTextColor = "#ffffff";

const brandMessageBubbleColors = (bgColor) => ({
    Bubble: {
        background: bgColor,
        color: brandTextColor
    },
    Avatar: {
        background: bgColor,
        color: brandTextColor
    },
    Header: {
        color: brandTextColor
    }
});


const branded: DeepPartial<Theme> = {
    UserCard: {
        background: brandColor1
    },
    MainHeader: {
        Container: {
            background: brandColor1,
            color: brandTextColor
        }
    },
    Chat: {
        MessageListItem: {
            FromOthers: brandMessageBubbleColors(brandColor2),
            FromMe: brandMessageBubbleColors(brandColor1),
        },
        MessageInput: {
            Button: {
                background: brandColor1,
                color: brandTextColor
            }
        }
    }
};

export default branded;

Configuring Flex to use MyCustomTheme

import * as React from "react";
import * as ReactDOM from "react-dom";

import * as Flex from "@twilio/flex-ui";

import MyCustomTheme from "./MyCustomTheme";

export function run() {

    const configuration = {
        colorTheme: {
            baseName: "GreyDark",
            overrides: MyCustomTheme
        }
    };

    return Flex.Manager.create(configuration)
    .then(manager => {
        ReactDOM.render(
            <Flex.ContextProvider manager={manager}>
                <Flex.RootContainer />
            </Flex.ContextProvider>,
            document.getElementById("root")
        );
    });
}

List of Flex UI components and themable objects

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
    }
}

List of Chat container themable objects

Example based on the medium theme.

Chat: {
    MessageListItem: {
        FromOthers: colors.baseplate6,
        FromMe: colors.baseplate6
    },
    MessageInput: {
        Button: {
            background: colors.baseplate1,
            color: colors.lightTextColor
        }
    },
    MessageCanvasTray: {
        Container: {
            background: colors.baseplate9,
            color: colors.lightTextColor
        }
    }
},

EntryPoint: {
    Container: {
        background: colors.base4,
        color: "#ffffff"
    }
},
MainHeader: {
    Container: {
        background: colors.base1,
        color: textColor,
        borderColor: colors.base4
    },
    Logo: {
        fill: lightTheme ? "#000000" : "#ffffff"
    }
},
PreEngagementCanvas: {
    Container: {
        background: colors.base2,
        color: textColor
    },
    Form: {
        SubmitButton: {
            background: colors.defaultButtonColor,
            color: "#ffffff"
        }
    }
},
PostEngagementCanvas: {
    Container: {
        background: colors.base2,
        color: textColor
    },
    DynamicForm: {
        SubmitButton: {
            background: colors.defaultButtonColor,
            color: "#ffffff"
        },
        ThumbsUpOrDown: {
            background: colors.base2,
            color: textColor,
            border: "solid 1px " + colors.base4
        },
        ThumbsUpOrDownSelected: {
            background: colors.base2,
            color: textColor,
            border: "solid 1px " + colors.base4
        },
        TextArea: {
            border: "solid 1px " + colors.base4
        },
        Placeholder: {
            color: colors.base3
        }
    }
},
PendingEngagementCanvas: {
    Container: {
        background: colors.base2,
        color: textColor
    },
    CancelButton: {
        background: colors.defaultButtonColor,
        color: colors.lightTextColor
    }
},
TimeoutEngagementCanvas: {
    Container: {
        background: colors.base2,
        color: textColor
    }
},
Modal: {
    Container: {
        background: colors.base2,
        color: textColor,
    },
    Title: {
        color: textColor
    },
    PrimaryButton: {
        background: colors.base2,
        color: textColor,
    },
    SecondaryButton: {
        background: colors.base2,
        color: textColor,
    }
}

List of Core UI themable objects

FormComponents: {
    TextArea: {
        borderColor: colors.base4,
        color: textColor,
        background: "transparent",

        "&:focus": {
            background: colors.base1,
            boxShadow: `0px 0px 0px 2px ${colors.focusGlow}`,
            border: `1px solid ${colors.focusColor}`
        }
    },
    Input: {
        color: textColor
    }
},

Button: {
    lightHover: false
},

Avatar: {
    Container: {
        borderColor: colors.base5,
        background: colors.base1
    },
    AvailabilityIcon: {
        borderColor: colors.base5
    }
},

Menu: {
    Item: {
        lightHover: !lightTheme
    },
    Items: {
        color: textColor,
        background: colors.base2
    }
},

Tabs: {
    Container: {
        color: colors.base11,
    },
    LabelsContainer: {
        borderColor: colors.base4
    },
    Button: {
        lightHover: !lightTheme
    },
    Active: {
        background: colors.tabSelectedColor
    },
    Inactive: {}
},

Chat: {
    MessagingCanvas: {
        Container: {
            background: colors.base1
        }
    },
    MessageList: {
        DateSeparatorLine: {
            borderColor: colors.base4
        },
        DateSeparatorText: {
            color: textColor
        },
        TypingIndicator: {
            color: textColor
        }
    },
    MessageInput: {
        Container: {
            background: colors.base2,
            color: textColor,
            "::placeholder": {
                color: textColor
            },
        },
        Button: {
            color: "#ffffff",
            background: "#1976D2"
    }
    },
    MessageListItem: {
        FromMe: {
            Avatar: {
                color: "#ffffff",
                background: "#1976D2"
            },
            Bubble: {
                color: "#ffffff",
                background: "#1976D2"
            },
            Header: {
                color: "#ffffff",
            }
        },
        FromOthers: {
            Avatar: {
                color: colors.base11,
                background: colors.base2
            },
            Bubble: {
                color: textColor,
                background: colors.base2
            },
            Header: {
                color: textColor
            }
        },
        ReadStatus: {
            color: textColor
        }
    },
    MessageCanvasTray: {
        Container: {
            background: colors.base2,
            color: textColor
        },
        Button: {
            color: colors.lightTextColor,
            background: colors.defaultButtonColor,
            lightHover: false,
        }
    },
    WelcomeMessage: {
        Container: {
            color: textColor
        },
        Icon: {
            color: colors.base11
        }
    }
},

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

Progress: {
    Circular: {
        borderColor: colors.circularProgressColor,
        fadeColor: colors.base2
    }
}
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.