Firefox-ios: FXIOS-177 ⁃ [iOS 13] Night mode makes black background white, making dark theme websites light theme

[Scripter17]

Version: 20.1 (16561)
Phone: iPhone SE (13.2.2)

Description: When dark mode is enabled while browsing a website with a black background by default, the browser makes the background white, and inverts all other text colors as well. This effectively converts it to a light theme. This does not occur in Safari, or when FireFox is set to use light mode. It also isn't affected by whether the iPhone itself is set to dark or light mode.

I discovered this bug when making a custom new tab page for my phone, but it appears to affect all dark mode websites.
Page with dark mode enabled

Page with dark mode disabled

Ideally, FireFox would automatically detect if a website uses a dark theme by default. Other, arguably better, solutions would be to include a HTML/CSS solution to this, as well as having a manual per-website toggle. I think the best solution would be all three of these.

The only workaround I've found is manually changing all styles to light theme so that FireFox re-fixes it, which would work because this project is only me and only on FireFox, but this is nowhere near a good solution for sites meant for more than just the creator.

Side note: This is the first issue I've submitted on GitHub, so uh... Yeah. If I'm doing this wrong, let me know.

┆Issue is synchronized with this Jira Task

[Scripter17]

Quick and dirty fix: Add filter: invert(70%) hue-rotate(180deg) brightness(0.8) saturate(2); to the CSS of whatever's affected.

It ain't perfect, but it looks good enough (at least from my limited testing)

EDIT: Found an actual solution!
In firefox-ios-master\Client\Frontend\UserContent\UserScripts\MainFrame\AtDocumentStart\NightModeHelper.js there are the following lines

   14  
   15: const NIGHT_MODE_INVERT_FILTER_CSS = "brightness(80%) invert(100%) hue-rotate(180deg)";
   16  
   17  const NIGHT_MODE_STYLESHEET =
   18  `html {
   19   -webkit-filter: hue-rotate(180deg) invert(100%) !important;
   20  }
   21  iframe,img,video {
   22   -webkit-filter: ${NIGHT_MODE_INVERT_FILTER_CSS} !important;
   23  }`;
   24  

Therefore, the following CSS should fix everything but background images!

html{filter:brightness(1.25) invert(100%) hue-rotate(180deg);}
iframe,img,video{filter:invert(100%) hue-rotate(180deg);}

Unfortunately @media(prefers-color-scheme:dark) seems to detect the phone's theme setting instead of the browser's, but it's a massive leap

EDIT 2: The actual actual solution is to use the following JavaScript; if(window.__firefox__){window.__firefox__.NightMode.setEnabled(false);}

[NIXOYE]

Is there any progress being made on this? Would be great if Firefox detected websites that are already Dark especially since Dark Mode detection on websites is becoming more widely used. Would be great especially since Firefox will soon be able to become a default browser on iOS

[RailRanger]

Same issue here

[isaacjara17]

Same issue here. Happening on iOS 14 as well. Firefox is currently my default browser and I’d love to use this feature if it worked, since no other iOS browser has it

[james-culp]

Just echoing the other commenters that it would be great to improve this feature, since it's such a nice differentiator from other iOS browsers :)

[elsiehupp]

@Scripter17 is your solution something that would be able to be implemented by Firefox, rather than by individual websites? In general, websites with their own dark themes do look better than a browser- or extension-implemented CSS hack, but, again, Firefox does not recognize these, and it seems unreasonable to expect every website to implement a browser-specific hack.

As an example, Ars Technica has its own night theme, which Firefox converts back into a day theme.

If you have the necessary expertise, would you be willing to try modifying firefox-ios-master\Client\Frontend\UserContent\UserScripts\MainFrame\AtDocumentStart\NightModeHelper.js and submitting a pull request, since this issue has gotten little to no attention from the Firefox maintainers? (It presumably doesn't help that @dnarcese tagged this a "nice to have" rather than as a bug... there is a duplicate issue that is tagged as a bug, though: https://github.com/mozilla-mobile/firefox-ios/issues/7256)

As an extremely basic heuristic, it could be reasonable for Firefox to disable dark mode on pages where body-background is less than 50% brightness and/or body-text is greater than 50% brightness. I'm not a web developer, so implementing this is a bit beyond my expertise, but it seems like it should be relatively straightforward? Thanks!

[Scripter17]

I can try, but I can't guarantee any actual result
I can't compile IOS apps so I'm just using the JavaScript in that file to make a solution on my computer

[Scripter17]

So I quickly hacked together a solution

1. Add the following function to the script:

function isWebsiteCSSNightMode(){
  // Fixes FXIOS177 (enabling night mode makes websites with night mode CSS into day mode)
  var splitRGB=/rgba?\((\d+), *(\d+), *(\d+)(?:, *(\d+\.?\d*))?\)/g;
  var bodyBG=window.getComputedStyle(document.body).backgroundColor;
  var bodyBGSplit=splitRGB.exec(bodyBG);
  bodyBGSplit.shift();
  if (bodyBGSplit.length==4){
    bodyBGSplit.pop();
  }
  // https://css-tricks.com/using-javascript-to-adjust-saturation-and-brightness-of-rgb-colors/#how-to-find-the-lightness-of-an-rgb-color
  var bodyBGBrightness=(Math.max(...bodyBGSplit)+Math.min(...bodyBGSplit))/2/255;
  return bodyBGBrightness<=0.5;
}

1. Put the following at the top of the __firefox__.NightMode.setEnabled definiton:

    if (isWebsiteCSSNightMode() && enabled){
      return;
    }

Granted, it doesn't work if the body element doesn't explicitly have a style, but it's a start