How is the color of the “new messages circle” decided? I mean in the chat icon on the header. After customizing our forum, the circle is now almost the same grey as the icon, and notifications of new messages are not obvious. We would like to change this color, hopefully without having to touch the colors we are using for the rest of the website.
Meanwhile, the color for new topics (that default blue) remains blue in our website. Using the same color for new chat messages and new topics would be fine.
the “regular” message (not a direct message, but unread messages in a channel) is the background: var(--tertiary-med-or-tertiary); colour. So this is derived of whatever you have set as your tertiary accent colour.
By default this is blue-ish
If you don’t want to change your tertiary colour, you could override this one specifically by setting a different background for .chat-channel-unread-indicator in your CSS.
New direct messages are green by default, which is the var(--success)
We want to change the background color not only for chat channel unread indicator on the header, but also for chat channel unread indicator following each channel inside the chat. What’s the class name for it?
Inside the chat, each channel has a number of unread messages on the indicator and each personal chat has a number of unread messages on the indicator as well. But on the header, only the personal chat indicator has a number that is the sum of all unread personal chat messages. The channel indicator doesn’t have a number. How can we make it show up?
This is easily found when you look at the DOM inspector. You can use this to override it:
for channels:: .chat-enabled .sidebar-section-link-suffix.icon.unread svg
for: personal chats .chat-enabled .sidebar-section-link-suffix.icon.urgent svg
There is no default way to do this as far as I know. You might need to look into making a plugin for that.
