This guide will assist you to match the CometChat default theme with your site colors. This is basic tutorial can help you theme CometChat even if you have no knowledge about CSS.

You can always use our in-built theme editor to change colors directly via CometChat Administration Panel.

You can edit your theme with the help of two simple tools.

Color Changer

You can change the base color with the help of slider.

Theme Variables

With Theme Variables you can edit or set colors, font family and font sizes of your theme.

For example, to set the background color of your bar, click on the color box that is next to bar_background and then select the desired color accordingly.
Similarly you can change the other theme variables as well.

After the modification, CometChat will look like: