Fix Emoji Contrast in Dark TW, FB & TG by myfonj

Screenshot of Fix Emoji Contrast in Dark TW, FB & TG
Details

Authormyfonj
LicenseCC0
Categorytwitter, dark, contrast, emoji
Created1 year, 10 months ago
Updated1 day, 6 hours ago
Size7.4 kB
Statistics

Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description

Gives all emoji characters slight bright outline and inverts some simple ones.
Notes

Screenshot taken from this tweet.
Source code

/* ==UserStyle==
@name           Fix Emoji contrast in dark themes for Twitter, Facebook and Telegram
@namespace      github.com/openstyles/stylus
@version        3.0.3
@description    Gives all emoji characters slight bright outline and inverts some simple black ones.
@author         myfonj
@license        CC0
==/UserStyle== */
/*
 Changelog
 3.0.3 (2024-05-17) x.com "Terror from the deep"
 3.0.2 (2024-05-15) added missing ™ for telegram
 https://userstyles.world/style/5327/fix-emoji-contrast-in-dark-tw-fb-tg
 https://twitter.com/myfonj/status/1540416707612786690
*/
@-moz-document domain('www.facebook.com'){
 /*
  Facebook: glow for all Emoji images
 */
 img[src*="fbcdn.net/images/emoji.php/"][src$=".png"] {
   filter: drop-shadow(0px 0px .5px #fff) !important;
 }
 /*
  these are problematic at FB:
👣💂‍♀️💂💂‍♂️👩‍🎓🧑‍🎓👨‍🎓🥷🎩🎓🪲🐈‍⬛🌑🍚🍵🎱🤿🎼♟🗿🖥📼💣🕳🪄🖤🎵🎶⚫️▪️◾️🔲◼️⬛️♠️♣️🏴
 */
}


@-moz-document domain("twitter.com"), domain("x.com") {
/*
 Twitter with "Dark" or "Dim" colour sheme acive
*/
body:is(
 [style*="background-color: #15202B" i], /* ocassionally served to Edge/Chrome or something? */
 [style*="background-color: rgb(21, 32, 43)" i],
 [style*="background-color: #000" i], /* not seen, for hypothetical 000000 and 000000FF and 000F */
 [style*="background-color: rgb(0, 0, 0)" i]
)
/*
 Any Emoji image
*/
img[src*=".twimg.com/emoji/v2/svg/"] {
 /*
  - default: give all emojis slight "glow"
 */
 filter: drop-shadow(0px 0px .5px #fff);
 opacity: 1 !important;
 /*
  - hover: no glow but bright background
 */
 &:not(#\0):hover {
  filter: none !important;
  background-color: #fff !important;
 }
 /*
  - Invert Emojis that are plain black or near-black where presenting them as bright would not change the meaning
 */
 &:is(
  [src$="/a9.svg"] /* ©️ Copyright */
  ,[src$="/ae.svg"] /* ®️ Registered */
  ,[src$="/2122.svg"] /* ™ Trade Mark  */
  ,[src$="/2714.svg"] /* ✔️ Check Mark */
  ,[src$="/2716.svg"] /* ✖️ Multiply */
  ,[src$="/2734.svg"] /* ✴️ Eight-Pointed Star */
  ,[src$="/2795.svg"] /* ➕ Plus */
  ,[src$="/2796.svg"] /* ➖ Minus */
  ,[src$="/2797.svg"] /* ➗ Divide */
  ,[src$="/27b0.svg"] /* ➰ Curly Loop */
  ,[src$="/3030.svg"] /* 〰️ Wavy Dash */
  ,[src$="/1f41c.svg"] /* 🐜 Ant */
  ,[src$="/1f4b1.svg"] /* 💱 Currency Exchange */
  ,[src$="/1f4b2.svg"] /* 💲 Heavy Dollar Sign */
  ,[src$="/1f4de.svg"] /* 📞 Telephone Receiver */
  ,[src$="/1f4fd.svg"] /* 📽️ Film Projector */
  ,[src$="/1f50c.svg"] /* 🔌 Electric Plug */
  ,[src$="/1f519.svg"] /* 🔙 Back Arrow */
  ,[src$="/1f51a.svg"] /* 🔚 End Arrow */
  ,[src$="/1f51b.svg"] /* 🔛 On! Arrow */
  ,[src$="/1f51c.svg"] /* 🔜 Soon Arrow */
  ,[src$="/1f51d.svg"] /* 🔝 Top Arrow */
  ,[src$="/1f577.svg"] /* 🕷️ Spider */
  ,[src$="/1f7f0.svg"] /* 🟰 Heavy Equals Sign */
  ) {
  filter: invert(1) !important;
 }
}

/*
Other problematic dark emojis:
🕳️ Hole
 💣 Bomb 
 👁️‍🗨️ Eye in Speech Bubble
 ⛰️ Mountain
 🦨 Skunk
 🐃 Water Buffalo
 🐈‍⬛ Black Cat
 🖤 Black Heart
 🪰 Fly
 🍳 Cooking
 🥘 Shallow Pan of Food
 ♠️ Spade Suit
 ♣️ Club Suit
 🎱 Pool 8 Ball
 ♟️ Chess Pawn
 🎓 Graduation Cap
 🎩 Top Hat
 🕶️ Sunglasses
 ⬛ Black Large Square
 ◼️ Black Medium Square
 ◾ Black Medium-Small Square
 ▪️ Black Small Square
 🏴 Black Flag🏴‍
 ☠️ Pirate Flag
*/
 
 /* testing batch:
©️®️™✔️✖️✴️➕➖➗➰〰️🐜💱💲📞📽️🔌🔙🔚🔛🔜🔝🕷️🟰
🕳️💣👁️‍🗨️⛰️🦨🐃🐈‍⬛🖤🪰🍳🥘♠️♣️🎱♟️🎓🎩🕶️⬛◼️◾▪️🏴🏴‍☠️
*/
}

@-moz-document domain("web.telegram.org") {
/*
 Telegram: glow for dark, invert for black Emoji, rest unchanged
*/
/*  🕳💣👁‍🗨🗨👣🐕‍🦺🐃🐈‍⬛🐾🦨🦡🐧🦅🐜🕸🕷🌑♠♣♟🕶🎓🎼🎵🎶🎩📞📼✒🖋🖊🗝🔙🔚🔛🔜🔝✖➕➖➗🟰〰💱💲✔➿➰©🏴⚫▪◾◼⬛ */

img.emoji[src="assets/img/emoji/1f573.png"], /*🕳 */
img.emoji[src="assets/img/emoji/1f4a3.png"], /*💣 */
img.emoji[src="assets/img/emoji/1f441-200d-1f5e8.png"], /*👁‍🗨 */
img.emoji[src="assets/img/emoji/1f5e8.png"], /*🗨 */
img.emoji[src="assets/img/emoji/1f463.png"], /*👣 */
img.emoji[src="assets/img/emoji/1f415-200d-1f9ba.png"], /*🐕‍🦺 */
img.emoji[src="assets/img/emoji/1f403.png"], /*🐃 */
img.emoji[src="assets/img/emoji/1f408-200d-2b1b.png"], /*🐈‍⬛ */
img.emoji[src="assets/img/emoji/1f43e.png"], /*🐾 */
img.emoji[src="assets/img/emoji/1f9a8.png"], /*🦨 */
img.emoji[src="assets/img/emoji/1f9a1.png"], /*🦡 */
img.emoji[src="assets/img/emoji/1f427.png"], /*🐧 */
img.emoji[src="assets/img/emoji/1f985.png"], /*🦅 */
img.emoji[src="assets/img/emoji/1f41c.png"], /*🐜 */
img.emoji[src="assets/img/emoji/1f578.png"], /*🕸 */
img.emoji[src="assets/img/emoji/1f577.png"], /*🕷 */
img.emoji[src="assets/img/emoji/1f311.png"], /*🌑 */
img.emoji[src="assets/img/emoji/2660.png"], /*♠ */
img.emoji[src="assets/img/emoji/2663.png"], /*♣ */
img.emoji[src="assets/img/emoji/265f.png"], /*♟ */
img.emoji[src="assets/img/emoji/1f576.png"], /*🕶 */
img.emoji[src="assets/img/emoji/1f393.png"], /*🎓 */
img.emoji[src="assets/img/emoji/1f3a9.png"], /*🎩 */
img.emoji[src="assets/img/emoji/1f4de.png"], /*📞 */
img.emoji[src="assets/img/emoji/1f4fc.png"], /*📼 */
img.emoji[src="assets/img/emoji/2712.png"], /*✒ */
img.emoji[src="assets/img/emoji/1f58b.png"], /*🖋 */
img.emoji[src="assets/img/emoji/1f58a.png"], /*🖊 */
img.emoji[src="assets/img/emoji/1f5dd.png"], /*🗝 */
img.emoji[src="assets/img/emoji/1f3f4.png"], /*🏴 */
img.emoji[src="assets/img/emoji/26ab.png"], /*⚫ */
img.emoji[src="assets/img/emoji/25aa.png"], /*▪ */
img.emoji[src="assets/img/emoji/25fe.png"], /*◾ */
img.emoji[src="assets/img/emoji/25fc.png"], /*◼ */
img.emoji[src="assets/img/emoji/2b1b.png"], /*⬛ */
img.emoji[src="assets/img/emoji/xxxx.png"] {
 filter: drop-shadow(0px 0px .5px #fff);
}

img.emoji[src="assets/img/emoji/1f3bc.png"], /*🎼 */
img.emoji[src="assets/img/emoji/1f3b5.png"], /*🎵 */
img.emoji[src="assets/img/emoji/1f3b6.png"], /*🎶 */
img.emoji[src="assets/img/emoji/1f519.png"], /*🔙 */
img.emoji[src="assets/img/emoji/1f51a.png"], /*🔚 */
img.emoji[src="assets/img/emoji/1f51b.png"], /*🔛 */
img.emoji[src="assets/img/emoji/1f51c.png"], /*🔜 */
img.emoji[src="assets/img/emoji/1f51d.png"], /*🔝 */
img.emoji[src="assets/img/emoji/2716.png"], /*✖ */
img.emoji[src="assets/img/emoji/2795.png"], /*➕ */
img.emoji[src="assets/img/emoji/2796.png"], /*➖ */
img.emoji[src="assets/img/emoji/2797.png"], /*➗ */
img.emoji[src="assets/img/emoji/1f7f0.png"], /*🟰 */
img.emoji[src="assets/img/emoji/3030.png"], /*〰 */
img.emoji[src="assets/img/emoji/1f4b1.png"], /*💱 */
img.emoji[src="assets/img/emoji/1f4b2.png"], /*💲 */
img.emoji[src="assets/img/emoji/2714.png"], /*✔ */
img.emoji[src="assets/img/emoji/27bf.png"], /*➿ */
img.emoji[src="assets/img/emoji/27b0.png"], /*➰ */
img.emoji[src="assets/img/emoji/00a9.png"], /*© */
img.emoji[src="assets/img/emoji/2122.png"], /*™ */
img.emoji[src="assets/img/emoji/yyyy.png"] {
 filter: invert(1) !important;
}



}
Reviews

No reviews yet.