Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

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


(information)

Info

Auto-Generated Documentation for the Flex UI(link takes you to an external page) 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(link takes you to an external page).

The Flex UI exposes 3 main levels of customization:

  1. Base Themes: Predefined themes Flex comes with out of the box.
  2. Base Theme Color Overrides: Global color overrides that are inherited by all Flex UI Components.
  3. 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

defining-your-theme page anchor

Base themes

base-themes page anchor

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

configuring-a-base-theme page anchor

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


_10
const configuration = {
_10
colorTheme: {
_10
baseName: "FlexDark"
_10
}
_10
};

Overriding base theme colors

overriding-base-theme-colors page anchor

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.


_19
const 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(link takes you to an external page) of overridable base theme colors.

Overriding individual components

overriding-individual-components page anchor

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.


_20
const 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(link takes you to an external page) of customizable components and properties.


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

Applying your theme in a Flex Plugin

applying-your-theme-in-a-flex-plugin page anchor

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

CustomTheme.js


_24
export 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


_20
import { FlexPlugin } from 'flex-plugin';
_20
import React from 'react';
_20
import CustomTheme from './CustomTheme'
_20
_20
const PLUGIN_NAME = 'ThemePlugin';
_20
_20
export 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
}

Applying themes to self-hosted installations of Flex

applying-themes-to-self-hosted-installations-of-flex page anchor

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


_10
const configuration = {
_10
colorTheme: {
_10
baseTheme: 'FlexDark'
_10
}
_10
}
_10
_10
Twilio.Flex.runDefault(configuration);



Rate this page: