# Changing group flair to match current theme

**URL:** https://meta.discourse.org/t/changing-group-flair-to-match-current-theme/90573
**Category:** Support
**Created:** [June 24, 2018, 1:52am UTC](https://meta.discourse.org/t/changing-group-flair-to-match-current-theme/90573 "2018-06-24T01:52:17Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [June 24, 2018, 3:19am UTC](https://meta.discourse.org/t/changing-group-flair-to-match-current-theme/90573/2 "2018-06-24T03:19:35Z")

</div>

You can use the color-scheme variables in CSS to make the flair work with any color scheme. Try something like this:

```plaintext
.avatar-flair-verified {
  background: $primary !important;

  i {
    color: $secondary !important; 
  }
}

```

Where `verified` in `.avatar-flair-verified` is the name of the group you’re targeting.

I used `!important` because you’re overriding inline styles. The result is something like this:

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/a/4/a4eb8a9d57c9909c81f01708ca318409ddfc3e40.PNG)

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/6/4/64db475c5db2de2e2fb5b0b3718ed7ad6e1ea10c.PNG)

You can read more theme variables here:

[Use Discourse Core Variables in your Theme](https://meta.discourse.org/t/how-to-use-discourse-core-variables-in-your-theme/77551)

---

_[View the full topic](https://meta.discourse.org/t/changing-group-flair-to-match-current-theme/90573)._