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

> \[!NOTE]
>
> For the Flex UI 2.x.x version of this content, see [Override the Flex UI 2.x.x themes, branding, and styling](/docs/flex/developer/ui-and-plugins/themes-branding-styling).

> \[!NOTE]
>
> [Auto-Generated Documentation for the Flex UI](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/) 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](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Theme.html).

The Flex UI exposes these 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.

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

```javascript
const configuration = {
        colorTheme: {
            baseName: "FlexDark"
        }
};
```

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

```javascript
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"
        }
    }
};
```

For a complete list of overridable base theme colors, see the [Flex UI 1.x.x API Reference](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/CoreThemeBaseplates.html).

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

```javascript
const configuration = {
    colorTheme: {
        overrides: {
            MainHeader: {
                Container: {
                    background: "#2f5771",
                    color: "#ffffff"
                }
            },
            SideNav: {
                Container: {
                    background: "#4a4e60"
                },
                Button: {
                    background: "#4a4e60"
                },
            }
        }
    }
};

```

For a complete list of customizable components and properties, see the [Flex UI 1.x.x API Reference](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Theme.html).

## 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*

```javascript
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*

```javascript
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);
  }
}

```

### Apply themes to self-hosted installations of Flex

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

```javascript
const configuration = {
    colorTheme: {
        baseTheme: 'FlexDark'
    }
}

Twilio.Flex.runDefault(configuration);
```

## Next steps

* Explore the full reference of [11 base colors](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/CoreThemeBaseplates.html) and [configurable theme properties](https://assets.flex.twilio.com/docs/releases/flex-ui/1.33.0/Theme.html)
* [Write a plugin](/docs/flex/quickstart/getting-started-plugin) to customize your Flex theme
* Start changing the behavior of the Flex UI with the Actions framework