:pendant: is invisible on dark themes



  • 0_1490849040953_upload-f42734bf-7dbe-4286-a552-1435efee1e38

    at the end of that line there is a :pendant: 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



  • @Jarry said in :pendant: is invisible on dark themes:

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


  • I survived the hour long Uno hand

    @Jarry said in :pendant: 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... :eight_pointed_black_star: :fa_ambulance: :fa_anchor: :pendant: :pen_fountain:



  • @Yamikuronue Emphasis on barely.

    0_1490868900876_upload-5442b655-cca6-4e07-ad39-b359ecc6f1c9

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

    0_1490869053148_upload-ca1e256c-8d55-4685-b93d-5a08bd4f1471


  • kills Dumbledore

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



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

    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.


  • I survived the hour long Uno hand

    @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 said in :pendant: 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 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.



  • 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



  • 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;
    }
    


  • @anotherusername said in :pendant: 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.



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

    Eg.:

    0_1490994527484_upload-e53b7bb1-7c99-479d-be40-116bd582c25c

    Edit: on a dark background. :L



  • Hey look, I've made it worse!

    0_1490995032515_upload-f013b143-874e-4a07-89a4-630534bb5441



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

    :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: :manhole: :moving_goal_post: :mu: :musical_note: :notes: :on: :onion: :pen_fountain: :pendant: :registered: :soon: :tm: :top: :wavy_dash: :whoosh:

    White background:
    0_1490995361100_upload-198a683c-6a15-4cba-9a95-ea8c64734d00

    Black background:
    0_1490995507347_upload-3c69c5f3-e917-4f55-94ee-c88ea0ca8a1e

    Inverted on black background:
    0_1490995643821_upload-cd69ab5d-f47c-42ef-8eb8-344797107942


  • I survived the hour long Uno hand

    Normal:

    0_1490995793419_upload-6206626c-a906-4863-82a1-d89ee864d3b9

    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.



  • @Yamikuronue On that background color, inverted looks like:

    0_1490996045713_upload-cd0af2c7-8bf4-4808-a579-306f6b061db0

    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...



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


  • Impossible Mission Players - A

    @anotherusername said in :pendant: 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. :(



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

    0_1491089945421_moving_goal_post.png
    0_1491089954428_mu.png


  • Impossible Mission Players - A

    @hungrier said in :pendant: is invisible on dark themes:

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

    0_1491089945421_moving_goal_post.png
    0_1491089954428_mu.png

    Easy for you to say!
    0_1491092307078_Screenshot_20170401-171814.png



  • 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.



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

    0_1491154465995_upload-61e18dc0-f175-4254-a862-d209c2a47fcc

    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.


  • SockDev

    @Zecc said in :pendant: is invisible on dark themes:

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

    heh



  • @RaceProUK said in :pendant: is invisible on dark themes:

    @Zecc said in :pendant: is invisible on dark themes:

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

    heh

    background-color: aliceif;



  • @Zecc said in :pendant: 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:

    0_1491154465995_upload-61e18dc0-f175-4254-a862-d209c2a47fcc

    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; }
      }
    


  • @Zecc said in :pendant: 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>



  • @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?


  • Grade A Premium Asshole

    @Yamikuronue said in :pendant: is invisible on dark themes:

    Hooray for bold thick lines.

    So close to several :giggity:s, so close.



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

    I'm looking at you, @antiquarian.

    (and now I can actually see something).


  • SockDev

    Ack! It's a ghost!
    0_1491314760187_upload-816eba89-0279-4e7a-968c-276d28bae50e


  • area_deu

    @ben_lubar said in :pendant: is invisible on dark themes:

    @RaceProUK said in :pendant: is invisible on dark themes:

    @Zecc said in :pendant: 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:
    0_1491333494620_upload-453d549f-bddd-4f24-9f83-9a7a4ce20784



  • @aliceif said in :pendant: is invisible on dark themes:

    @ben_lubar said in :pendant: is invisible on dark themes:

    @RaceProUK said in :pendant: is invisible on dark themes:

    @Zecc said in :pendant: 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:
    0_1491333494620_upload-453d549f-bddd-4f24-9f83-9a7a4ce20784

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

    0_1491340055583_upload-9ff82bf8-d2af-4b6a-86d9-79f5a7564c93



  • @ben_lubar #663399 is an unusual name.



  • @ben_lubar said in :pendant: is invisible on dark themes:

    background-color: aliceif;

    @aliceif is now officially a color name



  • 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.



  • Sigh

    0_1492080845267_Capture.PNG

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


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.