Auto-Generated Documentation for the Flex UI is now available. The auto-generated documentation is accurate and comprehensive, and so 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:
So, you might use the GreyLight
Flex theme with an override of one of its colors, and a specific color override in the Notifications component.
Base themes provide a set of colors as a starting point for your contact center. The Flex UI includes the following predefined base themes:
You can configure the desired base theme in the Flex configuration object.
_10const configuration = {_10 colorTheme: {_10 baseName: "FlexDark"_10 }_10};
You can also create your own variation of a theme by re-configuring base colors used in the theme.
In the below example, Flex uses GreyDark
as its base theme. It will then apply the new colors defined in the color object, overriding the base colors and some standard colors of the GreyDark
theme.
_19const configuration = {_19 colorTheme: {_19 baseName: "GreyDark",_19 colors: {_19 base0: "#000000",_19 base1: "#222222",_19 base2: "#444444",_19 base3: "#d4d4d4",_19 base4: "#e0e0e0",_19 base5: "#efefef",_19 base6: "#ffffff",_19 darkTextColor: "#222222",_19 buttonHoverColor: "rgba(0, 0, 0, 0.2)",_19 tabSelectedColor: "#009cff",_19 connectingColor: "#ff9800",_19 disconnectedColor: "#c0192d"_19 }_19 }_19};
See the complete list of overridable base theme colors.
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 button colors.
_20const configuration = {_20 colorTheme: {_20 overrides: {_20 MainHeader: {_20 Container: {_20 background: "#2f5771",_20 color: "#ffffff"_20 }_20 },_20 SideNav: {_20 Container: {_20 background: "#4a4e60"_20 },_20 Button: {_20 background: "#4a4e60"_20 },_20 }_20 }_20 }_20};
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 baseName
, along with optional colors
and component overrides
.
CustomTheme.js
_24export default {_24 baseName: "GreyDark",_24 colors: {_24 base0: "#000000",_24 base1: "#222222",_24 base2: "#444444"_24 },_24 overrides: {_24 MainHeader: {_24 Container: {_24 background: "#2f5771",_24 color: "#ffffff"_24 }_24 },_24 SideNav: {_24 Container: {_24 background: "#4a4e60"_24 },_24 Button: {_24 background: "#4a4e60"_24 },_24 }_24 }_24}
Then set your custom theme inside the Flex Configuration colorTheme
property and apply it during plugin initialization.
ThemePlugin.js
_20import { FlexPlugin } from 'flex-plugin';_20import React from 'react';_20import CustomTheme from './CustomTheme'_20_20const PLUGIN_NAME = 'ThemePlugin';_20_20export default class ThemePlugin extends FlexPlugin {_20 constructor() {_20 super(PLUGIN_NAME);_20 }_20_20 init(flex, manager) {_20 const configuration = {_20 colorTheme: CustomTheme_20 };_20_20 // apply theme_20 manager.updateConfig(configuration);_20 }_20}
Include your custom theme in the configuration object's colorTheme
property when initializing Flex.
_10const configuration = {_10 colorTheme: {_10 baseTheme: 'FlexDark'_10 }_10}_10_10Twilio.Flex.runDefault(configuration);