Hi,
I want to color the tabs URLs icons to red- just the icons of the sites.
Someone on reddit gave me that code and explanation:

.tabbrowser-tab .tab-icon-image { filter: sepia(1) saturate(5000%) hue-rotate(0deg); }

What this does is make every icon the same hue with the sepia filter, then, you rotate the hue towards red. You need to use high saturation to make the colours pop and every icon should be red.

https://www.quackit.com/css/functions/css_hue-rotate_function.cfm

It partially succeeded. All the webs icons with one color as github, virusetotal…are colored in red, but all the webs with more than one color as google, amazon… are colored partially in red. It as like this code can color only one color of the icon.
There is any way to color all the icons to red or replace them?

Thanks.

  • zeus ⁧ ⁧ ∽↯∼@lemm.ee
    1·
    8 months ago

    well i don’t really know how much you know, so i don’t want to over-explain things, but:

    • data uris are basically a way of embedding a whole image in text, rather than linking to an image (i.e. src=./favicon.png). more reading. so there’s no way of guessing what image to replace, you have to inspect the source of the image in the browser chrome
    • which leads me to: the browser toolbox allows you to inspect the actual browserchrome itself more reading. you can’t right click → inspect to pinpoint a specific element, but you can click the “⇱” icon and select an element
    • so you’ll have to inspect your own browser to find the specific string
    • if the code actually did nothing (on lemmy, not amazon) you might be out of luck - it’s possible firefox compresses them differently so the uri doesn’t match i’m an idiot, it would do nothing, it has [..] in it because the actual string is too long for a lemmy comment

    do feel free to ask further questions, although my replies may be slow as i’m not really on lemmy that often