# Changing the Theme, Style and Brand of Flex WebChat 2.0

> \[!WARNING]
>
> Webchat 2.0 is no longer supported. It uses Flex UI 1.x.x's [legacy messaging](/docs/flex/developer/messaging), which has reached end-of-life.
>
> If you are using Webchat 2.0, [migrate to Webchat 3.x.x](/docs/flex/developer/conversations/webchat/migrate).
>
> If you are starting out with Webchat, build with [Webchat 3.x.x](/docs/flex/developer/conversations/webchat) instead.

Flex WebChat 2.0 uses the same theming framework as Flex UI. With Flex UI theming framework you can:

* Use preconfigured themes
* Define your own theme
* Override theming of UI components to style the UI on brand

Learn more in [Flex UI theming, styling, and branding](/docs/flex/developer/messaging/webchat/theming).

## Styling WebChat on brand

By default, WebChat has a neutral look and feel. To style it to your brand, you'll need to override WebChat components color configuration. This can be done in 2 steps:

1. Define branding configuration for components you want to change
2. Override the `colorTheme` object with your branding configuration in appConfig

### Defining branding configuration in webchat-branding.js

```javascript
const brandColor1 = "#1976d2";
const brandColor2 = "#233659";
const brandTextColor = "#ffffff";


const personalizedColors = {
   darkBlueBackground: "#3C425C",
   whiteText: "#FFFFFF",
   entryPointBackground: "#3C425C",
   lighterBackground: "#ecedf1",
   primaryButtonBackground: "#1976d2",
   primaryButtonColor: "#FFFFFF",
   secondaryButtonBackground: "#6e7180",
   secondaryButtonColor: "#FFFFFF"
};

// assign 
const brandMessageBubbleColors = (bgColor) => ({
    Bubble: {
        background: bgColor,
        color: brandTextColor
    },
    Avatar: {
        background: bgColor,
        color: brandTextColor
    },
    Header: {
        color: brandTextColor
    }
});

const brandedColors = {
    Chat: {
        MessageListItem: {
            FromOthers: brandMessageBubbleColors(brandColor2),
            FromMe: brandMessageBubbleColors(brandColor1),
        },
        MessageInput: {
            Container:{
                Button: {
                    background: brandColor1,
                    color: brandTextColor
                }
            }
        },
        MessageCanvasTray: {
            Container: {
                background: personalizedColors.darkBlueBackground,
                color: personalizedColors.whiteText
            }
        },
    },

    MainHeader: {
        Container: {
            background: personalizedColors.darkBlueBackground,
            color: personalizedColors.whiteText
        },
        Logo: {
            fill: brandTextColor
        }
    },

    EntryPoint: {
        Container: {
            background: personalizedColors.entryPointBackground,
            color: personalizedColors.whiteText
        }
    },

    PreEngagementCanvas: {
        Container: {
            background: personalizedColors.lighterBackground
        },

        Form: {
            SubmitButton: {
                background: personalizedColors.primaryButtonBackground,
                color: personalizedColors.whiteText
            }
        }
    }
};
```

### Configuring WebChat to use webchat-branding

Add the following config to appConfig file

```javascript
var appConfig = {
    colorTheme: {
        overrides: brandedColors
    }
}
```

## WebChat UI components and themable objects

You can find a full list of themable components [here](/docs/flex/developer/messaging/webchat/components). Below is the list of those WebChat components that can be themed.

```javascript
        MainContainer: {
            background: colors.base1
        },

        EntryPoint: {
            Container: {
                backgroundImage: `linear-gradient(to top, ${colors.defaultButtonColor}, ${colors.defaultButtonColor})`,
                backgroundColor: "rgba(0,0,0,0)",
                color: "#ffffff",
                "&:hover": {
                    backgroundColor: colors.buttonHoverColor,
                    backgroundBlendMode: "color",
                }
            }
        },

        MainHeader: {
            Container: {
                color: textColor
            },
            Logo: {
                fill: lightTheme ? "#000000" : "#ffffff"
            }
        },

        PreEngagementCanvas: {
            Container: {
                color: textColor
            },
            Footer: {
                color: textColor
            },
            Form: {
                SubmitButton: {
                    "background-image":
                        `linear-gradient(to top,${colors.defaultButtonColor},${colors.defaultButtonColor})`,
                    color: "#ffffff"
                },
                Label: {}
            }
        },

        InvalidPreEngagementCanvas: {
            Container: {
                color: textColor
            },
            Button: {
                background: colors.defaultButtonColor,
                color: colors.lightTextColor
            }
        },

        Modal: {
            Container: {
                background: colors.base2,
                color: textColor,
            },
            Title: {
                color: textColor
            },
            PrimaryButton: {
                background: colors.base2,
                color: textColor,
            },
            SecondaryButton: {
                background: colors.base2,
                color: textColor,
            }
        },

        Chat: {
            MessagingCanvas: {
                Container: {
                    background: colors.base1
                }
            },

            MessageList: {
                DateSeparatorLine: {
                    borderColor: colors.base4
                },
                DateSeparatorText: {
                    color: textColor
                },
                TypingIndicator: {
                    color: textColor
                }
            },

            MessageInput: {
                Container: {
                    background: colors.base2,
                    color: textColor,
                    "::placeholder": {
                        color: textColor
                    },
                    Button: {
                        color: "#ffffff",
                        background: "#1976D2"
                    }
                }
            },

            MessageListItem: {
                FromMe: {
                    Avatar: {
                        color: "#ffffff",
                        background: "#1976D2"
                    },
                    Bubble: {
                        color: "#ffffff",
                        background: "#1976D2"
                    },
                    Header: {
                        color: "#ffffff",
                    }
                },
                FromOthers: {
                    Avatar: {
                        color: colors.base11,
                        background: colors.base2
                    },
                    Bubble: {
                        color: textColor,
                        background: colors.base2
                    },
                    Header: {
                        color: textColor
                    }
                },
                ReadStatus: {
                    color: textColor
                }
            },

            MessageCanvasTray: {
                Container: {
                    background: colors.base2,
                    color: textColor
                },
                Button: {
                    color: colors.lightTextColor,
                    background: colors.defaultButtonColor,
                    lightHover: false,
                }
            },

            WelcomeMessage: {
                Container: {
                    color: textColor
                },
                Icon: {
                    color: colors.base11
                }
            }
        },

        Progress: {
            Circular: {
                staticBackgroundBorderColor: colors.lightTextColor,
                animatingBackgroundBorderColor: colors.base4,
                animatingForegroundBorderColor: colors.defaultButtonColor,
            }
        },

        FormComponents: {
            TextArea: {
                borderColor: colors.base4,
                color: textColor,
                background: "transparent",

                "&:focus": {
                    background: colors.base1,
                    boxShadow: `0px 0px 0px 2px ${colors.focusGlow}`,
                    border: `1px solid ${colors.focusColor}`
                }
            },
            Input: {
                color: textColor
            }
        },
```