DEV Community

Discussion on: What would be a technical solution to ✔️ not looking good on dark mode?

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

Maybe a CSS paintlet to add a white outline or drop shadow around the glyph. Not sure if that's even possible.

Collapse
 
jackharner profile image
Jack Harner 🚀

Unless you end up wrapping every emoji character in something:

<p>Good Job! <span class="emoji">✔️</span></p>

I don't think it's possible to select just emoji characters with CSS.

Collapse
 
bennypowers profile image
Benny Powers 🇮🇱🇨🇦

I haven't gotten my hands wet with CSS Paint API yet, but it looks like the painter's paint method doesn't get access to char data., so yeah you'd have to use some server code to wrap the desired emoji.

Collapse
 
ben profile image
Ben Halpern

That’s probably pretty feasible. We do a bunch of similar things in the markdown compiler, and it wouldn’t interrupt compatibility.

We’d want some awareness of which emojis are and aren’t visible in dark mode. We would only want to give those that treatment. Most play well with any background.

Thread Thread
 
vuild profile image
Vuild • Edited

This. Switch out & make accessible(?) + add basic sentiment analysis for dev.to (ability to see happy vs sad moods overall on boards). Regardless, a sitewide unscientific emoji stream page where you can just see emojis (+post) that ppl recently used would be interesting here as there is a lot of 'dev mood' talk.

twemoji.twitter.com - emojis will be consistent, scalable, animatable, customizable.
emojipedia.org - emoji OS inconsistencies.
sarasoueidan.com/blog/icon-fonts-t... batch existing.
i❤.ws just for fun.

There is not much out there on SVG vs emoji but SVG is clearly better. Maybe I'll try it & see how it goes.