diff --git a/web/components/chat/ChatContainer/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
index 6e7e54198..9deceba91 100644
--- a/web/components/chat/ChatContainer/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -33,7 +33,7 @@ export default function ChatContainer(props: Props) {
   const getNameChangeViewForMessage = (message: NameChangeEvent) => {
     const { oldName, user } = message;
     const { displayName, displayColor } = user;
-    const color = `var(--theme-user-colors-${displayColor})`;
+    const color = `var(--theme-color-users-${displayColor})`;
 
     return (
       <div className={s.nameChangeView}>
diff --git a/web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.tsx b/web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.tsx
index 98fb5ae5c..234533183 100644
--- a/web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.tsx
+++ b/web/components/chat/ChatModerationActionMenu/ChatModerationDetailsModal.tsx
@@ -86,7 +86,7 @@ const ConnectedClient = ({ client }: { client: Client }) => {
 
 // eslint-disable-next-line react/prop-types
 const UserColorBlock = ({ color }) => {
-  const bg = `var(--theme-user-colors-${color})`;
+  const bg = `var(--theme-color-users-${color})`;
   return (
     <Row justify="space-around" align="middle">
       <Col span={12}>Color</Col>
diff --git a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
index affd16c38..229aa378d 100644
--- a/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage/ChatUserMessage.tsx
@@ -32,7 +32,7 @@ export default function ChatUserMessage({
   const { id: messageId, body, user, timestamp } = message;
   const { id: userId, displayName, displayColor } = user;
 
-  const color = `var(--theme-user-colors-${displayColor})`;
+  const color = `var(--theme-color-users-${displayColor})`;
   const formattedTimestamp = `Sent ${formatTimestamp(timestamp)}`;
   const [formattedMessage, setFormattedMessage] = useState<string>(body);