Color changes only on page load, and flashes on a website

Great extension! I LOVE IT.

One thing I’ve noticed though: in my website I have a dark mode switch. I’m gonna use it to describe the behavior I’m experiencing.

A little background: my system, Firefox and the extension are working on dark mode right now (it’s night time here at the moment of testing the extension). I have the Dark Reader extension installed, but I disabled it completely from Firefox extensions to track down the problem properly.

I got 2 problems:

• When I’m in dark mode in the website, everything works fine. However, if switch to the light theme, it doesn’t change the tab colors right away. I need to refresh or get into a link to make it change.
• If I leave it in light mode, it flashes in dark and then goes to the proper color again (light).

I can tell you that the meta theme-color in my website is set via javascript at the very beginning of loading the website. The flashing problem does not happen in Chrome or similar browsers in Android where the tabs color changes according to the current webpage theme, and they switch dynamically as well.

I could say that the flashing problem might be because the theme-color tag is being processed a few milliseconds late, but still the javascript code is running even before the DOM is processed I guess. The problem does not happen in Android browsers because they process the theme-color tag a bit late and, in the meantime they retain the previous color, I guess?

EDIT: the flash issue seems to happen, at least to me, in the homepage, here, and any product page. It does not happen, however, here, or at least not so frequently, which may hint a race condition problem as I mentioned.

And an optional issue, which I don’t really know if that’s part of the scope of what the extension is able to do:

• The SVG favicon in my webpage is able to switch between dark and light mode depending on the system color scheme (I’m guessing more precisely Firefox color scheme). So, it won’t change according to the current theme chosen in the website, which is desirable given that it has to go along the color scheme of the whole browser. Thing is, the extension does change the whole look of the borders and tabs.

Does it have the ability to switch the SVG colors in the favicons? To give more information, SVG uses the media query (prefers-color-scheme: dark) to change the fill color within the icon. It is embedded in the SVG file.

Thank you!

[YS-Wong]

@Arecsu the add-on is now responsive to color scheme switching on your website (needs “dynamic color update” turned on).

[Arecsu]

Ok, I think I solved this issue in the most simple and “dirty” way:

// background.js
if (response == undefined) {
  // checks if it's an about or addons.mozilla.org
  if (url.startsWith("about:") || url.startsWith("addons.mozilla.org")) {
    resetFrameColor(windowId);
  }
console.log("NO CONNECTION TO CONTENT SCRIPT\nMay be about:pages");
}

😃

So far, no flashing problems at all and everything works just fine. Gonna to make a pull request!