"Change themes based on the system theme" Option no longer works after latest Firefox update

[MiliAxe]

After the latest update of Firefox Developer Edition, The option of changing the themes based on system color scheme doesn't tend to work properly.

Also, When The Daytime theme is set to Dark and the Nighttime theme is set to Light, the extensions goes into a loop of changing themes rapidly.

Other options however, seem to work flawlessly.

Thanks for the great extension.

[skhzhang]

I found that Firefox, in some scenarios, sets the prefers-color-scheme media query to dark and light when the extension changes the theme to dark and light respectively. This can cause the loop of changing themes rapidly.

This happens even if layout.css.prefers-color-scheme.content-override is set to 2 / system.

It didn't used to do this. Dark mode in browsers have been changing a lot in software/Firefox in the past few years.

Either way, I'm still looking into it. Thanks for letting me know.

[skhzhang]

I looked into it further and this seems to be related to how themes (as of Firefox 100) are allowed to set the color scheme: https://bugzilla.mozilla.org/show_bug.cgi?id=1750932

[easonwong-de]

Now the bug happens on Firefox Release Version too.

[easonwong-de]

A so-called “loop” can be replicated this way:

1. Turn on “Change themes based on the system theme”
2. Set “Daytime theme” to a dark theme
3. Set “Nighttime theme” to a light theme

I’m looking for a method to detect OS-level dark mode as well, because my add-on also needs this feature: Adaptive Tab Bar Color. Hope you can figure that out soon.

[podiki]

I haven't tried to reproduce the loop bug, but indeed the setting to change theme based on the system theme no longer works on the release version of Firefox.

[speakerz]

Not sure if I should mention this. I also found this issue recently and had been doing some tests before I saw the bug report here. In my own tests, I found Dark Reader was able to switch the mode correctly based on OS system theme, while automaticdark had no responce.

[easonwong-de]

@speakerz It’s a different mechanism. Dark Reader only needs to work on websites where content script can be loaded, so Dark Reader just reads the meta tag in the HTML and gets the color scheme. In the contrary, Time Based Themes needs to work globally throughout the browser, no matter content script is loaded or not. (I’m not totally sure, still testing)

Edit: I was wrong. Dark Reader still knows system color scheme settings without content script loaded.

[aaronkollasch]

Just to add to this, I think that the issue could be that the background pages are unloaded and change events aren't triggered. If I open the background page moz-extension://<UUID>/_generated_background_page.html in a browser window, the browser theme updates with the system theme as expected. It doesn't have to be the frontmost tab to work, but the page does have to be loaded.

There's a 3-year old open issue on the Mozilla page about this. Not sure how the "system theme" setting was able to work before, though.

[bcutter]

The original "system theme" of Firefox is also not working, meaning: you have to restart Firefox to apply the theme change. If it does not work out of the box, how can an extension which probably relies on those mechanisms work?

I'm not wondering this extension is broken (too), at the same time sorry to see as I was hoping to find a solution with this extension.

[Draculah]

The original "system theme" of Firefox is also not working, meaning: you have to restart Firefox to apply the theme change.

Hm, the "system theme" does work for me, still; it's what I've always been using since AutomaticDark stopped working. With "works", I mean that the preference is respected upon toggling, without restarting the application. Perhaps it depends on the version or OS we're running it on? I am running Firefox 108 on Zorin OS 16, installed through apt.

I do have to say: I have installed Stylus as well, and when quickly toggling (1s in between) from light to dark and back, I get a two additional toggles that I never noticed before, so perhaps something did change under the hood of Firefox lately, since the extension wasn't updated since August.

[benswolo]

has anyone found a fix or an alternative?

[Draculah]

Well, I've tried to create my own dynamic theme before to just combine the light and dark themes I wanted to use (Dracula + Light Theme), but it was too much of a hassle to figure those things out as I have very little experience with extensions. I'm not sure, but I believe dynamic themes are more than just a json listing the theme properties; they require a few additional files.

You could try inspecting the dynamic Firefox themes such as the "Aplenglow" or the "System theme" if you want your two themes to switch based on the OS's theme and create & install your own. I got stuck somewhere, I believe it was at installing it as an xpi (not just as a developer extension) but it was a while ago, and I've learnt to just accept the "System theme". I'd be happy to look at your project if you get your own theme combo working! ;-)

[easonwong-de]

I think the problem is this line of code in common.js doesn’t work any more:

window.matchMedia('(prefers-color-scheme: dark)').addListener(function);

When the system colour scheme changes, the meta tag prefers-color-scheme does not change, unless the property of the current theme color_scheme is set to system, for example:

"current theme": {
    colors: {
        //theme colors
    },
    properties: {
        color_scheme: "system"
    }
}

I think the reason is, when the add-on inquires or listens to the change of the meta tag prefers-color-scheme, actually it is the color_scheme property of the current theme that is being read or listened. When a theme doesn’t have this property defined, as most of the themes do, Firefox will set it to “light” or “dark” depending on the colour. So, the add-on always gets the same response when it tries to detect the system colour scheme, as long as the theme isn’t changed.

A possible solution might be: the add-on extracts all colour values of the browser theme, and adds color_scheme property to it. When the add-on is to apply a new theme, use the altered version of that theme.

Above are all my personal perspective. Further inspection is required.

[easonwong-de]

It worked.

I set “Daytime theme” to “Light” and “Nighttime theme” to “Dark”:

I set “Daytime theme” to “Dark” and “Nighttime theme” to “Light”:

My approach is, every time a theme is applied, the add-on set the color_scheme property of the current theme to system.

This is just a demo, which means it’s not perfectly stable: https://github.com/easonwong-de/time-based-themes

[skhzhang]

This is brilliant. @easonwong-de , if you're OK with it, can you make a pull request?

I still need to test and review the changes, but I think you know that you're solving a long-standing bug. It restores a feature that's been broken for too long. I would like to incorporate your approach, at the very least as an experimental change.

One concern I have is that it requires the "theme" permission but I think that's totally reasonable for what the add-on does. To be honest, I'm surprised the add-on has gone so far without needing this permission.

Thank you in advance!

[easonwong-de]

@skhzhang You’re welcome, it’s always a pleasure to contribute to those great open-source projects like this one. I made a pull request #40.

[khaled-0]

Hi, and thanks for spending your precious time fixing this. Can we expect a new release soon?

[skhzhang]

Hi @khaled-0 , I submitted the next release 1.4.1 to Mozilla on Feb 23rd. It's currently awaiting review. Once it's reviewed and approved, the new update will roll out to everyone. I'll add a new comment here once it's released. :)

[khaled-0]

Hey it's approved and working great. Cheers guys @easonwong-de thanks a lot also thank you for making this extension @skhzhang

[skhzhang]

Fixed with version 1.4.1 (95361c8e635b45b2f49fc661893cc74399f10970, c350c46ae3b56fc19b153319ada787e84d736281, c22df5863233328e846e21a1c2387474f181e7d7, 97bd8d749befe24c230411baadab7b32d17bb8aa). Please open a new issue and reference this one if there are any issues. Thanks!