Simple Mention Colors

Inspired by the topic that I just mentioned above, 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:

4 Likes

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

3 Likes