Topic on Skin talk:Chameleon

I am using a dark navbar where the echo icons do not appear light as the other elements. I tried adding something like

.echo-icons  {
       color: #dee1d2;
}

to MediaWiki:Common.css, but is has no effect. Any tips?

also, 'cmln-personal-tools-link' => "#dee1d2", does not have any effect

I would like to learn how to do this too.

The Echo icons are either PNG or SVG files (I believe PNG was dropped after MW 1.35). That means you cannot use normal CSS colors. However, there is a hacky solution by using CSS filters, but it won't work on Internet Explorer.

Simplest CSS example to make the icons #dee1d2:

.mw-echo-notifications-badge {
    filter: invert(93%) sepia(9%) saturate(255%) hue-rotate(31deg) brightness(101%) contrast(82%);
}

If you want to generate other colors, use this link: https://codepen.io/sosuke/pen/Pjoqqp

You enter your target hex color code and it will generate the filter for you. Sometimes you have to run it multiple times to get a more accurate color, but it will tell you.

that's genius .. thank you!