Improve :ifin-heart-*: emoji legibility

Really random thought here, but I noticed that the :ifin-heart-dark: and :ifin-heart-light: aren’t very legible when the page is in the same mode, because the top edge bleeds into the background color. I was wondering if there were thoughts on improving that, some ideas I had:

  • Add a mid-grey transparency effect outside the border, to help them pop a bit against either page mode.
  • Make them a centered gradient, with the mid-range color at the border and the dark/light at the center.
  • Merge them into one react, and show the dark on light mode pages, and the light on dark mode pages

Light-on-light mode

image

Dark-on-dark mode

image

It’s a good call! Unfortunately Discourse doesn’t have reactive emoji that would allow us to unify them. The original idea was to mirror the two versions of the logo. I’m wondering if a border on both would help clarify them. I’ll play with it some.

I didn’t know if it would be possible with some CSS trickery to detect the page mode and accomplish the effect. And yeah, they look great, it took me a bit to figure out what was bugging me when I saw a like-mode heart.