Custom chat bubble color

Ahah, sorry. I assumed you meant globally from the title of the thread. That thread still helps a lot, but you’ll just have to change the colors in a different place.

Here’s some steps to achieve this:

  1. Fork the chat system by play testing and copying all descendants of game.Chat, stop the play test and paste them into game.Chat to override the chat system.
  2. Open the BubbleChat script. At the top of the script, create your dictionaries to map UserIds against their custom chat color like so:
local bgColors = {
	[157510912] = Color3.fromRGB(192, 48, 32); -- UsernameMissingOrNil
	[692837183] = Color3.fromRGB(255, 215, 0); -- NormalBaconHair13
}

local textColors = {
	[157510912] = Color3.fromRGB(255, 255, 255); -- UsernameMissingOrNil
	[692837183] = Color3.fromRGB(16, 16, 16); -- NormalBaconHair13
}
  1. Add 2 parameters to the this:CreateChatLineRender function, one called bgColor, the other called textColor.
  2. Inside the same function, under the line that creates the chat bubble render (local chatBubbleRender = ...), add this code:
if bgColor then
	chatBubbleRender.ImageColor3 = bgColor
	chatBubbleRender.ChatBubbleTail.ImageColor3 = bgColor
end
  1. Inside the same function, under the line that creates the bubble text (local bubbleText = ...), add this code:
if textColor then
	bubbleText.TextColor3 = textColor
end
  1. Moving to the this:OnPlayerChatMessage function, pass the arguments bgColors[sourcePlayer.UserId], and textColors[sourcePlayer.UserId] to where this:CreateChatLineRender is called from inside this function.

After you’ve followed these steps, bubble chat messages should now be rendered in the specified colours you have chosen!

If you’d like to skip the steps and go straight to pasting the edited version of the chat, you can take this file and insert it into game.Chat: CustomChatBubbles.rbxm (114.4 KB)

NOTE FOR FUTURE VIEWERS: This chat script was forked on 11th of February 2019. I cannot guarantee that this will always work as the chat gets updated, but following the steps will give you a better chance at getting the latest chat features.

14 Likes