Bug: spiegel.de dark mode / Feature request: force color scheme

[PhrozenByte]

Describe issue/request:

Some websites, e.g. https://www.spiegel.de support both light and dark themes (CSS color-scheme) that are automatically selected depending on the device's color scheme. My Firefox is configured to follow the system's color scheme that automatically switches to dark mode in the evening. However, this breaks BPC on websites that use a light color scheme as normal, but also support dark mode: archive.today will scrape the website in its "normal" color scheme (depending on a website's color-scheme CSS rule this can either mean light or dark) and convert all stylesheets to static inline styles which inherently don't support color schemes. This results in broken websites due to mixed light and dark theming, see the screenshot attached below (note that the text is barely visible and the different main and container background colors).

BPC should forcefully set the browser's prefers-color-scheme media query to normal (notably not light; normal means "use the default color-scheme specified by the web developer") when injecting contents. I believe that this isn't a site-specific issue of spiegel.de, but of any website that supports color schemes. Thus BPC should always set prefers-color-scheme to normal, no matter the requested website. However, if you disagree, a site-specific fix just for spiegel.de would be wonderful, too.

I know nothing about browser extension development, thus I don't know how this can be accomplished. However, there's another Firefox add-on that allows switching the browser's prefers-color-scheme media query on a per-website basis and not affecting global settings. See https://github.com/rugk/website-dark-mode-switcher

Thank you for your great work here keeping humanities knowledge accessible! :heart:

Link of paywalled article:

https://www.spiegel.de/ausland/joe-biden-warum-ein-verzicht-auf-die-kandidatur-nicht-so-einfach-ist-wie-viele-denken-a-80f1216a-12b8-4a92-a4ca-5b9fe301cb32

See screenshot: https://github.com/bpc-clone/bypass-paywalls-firefox-clean/assets/920356/6f322fe3-40a5-4890-b80f-3bc33a66fcba

Actions you tried yourself and if it works (clear cookies, disabe Javascript, change user-agent/referer, reader view, archive sites and/or add a custom site):

Manually switch the browser's default color scheme using the global browser settings.

Browser (main version): Firefox 126.0.2

BPC-extension version (number): 3.7.3.0

[bpc-clone]

Not sure if BPC could or 'should' do anythng about these color settings, but if you have issues with the fetched content from archive.is use the archive-link.

[PhrozenByte]

Not sure if BPC could

I'm pretty sure it could. See https://github.com/rugk/website-dark-mode-switcher. At least for Firefox there's the browser.browserSettings.overrideContentColorScheme API, see https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/browserSettings/overrideContentColorScheme

Not sure if BPC […] 'should'

Why not? There's a clear issue with the injection of contents rendering the resulting page unusable. spiegel.de surely isn't the only affected website, as I explained it systematically affects any website that supports color schemes. Forcing any website that BPC handles into the normal color scheme won't cause any harm, but fixes issues with some websites. So, in the end it really just boils down to a "Why not" since there are no apparent negative effects (besides the dev effort to add these API calls to the add-on of course, even though it seems like a rather small change) and just positive ones (i.e. fixing broken websites).

if you have issues with the fetched content from archive.is use the archive-link.

Oh, yeah, totally forgot to mention that in the issue, that's what I commonly do. Even though it's a bit cumbersome due to the captcha check on every single request...

[bpc-clone]

For now a color-fix for the site's body/paragraphs will do, but have you figured out a css-fix yet?\ I think you 'should' really do that ;-)

PS the add-on you mentioned changes dark mode for all sites in browser settings, but indeed only available for Firefox and it needs a new permission for access to browser settings (over the top for just a cosmetic issue).

[PhrozenByte]

For now a color-fix for the site's body/paragraphs will do, but have you figured out a css-fix yet?

I did some research before opening this issue: I'm afraid one can't change the outcome of the prefers-color-scheme media query using pure JavaScript and/or CSS. For a generic (i.e. not site-individual) solution one must indeed use the browser settings API… :unamused:

However, I just checked spiegel.de's sources, played around a little and it seems like that we got some luck: Instead of just using generic CSS classes that change their styling depending on the prefers-color-scheme media query, they instead add dark-mode-specific CSS classes (like dark:bg-shade-darkest and lg:dark:bg-black) that are just noop classes otherwise.

Therefore we can simply iterate the document and remove all those classes. Here's a working JavaScript snippet:

document.querySelectorAll('*').forEach((elem) => {
    elem.classList.forEach((css) => {
        if (/(^|:)dark:/.test(css)) {
            elem.classList.remove(css);
        }
    });
});

spiegel.de then apparently (naturally I can't possibly check all pages or individual elements, but for the pages I checked it works) looks exactly like in light mode.

PS the add-on you mentioned changes dark mode for all sites in browser settings

Dang, you're right... :unamused: I didn't test the add-on, the add-on's description kinda gives a false impression: For me changing "the website's color scheme" is something else than changing "the browser's color scheme"... Sorry about that.

[bpc-clone]

Css-fix added for site (only body element needs dark-classes removed).