# Customize mention colors

**URL:** <https://meta.discourse.org/t/customize-mention-colors/219023>\
**Category:** Developers\
**Tags:** how-to\
**Created:** [February 22, 2022, 3:59am UTC](https://meta.discourse.org/t/customize-mention-colors/219023 "2022-02-22T03:59:40Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Alexander](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alexander/32/497634_2.png) [@Alexander](https://meta.discourse.org/u/Alexander)\
**Post date:** [February 22, 2022, 3:59am UTC](https://meta.discourse.org/t/customize-mention-colors/219023/1 "2022-02-22T03:59:40Z")

</div>

Inspired by [this topic](https://meta.discourse.org/t/custom-categories-and-tags-mention/39225), 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 😄

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

* * *

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

```html
<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 🥳

For example:

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

```

![CapturaMentionUser](https://global.discourse-cdn.com/meta/original/3X/6/c/6cacf59bada15e604aa436a0ada30f6c52adaf14.png)

* * *

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 🤔

---

_[View the full topic](https://meta.discourse.org/t/customize-mention-colors/219023)._