4
[SOLVED] How do I apply a filter to all the favicons in the interface? (lemmy.world)
submitted 3 weeks ago by to c/FirefoxCSS@fedia.io
5 comments fedilink hide all child comments
 

I'm using a userChrome.css file that works very well with Firefox 158 on Arch Linux. I'm looking for a way to make dark icons stand out better, since I'm also using a dark theme. It seems to me that the following filter might be a good solution:

filter: drop-shadow(1px 0 0 rgba(255, 255, 255, 0.7)) drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.7)) drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.7)) !important;

The problem is that, for one thing, you have to target all the places where favicons appear:

  • the tab favicons;
  • the Bookmarks Toolbar, as well as its folders and subfolders;
  • the "Bookmarks" menu in the menu bar;
  • the favicons in the bookmarks within the hamburger menu;
  • the bookmarks in the sidebar;
  • the bookmarks in the library;
  • am I missing any?

On the other hand, this filter must not apply to Firefox’s internal icons (for example, the folder icon, the default globe-shaped favicon, favicons for error pages such as "Server not found" or 404 errors, etc., and favicons for about: pages, etc., etc.).

How can I do this? Thank you very much in advance for any help you can provide!

you are viewing a single comment's thread
view the rest of the comments
[–] 1 point 1 week ago (3 children)

I can't think of a way to exclude internal bookmark items, but what you could do is to keep using the filter that you have, but set the internal icon to black:

.bookmark-item:not([container]){
  fill: black !important;
}
  • permalink
  • fedilink
  • source
  • parent
  • hideshow 3 child comments
    •
  • [–] [S] 1 point 1 week ago (2 children)

    That's a great idea, and the result looks pretty nice! But how do you come up with all this? ;)

    That said, I think I'm going to give up on it anyway, because I just realized that it's not possible to apply filters to the pseudo-elements containing the favicons in the library or the sidebar. From my perspective, this idea is only interesting if we can achieve a consistent display of the favicons; if it only works halfway, it’s not really worth it...

    In any case, thanks so much for the previous idea! I’ll keep that in the back of my mind!

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 2 child comments
    •
  • [–] 1 point 1 week ago (1 child)

    Umm, yeah the library window and sidebar don't really play super well here. One thing that would sort of work for them though is to simply add the filter to the whole library tree, not only the icons - like this here

    The problem with this though is that it only sort of works if you remove all the tree indentation, because if we do so, then we can create an svg filter that applies the filter effect only at certain slice of the elements width. So it's really only a solution if you don't need the tree visualization.

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •