Override Flex UI themes, branding and styling
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:
- Base Themes: Predefined themes Flex comes with out of the box.
- Base Theme Color Overrides: Global color overrides that are inherited by all Flex UI Components.
- Component Theme Overrides: Granular color overrides that allow you to customize a specific component.
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.
Defining your theme
Base themes
Base themes provide a set of colors as a starting point for your contact center. The 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, 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.
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. 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.
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);Next Steps
- Explore the full reference of 11 base colors and configurable theme properties
- Write a plugin to customize your Flex theme
- Start changing the behavior of the Flex UI with the Actions Framework
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 by visiting Twilio's Stack Overflow Collective or browsing the Twilio tag on Stack Overflow.
