---
source_url: https://www.pubnub.com/docs/chat/components/react/ui-theming/css-variables
title: CSS variables for PubNub Chat Components for React
updated_at: 2026-06-12T11:22:47.889Z
---

> Documentation Index
> For a curated overview of PubNub documentation, see: https://www.pubnub.com/docs/llms.txt
> For the full list of all documentation pages, see: https://www.pubnub.com/docs/llms-full.txt


# CSS variables for PubNub Chat Components for React

:::warning Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are [welcome to contribute](https://github.com/pubnub/react-chat-components). Learn how to migrate to the Chat SDK [here](https://www.pubnub.com/docs/general/resources/migration-guides/react-components-chat-sdk).
:::

Built-in themes can be customized by changing the values of [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) that are internally used to style different parts of each component. This document provides the full list of available variables along with their default values.

For example, to remove the default padding around `MessageInput`, you can simply redefine the varaible in your CSS file:

```css
:root {
  --msg-input__padding: 0;
}
```

In cases where the variable value is redefined by a particular theme in use, a higher CSS specification needs to be applied. For example, to change the background of Message List in the dark mode, you must use a component class name instead of the `:root` element:

```css
.pn-msg-list {
  --msg-list__background: rgb(40 41 49);
}
```

### Chat

PubNub Chat Components for React provide a list of global color variables for light and dark themes.

:::note rgba color function
When hexToRGB is used on a color, the variable can only be used with the `rgba` color function inside of the actual CSS. To goal of this is to introduce alpha channels on some of the colors.
:::

```css
--chat--light__background--1: #f0f3f7;
--chat--light__background--2: #ffffff;
--chat--light__background--3: #eaeef3;
--chat--light__background--4: #01bd4c;
--chat--light__background--5-rgb: #{hexToRGB(#ef3a43)};
--chat--light__background--6: #{rgba(#1c1c1c, 0.8)};
--chat--light__color--1: #585858;
--chat--light__color--2: #999999;
--chat--light__color--2-rgb: #{hexToRGB(#999999)};
--chat--light__color--3: #eeeeee;
--chat--light__border--1: #ced6e0;
--chat--light__border--2: #bcc6d1;
--chat--light__hover--1: #de2440;
--chat--light__hover--2: #e4e9f0;
--chat--light__hover--3: #e9eef4;
--chat--light__hover--4: #e1e8f0;

--chat--dark__background--1: #1c1c28;
--chat--dark__background--2: #2a2a39;
--chat--dark__background--2-rgb: #{hexToRGB(#2a2a39)};
--chat--dark__background--3: #2a2a39;
--chat--dark__background--4: #01bd4c;
--chat--dark__background--5: #{hexToRGB(#ef3a43)};
--chat--dark__background--6: #{rgba(#f0f3f7, 0.8)};
--chat--dark__color--1: rgba(#e4e4eb, 0.8);
--chat--dark__color--2: #999999;
--chat--dark__color--3: #111111;
--chat--dark__border--1: #28293d;
--chat--dark__hover--1: #de2440;
--chat--dark__hover--2: #232333;
--chat--dark__hover--3: #232333;
--chat--dark__hover--4: #555770;
--chat--dark__hover--4-rgb: #{hexToRGB(#555770)};
```

## Message list

### Light

```css
--msg-list__background: var(--chat--light__background--1);
--msg-list__padding: 0;
--msg-list__unread__background: var(--chat--light__color--2);
--msg-list__unread__borderRadius: 20px;
--msg-list__unread__color: var(--chat--light__background--2);
--msg-list__unread__fontSize: 13px;
--msg-list__unread__fontWeight: 400;
--msg-list__unread__padding: 8px 16px;
--msg-list__unread__offset: 50px;
--msg-list__spinner__color: var(--chat--light__color--2);
--msg--hover__background: var(--chat--light__hover--3);
--msg__alignItems: flex-start;
--msg__flexDirection: row;
--msg__height: auto;
--msg__padding: 10px 16px;
--msg__actions--hover__background: transparent;
--msg__actions--hover__color: var(--chat--light__hover--1);
--msg__actions--hover__border: 1px solid var(--chat--light__border--1);
--msg__actions__background: transparent;
--msg__actions__border: 1px solid var(--chat--light__border--1);
--msg__actions__borderRadius: 15px;
--msg__actions__color: var(--chat--light__color--2);
--msg__actions__fontSize: 22px;
--msg__actions__margin: 0 0 0 4px;
--msg__actions__padding: 0 7px;
--msg__actions__right: 10px;
--msg__actions__top: 10px;
--msg__author__color: var(--chat--light__color--1);
--msg__author__fontSize: 15px;
--msg__author__fontWeight: 500;
--msg__author__padding: 0;
--msg__avatar__display: flex;
--msg__avatar__fontSize: 10px;
--msg__avatar__margin: 2px 18px 0 0;
--msg__avatar__size: 36px;
--msg__avatar__borderRadius: 36px;
--msg__bubble__background: transparent;
--msg__bubble__boxShadow: none;
--msg__bubble__borderRadius: 0;
--msg__bubble__color: var(--chat--light__color--1);
--msg__bubble__fontSize: 13px;
--msg__bubble__fontWeight: 400;
--msg__bubble__margin: 0;
--msg__bubble__padding: 0;
--msg__content__alignItems: flex-start;
--msg__content__flexDirection: column;
--msg__content__margin: 0;
--msg__image__borderRadius: 10px;
--msg__image__margin: 15px 0 0;
--msg__link__margin: 10px 0 0;
--msg__link__padding: 20px;
--msg__link-description__color: var(--chat--light__color--2);
--msg__link-thumb__maxWidth: 210px;
--msg__link-title__color: var(--chat--light__color--1);
--msg__main__alignItems: flex-start;
--msg__main__flexDirection: column;
--msg__main__margin: 0;
--msg__main__maxWidth: 60%;
--msg__time__display: block;
--msg__time__color: var(--chat--light__color--1);
--msg__time__fontSize: 11px;
--msg__time__fontWeight: 300;
--msg__time__padding: 0 10px;
--msg__title__alignItems: baseline;
--msg__title__display: flex;
--msg__title__flexDirection: row;
--msg__title__margin: 0 0 10px;
--msg__reaction--hover__background: var(--chat--light__hover--4);
--msg__reaction--hover__border: 1px solid var(--chat--light__border--2);
--msg__reaction--active__background: rgba(var(--chat--light__background--5-rgb), 0.2);
--msg__reaction--active__border: 1px solid transparent;
--msg__reaction--active--hover__background: rgba(var(--chat--light__background--5-rgb), 0.24);
--msg__reaction--active--hover__border: 1px solid rgba(var(--chat--light__background--5-rgb), 0.4);
--msg__reaction__background: transparent;
--msg__reaction__border: 1px solid var(--chat--light__border--1);
--msg__reaction__borderRadius: 15px;
--msg__reaction__margin: 10px 5px 0 0;
--msg__reaction__padding: 0 7px 0 3px;
--msg__reaction__wordSpacing: 2px;
```

### Dark

```css
--msg-list__background: var(--chat--dark__background--1);
--msg-list__unread__background: var(--chat--dark__color--2);
--msg-list__unread__color: var(--chat--dark__background--2);
--msg-list__spinner__color: var(--chat--dark__color--2);
--msg--hover__background: var(--chat--dark__border--1);
--msg__actions--hover__color: var(--chat--dark__hover--1);
--msg__actions--hover__border: 1px solid var(--chat--dark__background--1);
--msg__actions--hover__background: var(--chat--dark__background--1);
--msg__actions__background: var(--chat--dark__background--1);
--msg__actions__border: 1px solid var(--chat--dark__background--1);
--msg__actions__color: var(--chat--dark__color--2);
--msg__author__color: var(--chat--dark__color--1);
--msg__bubble__color: var(--chat--dark__color--1);
--msg__link-description__color: var(--chat--dark__color--2);
--msg__link-title__color: var(--chat--dark__color--1);
--msg__time__color: var(--chat--dark__color--1);
--msg__reaction--hover__background: rgba(var(--chat--dark__hover--4-rgb), 0.3);
--msg__reaction--hover__border: 1px solid var(--chat--dark__hover--4);
--msg__reaction--active__background: rgba(var(--chat--dark__background--5), 0.3);
--msg__reaction--active--hover__background: rgba(var(--chat--dark__background--5), 0.4);
--msg__reaction--active--hover__border: 1px solid rgba(var(--chat--dark__background--5), 0.4);
--msg__reaction__background: var(--chat--dark__background--1);
--msg__reaction__border: 1px solid var(--chat--dark__border--1);
```

## Message input

### Light

```css
--msg-input__background: var(--chat--light__background--1);
--msg-input__padding: 10px 18px;
--msg-input__emoji-picker__bottom: 14px;
--msg-input__emoji-picker__left: 10px;
--msg-input__icon__color: var(--chat--light__color--2);
--msg-input__icon__margin: 0 18px 0 0;
--msg-input__icon__fontSize: 13px;
--msg-input__send__background: transparent;
--msg-input__send__border: none;
--msg-input__send__borderRadius: 5px;
--msg-input__send__color: var(--chat--light__color--2);
--msg-input__send--active__color: var(--chat--light__hover--1);
--msg-input__send__fontFamily: inherit;
--msg-input__send__fontSize: 13px;
--msg-input__send__fontWeight: bold;
--msg-input__send__margin: 0 0 0 18px;
--msg-input__send__minWidth: 0;
--msg-input__send__padding: 0;
--msg-input--disabled__placeholder__color: rgba(var(--chat--light__color--2-rgb), 0.5);
--msg-input__placeholder__color: var(--chat--light__color--2);
--msg-input__textarea--focus__border: 1px solid transparent;
--msg-input__textarea--focus__outline: none;
--msg-input__textarea__background: var(--chat--light__hover--2);
--msg-input--disabled__textarea__background: var(--chat--light__background--3);
--msg-input__textarea__border: 1px solid transparent;
--msg-input--disabled__textarea__border: 1px solid transparent;
--msg-input__textarea__borderRadius: 20px;
--msg-input__textarea__boxShadow: none;
--msg-input__textarea__color: var(--chat--light__color--1);
--msg-input__textarea__fontFamily: inherit;
--msg-input__textarea__fontSize: 13px;
--msg-input__textarea__height: 32px;
--msg-input__textarea__lineHeight: 18px;
--msg-input__textarea__outline: none;
--msg-input__textarea__padding: 6px 14px 8px;
--msg-input__textarea__resize: none;
--msg-input__textarea__width: 100%;
```

### Dark

```css
--msg-input__background: var(--chat--dark__background--1);
--msg-input__icon__color: var(--chat--dark__color--2);
--msg-input__send__color: var(--chat--dark__color--2);
--msg-input__send--active__color: var(--chat--dark__hover--1);
--msg-input--disabled__placeholder__color: rgba(var(--chat--dark__hover--4-rgb), 0.5);
--msg-input__placeholder__color: var(--chat--dark__hover--4);
--msg-input__textarea__background: var(--chat--dark__background--2);
--msg-input--disabled__textarea__background: rgba(var(--chat--dark__background--2-rgb), 0.5);
--msg-input__textarea__color: var(--chat--dark__color--1);
```

## Member list

### Light

```css
--member-list__background: transparent;

--member__alignItems: center;
--member__cursor: auto;
--member__padding: 8px 16px;
--member__background: transparent;
--member--hover__background: transparent;

--member__avatar__color: var(--chat--light__background--2);
--member__avatar__display: flex;
--member__avatar__fontSize: 10px;
--member__avatar__margin: 0 18px 0 0;
--member__avatar__size: 36px;
--member__avatar__borderRadius: 36px;

--member__name__color: var(--chat--light__color--1);
--member__name__fontSize: 13px;
--member__name__fontWeight: 400;
--member__name__margin: 0;
--member__name__overflow: hidden;
--member__name__padding: 0;
--member__name__textOverflow: ellipsis;
--member__name__whiteSpace: nowrap;

--member__title__color: var(--chat--light__color--2);
--member__title__display: block;
--member__title__fontSize: 11px;
--member__title__fontWeight: 400;
--member__title__margin: 0;
--member__title__overflow: hidden;
--member__title__padding: 7px 0 0;
--member__title__textOverflow: ellipsis;
--member__title__whiteSpace: nowrap;

--member__presence__border: 3px solid var(--chat--light__background--2);
--member__presence__borderRadius: 100%;
--member__presence__color: var(--chat--light__background--4);
--member__presence__left: 48px;
--member__presence__position: absolute;
--member__presence__size: 8px;
--member__presence__top: 34px;

--member__actions--hover__background: transparent;
--member__actions__background: transparent;
--member__actions__borderRadius: 5px;
--member__actions__color: var(--chat--light__color--2);
--member__actions--hover__color: var(--chat--light__hover--1);
--member__actions__fontSize: 18px;
--member__actions__margin: 0 0 0 4px;
--member__actions__padding: 3px 5px;
--member__actions__visibility: hidden;
```

### Dark

```css
--member-list__background: var(--chat--dark__background--2);
--member__avatar__color: var(--chat--dark__background--2);
--member__name__color: var(--chat--dark__color--1);
--member__title__color: var(--chat--dark__color--2);
--member__presence__border: 3px solid var(--chat--dark__background--2);
--member__presence__color: var(--chat--dark__background--4);
--member__actions__color: var(--chat--dark__color--2);
--member__actions--hover__color: var(--chat--dark__hover--1);
```

## Channel list

### Light

```css
--channel-list__background: var(--chat--light__background--2);

--channel__alignItems: center;
--channel__padding: 8px 16px;
--channel__justifyContent: flex-start;
--channel__background: transparent;
--channel--hover__background: var(--chat--light__hover--2);
--channel--active__background: var(--chat--light__background--1);

--channel__thumb__display: block;
--channel__thumb__margin: 0 18px 0 0;
--channel__thumb__size: 36px;
--channel__thumb__borderRadius: 36px;

--channel__name__color: var(--chat--light__color--1);
--channel--hover__name__color: var(--chat--light__color--1);
--channel--active__name__color: var(--chat--light__color--1);
--channel__name__fontSize: 13px;
--channel__name__fontWeight: 400;
--channel__name__margin: 0;
--channel__name__overflow: hidden;
--channel__name__padding: 0;
--channel__name__textOverflow: ellipsis;
--channel__name__whiteSpace: nowrap;

--channel__description__color: var(--chat--light__color--2);
--channel--hover__description__color: var(--chat--light__color--2);
--channel--active__description__color: var(--chat--light__color--2);
--channel__description__display: block;
--channel__description__fontSize: 11px;
--channel__description__fontWeight: 400;
--channel__description__margin: 0;
--channel__description__overflow: hidden;
--channel__description__padding: 7px 0 0;
--channel__description__textOverflow: ellipsis;
--channel__description__whiteSpace: nowrap;

--channel__actions--hover__background: transparent;
--channel__actions__background: transparent;
--channel__actions__borderRadius: 5px;
--channel__actions__color: var(--chat--light__color--2);
--channel__actions--hover__color: var(--chat--light__hover--1);
--channel__actions__fontSize: 18px;
--channel__actions__margin: 0 0 0 4px;
--channel__actions__padding: 3px 5px;
--channel__actions__visibility: hidden;
```

### Dark

```css
--channel-list__background: var(--chat--dark__background--2);
--channel--hover__background: var(--chat--dark__hover--2);
--channel--active__background: var(--chat--dark__background--1);
--channel__name__color: var(--chat--dark__color--1);
--channel--hover__name__color: var(--chat--dark__color--1);
--channel--active__name__color: var(--chat--dark__color--1);
--channel__description__color: var(--chat--dark__color--2);
--channel--hover__description__color: var(--chat--dark__color--2);
--channel--active__description__color: var(--chat--dark__color--2);
--channel__actions__color: var(--chat--dark__color--2);
--channel__actions--hover__color: var(--chat--dark__hover--1);
```

## Typing indicator

### Light

```css
--typing-indicator__background: var(--chat--light__background--1);
--typing-indicator__color: var(--chat--light__color--1);
--typing-indicator__display: inline-block;
--typing-indicator__fontSize: 11px;
--typing-indicator__fontWeight: 300;
--typing-indicator__padding: 8px 24px;

--typing-indicator__dot__fontSize: 8px;
--typing-indicator__dot__margin: 0 3px 0 0;
--typing-indicator__dot__animationTravel: -12px;
--typing-indicator__dot__animationDuration: 1.3s;
--typing-indicator__dot__animationTimeout1: -1.1s;
--typing-indicator__dot__animationTimeout2: -0.9s;
```

### Dark

```css
--typing-indicator__background: var(--chat--dark__background--1);
--typing-indicator__color: var(--chat--dark__color--1);
```

## Common elements

### Light

```css
--tooltip__transition: all 0.3s ease;
--tooltip__background: var(--chat--light__background--6);
--tooltip__borderRadius: 5px;
--tooltip__color: var(--chat--light__color--3);
--tooltip__margin: 8px;
--tooltip__padding: 5px;
--tooltip__minWidth: 100px;
--tooltip__arrow__size: 4px;
--tooltip__arrow__margin: 0px;
```

### Dark

```css
--tooltip__background: var(--chat--dark__background--6);
--tooltip__color: var(--chat--dark__color--3);
```

## Examples

### Customize messages sent by current user

Differentiating the looks of messages, depending on who sent them, is a common use case across some types of chat apps.

PubNub Chat Components for React do not come with a separate set of CSS variables for messages that were sent by the current chat user. To change the default styling of such messages, use a dedicated `pn-msg--own` CSS class instead.

Here is an example on how to align your own messages to the right side of the chat window:

```css
.pn-msg--own {
  --msg__avatar__margin: 2px 0 0 18px;
  --msg__content__alignItems: flex-end;
  --msg__flexDirection: row-reverse;
  --msg__title__flexDirection: row-reverse;
}
```

Loading...