search

rugk / website-dark-mode-switcher

This is a (Firefox) add-on (WebExtension) that lets you invert the website's color scheme by inverting/changing the prefers-color-scheme media feature of CSS.
https://addons.mozilla.org/firefox/addon/dark-mode-website-switcher/?src=external-github-top
Other
58 stars 4 forks source link

Automatic theme change not working in Open Fixture Library #30

Closed FloEdelmann closed 3 years ago

FloEdelmann commented 3 years ago

Affected website: Open Fixture Library (https://open-fixture-library.org/). Disclosure: I'm the author of that page :wink:

Bug description

The theme is not automatically toggled when clicking the extension's button. The correct theme is applied after a page reload.

Steps to reproduce

  1. Go to https://open-fixture-library.org/
  2. Click the extension's button to toggle the theme

Actual behavior

The page theme does not change immediately.

Expected behavior

The page theme should change.

System

Operating system and version: Ubuntu 20.04 Browser and version: Firefox 84.0 Add-on version: 1.2

Possible solution

The page's theme switcher code is located here: https://github.com/OpenLightingProject/open-fixture-library/blob/master/ui/components/ThemeSwitcher.vue

We use mediaQuery.addListener to listen for changes (and toggle an attribute on the <html> element), but that listener is never called.

rugk commented 3 years ago

Thanks for the bug report. I've tested it with Firefox 84 (on Linux/Fedora 33) and the initial load works, at least (and is logged in the console):

grafik

Following your exact STR's it does not work, however, indeed. The issue likely is here: https://github.com/rugk/website-dark-mode-switcher/blob/ee45d2006054a190e7815b6d120818458f18a375/src/content_scripts/applyColorSchemeJs.js#L63-L71

Maybe onchange would yield a different result?

I have to admit I have not tested that case very specifically. So if you have a fix or so, feel free to contribute.

FloEdelmann commented 3 years ago

I just tried onchange locally, but that's not called either.