[Feature Request] White SVG usage - theme detection or manual option

[irvinm]

I see that you have white versions of the "update" and "archive" SVG files, but it doesn't look like the code detects the theme or provides an option to allow the user to manually select either the dark or light versions.

When using the dark theme for Firefox, the SVGs are hard to see.

[irvinm]

Just as a workaround if anyone wants to use it, you can manually apply an inversion filter to the SVG files via userChrome.css. I might have been able to simplify the CSS (Got from exploring "Browser Toolbox") but this worked for me.

html#main-window body popupset#mainPopupSet menupopup#contentAreaContextMenu menu#_72d92df5-2aa0-4b06-b807-aa21767545cd_-menuitem-_save-in-_-_-root.menu-iconic hbox.menu-iconic-left image.menu-iconic-icon {
    filter: invert();
}

[gyng]

There was a minor update in 3.7.0 to use a white icon in dark mode for Last Used, but there's a limitation in Chrome for the main app icon. You might have to update your userChrome.css files, sorry!

[irvinm]

@gyng thanks for the update. I am running Firefox (FF109.0.1 - v3.7.1), but when I removed my userChrome.css change, I still see the dark SVG.

When I debug live, I see this:

When I look into the code, I see you added the white SVG files and also test for dark mode: https://github.com/gyng/save-in/blob/bc0b7b1091e5e20fcf3959475f95e1cbceec6182/src/menu.js#L153-L168

I am wondering if the "isDarkMode()" is always returning "false" in that check. I tried setting both the Firefox theme to "auto" with Windows in dark mode and also just setting the Firefox theme to "dark". In each case, I could not get the icon to display as white.

[irvinm]

@gyng, I spent a little time on this tonight and looked at what TST does to handle dark\light and few articles and it seems like the recommended method is to use media queries.

https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries https://ultimatecourses.com/blog/detecting-dark-mode-in-javascript

TST Implementation:

https://github.com/piroor/treestyletab/blob/0d746115eaa4db30abc0e5a60ce94eebd9169d1f/webextensions/options/init.js#L137

https://github.com/piroor/treestyletab/blob/0d746115eaa4db30abc0e5a60ce94eebd9169d1f/webextensions/options/init.js#L301-L306

https://github.com/piroor/treestyletab/blob/0d746115eaa4db30abc0e5a60ce94eebd9169d1f/webextensions/options/init.js#L995-L997

So, I think at the end of the day, the quickest way to do this (without updating real-time if it changes) would be to change:

https://github.com/gyng/save-in/blob/bc0b7b1091e5e20fcf3959475f95e1cbceec6182/src/menu.js#L159-L161

To:

 16: window.matchMedia('(prefers-color-scheme: dark)').matches
   ? "icons/ic_update_light_24px.svg" 
   : "icons/ic_update_black_24px.svg",