Override Flex UI 1.x.x themes, branding and styling

(information)

This page applies to Flex UI 1.x.x.

For the Flex UI 2.x.x version of this content, see Override the Flex UI 2.x.x themes, branding, and styling.

(information)

Info

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 these 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.

Define 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

Configure a base theme

You can configure the base theme in the Flex configuration object.

1const configuration = {
2        colorTheme: {
3            baseName: "FlexDark"
4        }
5};

Override base theme colors

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

In the following example, Flex uses GreyDark as its base theme. It then applies the new colors defined in the color object, which overrides the base colors and some standard colors of the GreyDark theme.

1const configuration = {
2    colorTheme: {
3        baseName: "GreyDark",
4        colors: {
5            base0: "#000000",
6            base1: "#222222",
7            base2: "#444444",
8            base3: "#d4d4d4",
9            base4: "#e0e0e0",
10            base5: "#efefef",
11            base6: "#ffffff",
12            darkTextColor: "#222222",
13            buttonHoverColor: "rgba(0, 0, 0, 0.2)",
14            tabSelectedColor: "#009cff",
15            connectingColor: "#ff9800",
16            disconnectedColor: "#c0192d"
17        }
18    }
19};

For a complete list of overridable base theme colors, see the Flex UI 1.x.x API Reference.

Override individual components

Flex theming also supports granular customizations at the individual component level. In the following code sample, Flex overrides the MainHeader background color and text color, as well as the SideNav background color and button colors.

1const configuration = {
2    colorTheme: {
3        overrides: {
4            MainHeader: {
5                Container: {
6                    background: "#2f5771",
7                    color: "#ffffff"
8                }
9            },
10            SideNav: {
11                Container: {
12                    background: "#4a4e60"
13                },
14                Button: {
15                    background: "#4a4e60"
16                },
17            }
18        }
19    }
20};
21

For a complete list of customizable components and properties, see the Flex UI 1.x.x API Reference.

Apply your theme

Once you've defined a theme, you need to apply it to Flex UI.

Apply your theme in a Flex plugin

Define your color theme by specifying a baseName, along with optional colors and component overrides.

CustomTheme.js

1export default {
2    baseName: "GreyDark",
3    colors: {
4        base0: "#000000",
5        base1: "#222222",
6        base2: "#444444"
7    },
8    overrides: {
9        MainHeader: {
10            Container: {
11                background: "#2f5771",
12                color: "#ffffff"
13            }
14        },
15        SideNav: {
16            Container: {
17                background: "#4a4e60"
18            },
19            Button: {
20                background: "#4a4e60"
21            },
22        }
23    }
24}

Then set your custom theme inside the Flex configuration colorTheme property and apply it during plugin initialization.

ThemePlugin.js

1import { FlexPlugin } from 'flex-plugin';
2import React from 'react';
3import CustomTheme from './CustomTheme'
4
5const PLUGIN_NAME = 'ThemePlugin';
6
7export default class ThemePlugin extends FlexPlugin {
8  constructor() {
9    super(PLUGIN_NAME);
10  }
11
12  init(flex, manager) {
13    const configuration = {
14        colorTheme: CustomTheme
15    };
16
17    // apply theme
18    manager.updateConfig(configuration);
19  }
20}
21

Apply themes to self-hosted installations of Flex

Include your custom theme in the configuration object's colorTheme property when initializing Flex.

1const configuration = {
2    colorTheme: {
3        baseTheme: 'FlexDark'
4    }
5}
6
7Twilio.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