Should be able to style based on emoji group

Contribute Feature

AI-generated summary

A discussion on styling based on emoji groups is underway. Grant_Fitzsimmons shares a challenge with inverting black SVG emojis in dark mode and solves it by appending an underscore to the emoji titles, allowing them to be targeted with CSS. They provide an example of this approach using the following CSS code:

@media (prefers-color-scheme: dark) {
    img.emoji[title$="_:"] {
    filter: invert(1)
    }
}

This solution enables them to maintain the desired icons in both light and dark modes. Canapin notes that this is a feature-related discussion and redirects to a relevant topic on meta.discourse.org.

1

In my case, I have back SVGs that I need to invert in dark mode. I can’t style based on group so I have to append an underscore to the end of the emojis that I need to invert.

2

I think that’s more feature-related than a bug, so I’ve moved the topic…

This is discussed here:

Also, can you explain a bit the underscore thing? I’m not sure what you mean. You have two versions of an emoji (dark and light) named like :emoji:, clearly visible on a light theme, and an alternative :emoji_: more suitable for the dark theme?

3 
@media (prefers-color-scheme: dark) {
    img.emoji[title$="_:"] {
    filter: invert(1)
    }
}

I have a series of black SVG emojis that are now inverted when in dark mode. You can see the icons here:

Because I have a ton of other emojis established that I do not want to invert, I append the “_” value to the end of those emojis.

See:

:pencil_: **Edit** – Allow editing the currently selected record

:plus_: **Add** – Create a new record in the related table

:search_: **Search** – Search for records in the related table

Light Mode
Light Mode870×286 13.7 KB

Dark Mode
Dark Mode862×276 14 KB

This allows me to maintain the icons I do not wish to invert:

image

Thanks for your help!