:pendant: is invisible on dark themes

[Jarry]

at the end of that line there is a emoji, invisible for all the dark theme users, can we make it a little brighter?

if i have to make a PR just point me where and i'll do it

[ben_lubar]

@Jarry said in is invisible on dark themes:

if i have to make a PR just point me where and i'll do it

tdwtf/emoji/tdwtf at master · boomzillawtf/tdwtf

Custom CSS and headers for what.thedailywtf.com. Contribute to boomzillawtf/tdwtf development by creating an account on GitHub.

[Yamikuronue]

@Jarry said in is invisible on dark themes:

invisible for all the dark theme users

I can see it on my theme. That's why I picked Superhero -- it has the background as a dark blue, so I can still (barely) see black emojis. There are a lot of black emojis...  

[Zecc]

@Yamikuronue Emphasis on barely.

On the other hand we can see @Jaloopa's avatar slightly better.

[Jaloopa]

I had a Stylish rule to force white background on emojicons. And avatars because @pjh is also invisible on dark themes

[Zecc]

@Jaloopa I've just added this: img.emoji { background-color: #587993; }. ^†
Not fully white, but enough to see the all important .

While I was at it I also lightened up the mentions.

^†Changed selector to img[data-emoji-id^='fa_'] plus a few other well-known data-emoji-ids as to not make most other emojis (which don't need a brighter background) look terrible.

[Yamikuronue]

@Zecc Pendant and black star are rough, but the fa- whatevers are nice and clear. Hooray for bold thick lines.

My stylish includes making bold blue, so I can see it easily.

[Zecc]

@Zecc said in is invisible on dark themes:

Changed selector to img[data-emoji-id^='fa_'] plus a few other well-known data-emoji-ids

"A few"...

  img[data-emoji-id='eight_pointed_black_star'],
  img[data-emoji-id='pendant'],
  img[data-emoji-id='black_nib'],
  img[data-emoji-id='pen_fountain'],
  img[data-emoji-id='flag_black'],
  img[data-emoji-id='film_frames'],
  img[data-emoji-id='key2'],
  img[data-emoji-id^='fa_']
  {
    background-color: #587993;
  }
  img[data-emoji-id='telephone_receiver'],
  img[data-emoji-id='scorpion']
  {
    background-color: #ecbb38;
  }
  img[data-emoji-id='camera'],
  img[data-emoji-id='video_game'],
  img[data-emoji-id='new_moon'],
  img[data-emoji-id='new_moon_with_face'],
  img[data-emoji-id='spider_web']
  {
    background-color: #dbe8ee;
  }
  img[data-emoji-id='bomb']
  {
    background-color: #ffdddd;
  }

I still haven't gone through all them, but ain't got time for that.

[Zecc]

@Zecc I any case this is just a stupid workaround.

The real solution should be to add an appropriate background to each of the NodeBB emoji so it also works on dark themes. That would fix the problem for everyone.

[codnghorror]

None of our thousands of paying users use dark themes. It's not a priority at the moment, just use the default.

CLOSED_WONT_FIX

[anotherusername]

Is there a way to make theme-specific CSS in addition to the theme's own CSS? As in, to add some CSS, but only if the user has selected certain themes (dark ones)?

If so, dark emoji would probably be able to pretty simply be solved by adding a filter: invert(1) style...

.emoji[data-emoji-id='arrows_clockwise'],
.emoji[data-emoji-id='back'],
.emoji[data-emoji-id='copyright'],
.emoji[data-emoji-id='curly_loop'],
.emoji[data-emoji-id='currency_exchange'],
.emoji[data-emoji-id='dark_sunglasses'],
.emoji[data-emoji-id='eight_pointed_black_star'],
.emoji[data-emoji-id='end'],
.emoji[data-emoji-id='eyeglasses'],
.emoji[data-emoji-id^='fa_'],
.emoji[data-emoji-id='headdesk'],
.emoji[data-emoji-id^='heavy_'],
.emoji[data-emoji-id='magnets_having_sex'],
.emoji[data-emoji-id='manhole'],
.emoji[data-emoji-id='moving_goal_post'],
.emoji[data-emoji-id='mu'],
.emoji[data-emoji-id='musical_note'],
.emoji[data-emoji-id='notes'],
.emoji[data-emoji-id='on'],
.emoji[data-emoji-id='onion'],
.emoji[data-emoji-id='pen_fountain'],
.emoji[data-emoji-id='pendant'],
.emoji[data-emoji-id='registered'],
.emoji[data-emoji-id='soon'],
.emoji[data-emoji-id='tm'],
.emoji[data-emoji-id='top'],
.emoji[data-emoji-id='wavy_dash'],
.emoji[data-emoji-id='whoosh']
{
    filter: invert(1);
}

...if not, at least you can put that in your userscripts...

edit: probably good to add the following to force "fake emoji" (uploaded images tagged with the emoji class) to have a white background, since there's no telling whether they'll look okay otherwise... e.g.:

.emoji:not([data-emoji-id]) {
    background: white;
}

[hungrier]

@anotherusername said in is invisible on dark themes:

Is there a way to make theme-specific CSS in addition to the theme's own CSS?

There are some skin-specific rules in the existing CSS, but I think it would require a truckload of duplication to use those alongside each individual emojicon. Maybe the "invisible on dark background" emojis could be tagged with an additional class in the baking process, and then we could just have a rule like

.skin-darkly .emoji.light-bg,
.skin-slate .emoji.light-bg
...
{
    filter:invert(1);
}

to take care of all of them en-masse.

@ben_lubar can you apply an extra class to individual emojicons? Or if you can tag them with multiple data-set-ids, have one for the ones that are hard to see on dark themes.

[Zecc]

@anotherusername You bring a good point. Monochrome emoji like will look better inverted on a dark theme, rather than still dark with a light background around them.

Eg.:

Edit: on a dark background. :L

[Zecc]

Hey look, I've made it worse!

[anotherusername]

@anotherusername For visual reference, in addition to all of the Font Awesome emoji (which are all monochrome), that takes care of the following emoji:

White background:

Black background:

Inverted on black background:

[Yamikuronue]

Normal:

white background looks ugly as shit, as you can tell by the ones that come that way naturally.

Inverted sounds like a plan for Superhero.

[anotherusername]

@Yamikuronue On that background color, inverted looks like:

edit: if a fix like this is added, the emoji that come with white backgrounds could probably also be edited to remove it to a transparent background, as they'd look okay then...

[ben_lubar]

Oh god why didn't I see this thread before I scheduled the update D:

[Tsaukpaetra]

@anotherusername said in is invisible on dark themes:

Is there a way to make theme-specific CSS in addition to the theme's own CSS? As in, to add some CSS, but only if the user has selected certain themes (dark ones)?

No, were it so we would have had Non Responsive Mode for all themes instead of just the Default. :(

[hungrier]

Since it's a pretty easy task I alphalized and :

[Tsaukpaetra]

@hungrier said in is invisible on dark themes:

Since it's a pretty easy task I alphalized and :

Easy for you to say!

[hungrier]

I took a bit of time and made a userscript. It shows a tooltip with the emojicon name, kind of like the default tooltip, but with the added feature that you can click on it to toggle inverting the emojicon:

"use strict";

// ==UserScript==
// @name emoji tooltip
// @namespace WTDWTF
// @grant none
// @match https://what.thedailywtf.com/*
// @match http://what.thedailywtf.com/*
// @description shows emojicon tooltip and lets you invert it
// @author hungrier
// @version 1.2
// ==/UserScript==
(function() {

    var hoverms = 1000;
    var storageKey = 'wtdwtf-dark-emojicons';
    var defaultEmojis = ["arrows_clockwise", "back", "copyright", "curly_loop", "currency_exchange", "dark_sunglasses", "eight_pointed_black_star", "end", "eyeglasses", "headdesk", "heavy_check_mark", "heavy_division_sign", "heavy_dollar_sign", "heavy_minus_sign", "heavy_multiplication_x", "heavy_plus_sign", "magnets_having_sex", "moving_goal_post", "mu", "musical_note", "notes", "on", "onion", "pen_fountain", "pendant", "registered", "soon", "tm", "top", "wavy_dash", "whoosh"];

    var storage = localStorage || {
        setItem: function setItem() {
            return null;
        },
        getItem: function getItem() {
            return null;
        }
    };

    var loadInvisibles = function loadInvisibles() {
        var keyString = storage.getItem(storageKey);

        var keys = keyString ? keyString.split(':') : defaultEmojis;

        return keys.reduce(function(ob, k) {
            ob[k] = 1;
            return ob;
        }, {});
    };

    var invisibles = loadInvisibles();

    var saveInvisibles = function saveInvisibles() {
        var keys = Object.keys(invisibles);
        console.log(keys);
        storage.setItem(storageKey, keys.join(':'));
    };

    var createCssRule = function createCssRule() {
        var wrapKey = function wrapKey(which) {
            return ".emoji[data-emoji-id='" + which + "']";
        };
        var genFilter = function genFilter(prefix) {
            return prefix + 'filter: invert(1);';
        };

        var keys = Object.keys(invisibles);
        var prefixes = ['-webkit-', '-moz-', '-o-', '-ms-', '-khtml-', ''];

        var selector = keys.map(wrapKey).join(',');
        var rules = prefixes.map(genFilter).join(' ');

        var fullRule = selector + '{' + rules + '}';

        return fullRule;
    };

    var invertStyle = $('<style>').prop('type', 'text/css').html(createCssRule()).appendTo('head');

    var thinger = $('<div/>').css({
        border: '1px solid white',
        'background-color': 'black',
        padding: '2px 6px',
        position: 'fixed',
        display: 'none',
        'z-index': 100
    }).appendTo('body');

    var hideTimer = void 0;

    var startHide = function startHide() {
        hideTimer = setTimeout(function() {
            thinger.css('display', 'none');
        }, hoverms);
    };

    var stopHide = function stopHide() {
        clearTimeout(hideTimer);
    };

    var showHoverer = function showHoverer(text, x, y) {
        stopHide();

        thinger.attr('data-emoji-name', text);
        thinger.text(text);

        thinger.css({
            left: x + 2,
            top: y + 2
        });

        thinger.css('display', 'block');
    };

    thinger.on('click', function() {
        var which = thinger.attr('data-emoji-name');

        if (invisibles[which]) {
            delete invisibles[which];
        } else {
            invisibles[which] = 1;
        }

        saveInvisibles();

        invertStyle.html(createCssRule());
    });

    thinger.on('mouseover', stopHide);
    thinger.on('mouseout', startHide);

    $('body').on('mouseover', '.emoji-parsed', function(mouseEvent) {
        var emojiname = mouseEvent.target.title;
        var cx = mouseEvent.clientX;
        var cy = mouseEvent.clientY;

        showHoverer(emojiname, cx, cy);
    });

    $('body').on('mouseout', '.emoji-parsed', startHide);
})();

I've only tested it on Opera (latest on Windows) and Chrome (not latest on OSX) but it should work anywhere, hopefully.

[Zecc]

The CSS in some oneboxes changes the text color but assumes a white background color, which results in this unreadable mess:

I've added this to my Stylish:

iframe { background-color: #FF00FF; } /* Hot pink background of shame */

I've changed it to #FFDDFF after my eyes screamed for mercy.

[RaceProUK]

@Zecc said in is invisible on dark themes:

I've changed it to #FFDDFF after my eyes screamed for mercy.

heh

[ben_lubar]

@RaceProUK said in is invisible on dark themes:

@Zecc said in is invisible on dark themes:

I've changed it to #FFDDFF after my eyes screamed for mercy.

heh

background-color: aliceif;

[Zecc]

@Zecc said in is invisible on dark themes:

The CSS in some oneboxes changes the text color but assumes a white background color, which results in this unreadable mess:

I've added this to my Stylish:

iframe { background-color: #FF00FF; } /* Hot pink background of shame */

I've changed it to #FFDDFF after my eyes screamed for mercy.

Turns out not all embeds are iframes. Some are divs.

.panel-iframely { animation: ccos 3s infinite; }
  @keyframes ccos {
      0% { background-color: #dff; color: #600; }
     16% { background-color: #ddf; color: #660; }
     33% { background-color: #fdf; color: #060; }
     50% { background-color: #fdd; color: #066; }
     66% { background-color: #ffd; color: #006; }
     83% { background-color: #dfd; color: #606; }
    100% { background-color: #dff; color: #600; }
  }

[PleegWat]

@Zecc said in is invisible on dark themes:

Turns out not all embeds are iframes. Some are divs.

Shouldn't they all be sandboxed iframes for XSS protection? </noob>

[hungrier]

@PleegWat But that would mean that they wouldn't necessarily have multiple different code paths, and would behave more predictably. What kind of not-10-years-in-the-future forum would allow that?

[Polygeekery]

@Yamikuronue said in is invisible on dark themes:

Hooray for bold thick lines.

So close to several s, so close.

[Zecc]

  [component="user/picture"][data-uid="591"] {
    filter: invert(1);
  }

I'm looking at you, @antiquarian.

(and now I can actually see something).

[RaceProUK]

Ack! It's a ghost!

[aliceif]

@ben_lubar said in is invisible on dark themes:

@RaceProUK said in is invisible on dark themes:

@Zecc said in is invisible on dark themes:

I've changed it to #FFDDFF after my eyes screamed for mercy.

heh

background-color: aliceif;

aliceblue is a pleasantly soft color.

EDIT: Sample:

[ben_lubar]

@aliceif said in is invisible on dark themes:

@ben_lubar said in is invisible on dark themes:

@RaceProUK said in is invisible on dark themes:

@Zecc said in is invisible on dark themes:

I've changed it to #FFDDFF after my eyes screamed for mercy.

heh

background-color: aliceif;

aliceblue is a pleasantly soft color.

EDIT: Sample:

I'm just upset that they gave my favorite color my sister's name.

[Zecc]

@ben_lubar #663399 is an unusual name.

[wharrgarbl]

@ben_lubar said in is invisible on dark themes:

background-color: aliceif;

@aliceif is now officially a color name

[Zecc]

Btw, .posts-list .posts-list-item .topic-title { color: #333; } in /assets/stylesheet.css?v=pat1008h62c is overriding a { color: #df691a; } in https://maxcdn.bootstrapcdn.com/bootswatch/latest/superhero/bootstrap.min.css, making topic titles in profile pages invisible, among other things.

Let's face it: dark themes don't get much love.

[Zecc]

Sigh

■■■■■■■■■ mentioned ■■■■■■■■■■■■■ in ■■■■■■■■■■■■■■■■■■■■■■■■■■, you say?