Changing group flair to match current theme

[Blinq (Alex)]

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?

[Johani (Joe)]

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

.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:

You can read more theme variables here:

How to use Discourse core variables in your theme