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.
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.
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.
Are you able to target emojis with css to replace them with an icon?
Someone on Twitter had some input on this:
Not too technical, but if wanting to just use emojis. I use ✅ in dark themes.
Occam's Razor. "The simplest solution is almost always the best.”
This is actually good.
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.
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.
Just goes to show how different an emoji may look on different systems - for me, that was Windows 10 with Firefox.
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.
You could wrap all emoji in a span that gets some styles applied - maybe some basic padding and a white background?
Use SVG & dark mode/invert CSS.
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.
Just don't support darkmode.
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.
That train left the station already 😂
ಠ_ಠ
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:
Maybe a CSS paintlet to add a white outline or drop shadow around the glyph. Not sure if that's even possible.
Unless you end up wrapping every emoji character in something:
I don't think it's possible to select just emoji characters with CSS.
I haven't gotten my hands wet with CSS Paint API yet, but it looks like the painter's
paintmethod doesn't get access to char data., so yeah you'd have to use some server code to wrap the desired emoji.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.
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.
preethisam.com/2018/06/25/how-to-u...
This allows you to color emojis to your heart's content!
make emojis consistent across all platforms and use github.com/twitter/twemoji