Auto-Generated Documentation for the Flex UI is now available. The auto-generated documentation is accurate and comprehensive and may differ from what you see in the official Flex UI documentation. It includes a comprehensive overview of Theme options.
The Flex UI exposes 3 main levels of customization:
If you're migrating from Flex UI 1.x.x, 2.x.x has a new configuration key called config.theme.
You can achieve these three levels of customization by updating the Flex theme configuration via config.theme. config.theme is defined by the following interface:
_10interface ThemeConfigProps {_10 isLight?: boolean; // Represents if light or dark theme_10 tokens?: Tokens; // Paste tokens_10 componentThemeOverrides?: Object; // Object containing component style overrides_10}
Where:
Tokens: For usage documentation, see Create a custom theme using the Paste Theme Designer.
componentThemeOverrides: For a list of components you can override, see Flex UI API Reference.
Base themes provide a set of colors as a starting point for your contact center. Flex UI has two themes:
You can configure the desired base theme in the Flex configuration object.
_10const configuration = {_10 theme: {_10 isLight: false_10 }_10};_10_10Flex.manager.updateConfig(configuration);
You can also create your own variation of a theme by passing Paste token values. For Tokens documentation and details on how to generate them, see Create a custom theme using the Paste Theme Designer.
_15const configuration = {_15 theme: {_15 isLight: false,_15 tokens: {_15 backgroundColors: {_15 colorBackground: "rgb(255, 0, 0)",_15 },_15 "textColors": {_15 "colorText": "rgb(0, 0, 255)",_15 }_15 }_15 }_15 };_15_15Flex.manager.updateConfig(configuration);
Flex theming also supports granular customizations at the individual component level. In the following code sample, Flex will override the MainHeader background color and text color, as well as the SideNav background color and icon background color.
_22const configuration = {_22 theme: {_22 componentThemeOverrides: {_22 MainHeader: {_22 Container: {_22 background: "#ff0000",_22 color: "#00ff00"_22 }_22 },_22 SideNav: {_22 Container: {_22 background: "#4a4e60"_22 }_22 Icon: {_22 background: "#4a4e60"_22 },_22 }_22 }_22 }_22};_22_22Flex.manager.updateConfig(configuration);
See the complete list of customizable components and properties.
Once you've defined a theme, you'll need to apply it to Flex UI.
Define your color theme by specifying a boolean value for isLight, along with optional tokens and component overrides.
CustomTheme.js
_32const configuration = {_32 theme: {_32 isLight: false,_32 tokens: {_32 backgroundColors: {_32 colorBackground: "rgb(255, 0, 0)",_32 },_32 "textColors": {_32 "colorText": "rgb(0, 0, 255)",_32 }_32 },_32 componentThemeOverrides: {_32 MainHeader: {_32 Container: {_32 background: "#ff0000",_32 color: "#00ff00"_32 }_32 },_32 SideNav: {_32 Container: {_32 background: "#0000ff"_32 },_32 Icon: {_32 background: "#ffc300",_32 color: "#ff5733"_32 },_32 }_32 }_32 }_32}_32_32Flex.manager.updateConfig(configuration);
Then set your custom theme inside the Flex configuration and apply it during plugin initialization.
ThemePlugin.js
_10export default class ThemePlugin extends FlexPlugin {_10_10 init(Flex, Manager) {_10 const configuration = {...};_10_10 // apply theme_10 Manager.updateConfig(configuration);_10 }_10}
Include your custom theme in the configuration object's theme property when initializing Flex.
_10// refer to previous examples for setting your theme configuration_10const configuration = {...}; _10_10Twilio.Flex.runDefault(configuration);