DEV Community

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

Ben Halpern on May 30, 2019

This was brought up in another thread. This and other some other emojis do not translate well to dark backgrounds, such as night theme on this site. I’m not necessarily looking for a specific solution for dev.to, but I’d be curious to hear about possible approaches to this sort of thing.

Collapse
 
stefandorresteijn profile image
Stefan Dorresteijn • Edited

Probably creating/using a specific icon set just for dark themes. I'm sure there are icon sets out there already that keep that restriction in mind.

Collapse
 
flrnd profile image
Florian Rand • Edited

This is probably the best approach, but I don't think there is an specific technical solution, it depends on the situation. Emojis and icons are easy, just a icon set like you said, but I'd like to see some examples, probably some of them are not that easy as change icon theme.

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

Are you able to target emojis with css to replace them with an icon?

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

Someone on Twitter had some input on this:

Collapse
 
maeganwilson_ profile image
Maegan Wilson • Edited

Not too technical, but if wanting to just use emojis. I use ✅ in dark themes.

Collapse
 
jakenherman profile image
Jaken Herman

Occam's Razor. "The simplest solution is almost always the best.”

Collapse
 
vuild profile image
Vuild

This is actually good.

Collapse
 
yaser profile image
Yaser Al-Najjar

Clean solution: like Slack, they use their own emojis (and convert any font emojis into theirs).

Simple dirty hack: download the font that has the not good looking "✔️" and make the necessary changes and there you have your own font.

Collapse
 
mortoray profile image
edA‑qa mort‑ora‑y

Coloured fonts, and emoji, are fundamentally broken in this regards and there is no solution to the problem. So I doubt it'll just be ✔️ that causes the problem.

I'm in favour of having fonts that provide only B&W glyphs, for use in places where the color is important.

But isn't ✔️ changing color in dark mode?

I discovered a lot of problems when doing mobile development, where I thin it was iPhone, wasn't even applying the opacity to coloured glyphs. Being able to apply colored tinting would be nice. It looks like most apps ignore the issues, since they don't have a way to solve it.

Collapse
 
turnerj profile image
James Turner

Checkmark doesn't appear hard to see in dark mode on Windows 10 + Firefox

Doesn't look like anything to me

Just goes to show how different an emoji may look on different systems - for me, that was Windows 10 with Firefox.

Collapse
 
samuraiseoul profile image
Sophie The Lionhart • Edited

Go to compart.com/en/unicode/search?q=ch... it is a list of unicode checkmarks(emoji is there too).

Once there, run this in the console to make all of them red or whatever color you like to see which change. document.querySelectorAll('.char').forEach(element => element.style.color = 'red');

Edit: After that of course, pick one and switch it.

Collapse
 
wuz profile image
Conlin Durbin

You could wrap all emoji in a span that gets some styles applied - maybe some basic padding and a white background?

Collapse
 
vuild profile image
Vuild

Use SVG & dark mode/invert CSS.

Collapse
 
vuild profile image
Vuild • Edited

My site has incompete & messy dark mode inverted media queries in the CSS that you can use to trigger SVG color changes. You can replace a couple of emojis or do a full set.

It's nice because you can control various elements of the emoji (shades/shapes/colors) & not rely on browser defaults which vary in quality a lot. It's also a nice distinguishing factor design wise.

Emojis also present accessibility issues (if I remember correctly) - could be wrong.

They are also pixel/don't scale well (see /zombie on my site) unlike SVG.

Animation too.

In fact I am going to replace all my emojis with SVG (I've just convinced myself here). There are better experts:

sarasoueidan.com/tags/svg/

Edit: there is also blend mode type methods out there.

Collapse
 
gypsydave5 profile image
David Wickes

Just don't support darkmode.

Collapse
 
jack profile image
Jack Williams • Edited

You must work for Slack 😆

Sorry that was a low blow, I still love Slack heh.

But this post has made me realize, maybe the reason slack hasn't released darkmode is because it's hard to get it right.

Collapse
 
ben profile image
Ben Halpern

That train left the station already 😂

Collapse
 
peiche profile image
Paul

ಠ_ಠ

Collapse
 
conw_y profile image
Jonathan • Edited

Put some kind of bright border around it? And do this consistency for all dark emojis, so that people get used to seeing it and it isn't jarring.

Here's a very rough concept, but it could be polished to look aesthetically pleasing:

Dark 'tick' emoji with light border around it

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.

Collapse
 
whydoesiestillexist profile image
King Kale

preethisam.com/2018/06/25/how-to-u...

This allows you to color emojis to your heart's content!

Collapse
 
nektro profile image
Meghan (she/her)

make emojis consistent across all platforms and use github.com/twitter/twemoji