CSS variables for PubNub Chat Components for React
Migrate to Chat SDK
PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.
Built-in themes can be customized by changing the values of CSS variables 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:
: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:
.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.
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.
--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;
Message List
Light
--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;
Dark
--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);
Message Input
Light
--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;
Dark
--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
--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;
Dark
--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
--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);
Dark
--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
--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
--typing-indicator__background: var(--chat--dark__background--1);
--typing-indicator__color: var(--chat--dark__color--1);
Common elements
Light
--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
--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:
.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...