# Changing group flair to match current theme

**URL:** https://meta.discourse.org/t/changing-group-flair-to-match-current-theme/90573
**Category:** Support
**Created:** [24.Июнь.2018 01:52:17 UTC](https://meta.discourse.org/t/changing-group-flair-to-match-current-theme/90573 "2018-06-24T01:52:17Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Blinq](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/blinq/32/98523_2.png) [@Blinq](https://meta.discourse.org/u/Blinq)
#### Post date: [24.Июнь.2018 01:52:17 UTC](https://meta.discourse.org/t/changing-group-flair-to-match-current-theme/90573/1 "2018-06-24T01:52:17Z")

</div>

Hi, I was making a verified status group for my site and it is styled to be a dark grey circle with a white ‘checkmark’ inside. This fits well with the default light Discourse theme. However, if I switched my theme to the dark one then the flair’s edges may blend with the outer dark theme? Am I right and if so how can I fix this?

---

<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: [24.Июнь.2018 03:19:35 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)

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [24.Июль.2018 03:19:39 UTC](https://meta.discourse.org/t/changing-group-flair-to-match-current-theme/90573/3 "2018-07-24T03:19:39Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.