Customize mention colors

Inspired by this topic, and the custom colors of Discord roles, I have written this very simple code that adds a data-mention to the mentions of groups and users, in this way to be able to place different colors (And not “general color”) via CSS :smile:

The code at the moment is JQuery but at some point I will change it to Vanilla JavaScript :sweat_smile:

To apply it you just have to paste the code in the head of your theme or component:

<script type="text/discourse-plugin" version="0.9">
$(document).ajaxSuccess(() =>{
  $('a.mention').each(function() {
    $(this).attr('data-mention', $(this).text().replace('@', ''));  
  $('a.mention-group').each(function() {
   $(this).attr('data-mention', $(this).text().replace('@', ''));  

After this you can apply the style you want through CSS :partying_face:

For example:

a.mention[data-mention="Alexander"] {
color: #4527a0!important;


In this case it was for a specific username, however it also works for groups using a.mention-group[data-mention="group-name"]

I’ll look into making this a Theme component that can be customized from its “settings” without modifying the CSS :thinking:


Just putting it out there. I think this goes well with this topic. Especially this