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 using a Flex plugin, or by reconfiguring a subset of the original theme where necessary.

Defining a theme in a Flex Plugin

CustomThemeOverrides.js

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

export default {
    MainHeader: {
        Container: {
            background: brandColor1,
            color: brandTextColor
        }
    },
    SideNav: {
        Container: {
            background: brandColor2
        },
        Button: {
            background: brandColor2
        },
    }
};

ThemePlugin.js

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

const PLUGIN_NAME = 'ThemePlugin';

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

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   * @param manager { import('@twilio/flex-ui').Manager }
   */
  init(flex, manager) {
    // override theme styles
    manager.updateConfig({colorTheme: { baseName: "GreyDark", overrides: CustomThemeOverrides}})

  }
}

Defining a theme in MyCustomTheme.js

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: {
    UserCard: {
        background: brandColor1
    },
    MainHeader: {
        Container: {
            background: brandColor1,
            color: brandTextColor
        }
    },
    Chat: {
        MessageListItem: {
            FromOthers: brandMessageBubbleColors(brandColor2),
            FromMe: brandMessageBubbleColors(brandColor1),
        },
        MessageInput: {
            Button: {
                background: brandColor1,
                color: brandTextColor
            }
        }
    }
}

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

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

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.