Dark icon blends with background in Dark Mode

[akaustav]

The URLI extension is super helpful. I just wish the icon on the URLI extension button (next to address bar) did not blend in with the background when using Dark mode in Google Chrome. Here is how it looks like in Microsoft Windows 10:

Non-Hover state:

Hover state:

Google Chrome Extensions view (chrome://extensions/):

[akaustav]

After posting this, I was able to see an option to change the default icon in the pinned extensions list.
(chrome://extensions/?options=hjgllnccfndbjbedlecgdedlikohgbko).

[akaustav]

Both the "Light" and "Rainbow" icons look good with the Dark Theme.
I guess I was expecting the extension to know what my theme was, and change the icon automatically.

Also, after changing this, the icon in the Chrome extensions view (chrome://extensions/) did not change and still looks bad.

[sixcious]

Hi @akaustav , thanks for opening this issue and the pictures. Yes, there should be a setting to change the toolbar icon color in URLI's Options page. As far as I know, Chrome doesn't offer an API to do this beyond the toolbar icon unfortunately, so the extension view is stuck with the default.

In the next update, the default icon will be a lot darker to help make it stand out against the more common dark gray themes, though it won't be a perfect solution. I tried adding some color but just didn't like the way it looked.

Thanks for the feedback!

[akaustav]

Thanks @roysix for the quick response. I have not authored a Google Chrome extension yet. So, pardon my ignorance if the below suggestions are invalid.

There seems to be a way using CSS to detect whether the user is in dark mode or not. These SO answers might be helpful:

• https://stackoverflow.com/questions/56109473/how-to-check-if-dark-mode-is-enabled-in-chrome-extension
• https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers

[akaustav]

Hi @roysix, this might help too:

• https://stackoverflow.com/questions/58880234/toggle-chrome-extension-icon-based-on-light-or-dark-mode-browser

Opened PR #5 to resolve this issue.

[sixcious]

Hi @akaustav thank you for taking the time. I wasn't expecting a pull request!

Unfortunately, URLI is a no-permission extension by default, so requiring <all_urls> will upset a lot of users who are using it permission-free. It would also definitely cause extra difficulty and wait times in getting approval from the Chrome Web Store review team. Reviews are already taking upwards of 3+ weeks due to the current situation. Adding a content script that loads on every page request to do the check also seems inefficient. So it's a deal breaker unfortunately. :(

However, it looks like we can use the window.matchMedia in the background when the extension is initially installed (so it only does the check one time). No permissions are needed there. I might add it there and credit you, but I'm not sure it's worth the extra complexity to do this. I thought the options page is supposed to open automatically after you install the extension, so I'm surprised you missed seeing the setting initially?

Thanks again for bringing up this issue!

[akaustav]

Hi @roysix, I have been developing JavaScript applications for the better part of a decade now. So, having absolutely zero knowledge around Chrome extension authoring before this, and with some "Google-Fu", I could understand most of the SO answer and your codebase. Hence the PR.

Meanwhile, I understand your dilemma about the time vs effort vs complexity vs worthiness of this issue. It would help older users of your extension.

Take my scenario, for instance. I had installed your extension in my Google Chrome around 10 years ago, I think. At that moment, I might have received the options popup/window upon installation (hard to recall - If I saw the options popup, I must have accepted the default settings). Then I turned on auto-sync in Google Chrome. Since then, all my Chrome extensions (including yours) sync across every device (which allows Chrome extensions). Dark mode was enabled in late 2019 (in Windows 10 September, 2019 release and supported by Chrome v76, I think). I turned on Dark mode on Windows 10 around that time. And since then your extension had disappeared in my Chrome. I thought I must have uninstalled or disabled it. It was until recently, that I needed your extension and found I still have it installed and enabled, just not visible because the icon blended in perfectly with the background. Hence, I had opened this issue.

I respect your decision on which direction you want your extension to go.

Unrelated: While going thru your codebase I see a blend of old ES5 (closures, var, callbacks, etc.) and ES6+ (Map, Promise, async, etc.) way of writing JavaScript code. Although there is nothing wrong with writing old JavaScript, you might want to take full advantage of new ES6+ constructs and syntaxes. Since Google Chrome has good ES6+ support for website development, I assume it has the same level of support for extension authoring too. Have you contemplated completely converting over to ES6+? If yes, do you need help?

[sixcious]

Wow! Thanks for having URLI such a long while ago! Thank you also for the detailed reply and bringing up your situation about having the extension installed already. I hadn't considered that scenario. Maybe the simplest solution is to just have one icon that works across all themes? If we stick with the multiple icons, I will definitely at least use your window.matchMedia idea in the background as a compromise since it requires no permissions, so thank you!

Thanks for taking a good look at URLI's code! You're right. I've been trying to switch over to using promises and async and await instead of the old chrome api callback functions. I'd appreciate any help with it, but it's really such a low priority for me right now, and so I wouldn't want you to waste your time on URLI.

Right now, the focus is on getting a new extension called Infy Scroll out before the end of this month, which is the successor to URLI in a way, but uses infinite scrolling instead of tab updating for incrementing.

Since you know JavaScript, if you're interested, you can install any unpacked extension and test your code changes. For example, you could clone/download the URLI zip or Infy Scroll zip here on github and load the src/chrome folder in the zip as an unpacked extension and test out any PRs you want to make or provide any additional feedback. Who knows, perhaps you may feel motivated make your own extensions as well. :)

Thanks again @akaustav!