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('@', ''));  
   });
});
</script>

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

For example:

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

CapturaMentionUser


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:

10 Likes

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

4 Likes

Is it possible to introduce adjustments so it would color mentions of every one belonging to the group set?

+1

I’m looking for a way to identify which users are not in a group (or in a group) in a Topic which contains a list of user mentions.