search

mon / 0x40-web

Pretty images and colours
http://0x40.mon.im/
MIT License
388 stars 38 forks source link

Prevent an issue with "dark mode" browser extensions #71

Closed Zenrac closed 2 years ago

Zenrac commented 2 years ago

Hello,

I'm using a very popular extension called DarkReader and I noticed an issue on all 0x40 websites : It seems that images are not displayed correctly (in fact, the entire canvas isn't displayed at all)

Issue description When using DarkReader (or other similar "dark mode" extensions), a common behavior is that it tries to put a black background-color on all pages. Because of that, and because the canvas is supposed to be the background of the page, the added back color prevents images to be displayed.

Fix idea Set background-color to transparent in hues-root with an !important to make sure it's never overwritten.

Disclaimer I didn't do lot of tests, but it should be working, right?

mon commented 2 years ago

When the Render Backdrop option is set to Transparent, the Dark Mode display is quite a bit darker than I intended. It's not quite the same as Black, but it's definitely darker.

I don't use Dark Reader, so I'll take your input here - would you want to maintain the intended behaviour, or retain the darkness?

Zenrac commented 2 years ago

I wasn't aware of this bgColour option ; I'm using an older version.

In my opinion the sole purpose of those extensions is to add a dark mode to websites who can't provide one, which is not the case here. I do think that it should be displaying what's intended to be displayed.

In the case of DarkReader, it dumbly add a background-color to the body. image

That's why I thought that in order to handle it we could just add a background-color: transparent (which should be the default behavior when no background color is set) so that it fixes the issue without altering anything ?

Maybe it souldn't have !important so that the Renderer option can overwrites it (if I understood the purpose of this option correctly) ?

mon commented 2 years ago

I wasn't aware of this bgColour option ; I'm using an older version

That particular feature hasn't made it into an official release yet, I've been meaning to add a few more features (mostly around better experience on mobile) and bundle a new 5.1.

I do think that it should be displaying what's intended to be displayed

Works for me!

The background-color override is fine, but there is some odd behaviour with how the render stack works if the canvas is transparent (that new option) and the <body> is not white. I still don't completely understand how a white body and transparent canvas even ends up with a different result to just a white background, but it is.

I'll probably do some poking around to see if I can fix the transparency issue, or I might just decide it's too hard. For now, easy enough to just merge this.