simonmichael / hledger_site

The repo for hledger.org, the hledger project's website.
GNU General Public License v3.0
63 stars 37 forks source link

code sections are invisible in dark mode #85

Open vigilancetech-com opened 1 year ago

vigilancetech-com commented 1 year ago

So far I've looked at this website both with firefox and with chromium and if I put the browser in dark mode (which I do to relieve eye strain) all the 'code' sections are invisible.

For example:

image

vs

image

simonmichael commented 1 year ago

Thanks for the report! That's a browser feature ? Does changing the site's theme (paintbrush icon at top left) affect it ?

vigilancetech-com commented 1 year ago

On Firefox I'm using the Dark Reader extension.

On chromium I'm using the extension: "Dark Mode - dark reader for chrome"

I don't see a paintbrush on the top left of either browser, but I don't think the theme is effected. Re-theming only appears to effect the frame/menus/etc... not the page contents.

vigilancetech-com commented 1 year ago

those "code" inserts must be images, cuz when I do ctrl-a to select all text, they don't show up either.

vigilancetech-com commented 1 year ago

BTW, I just want to add, that I do a ton of browsing with these extensions and it's very rare that something like this happens.

simonmichael commented 1 year ago

Here's the paintbrush, perhaps invisible in your dark mode:

Screenshot 2023-06-08 at 15 02 42

Safari's Reader mode with a black background hides the paintbrush and most other chrome (expected), but it still shows code blocks properly:

Screenshot 2023-06-08 at 15 08 28

The code blocks are normal HTML as generated by mdbook, not images. I can't really say what your extensions are doing... perhaps they have detected the blocks as ads or something ? Maybe you can get clues in the settings or the browser's web inspector, or perhaps someone else can tell us more.

vigilancetech-com commented 1 year ago

ok, this is kind of interesting:

on FF, if I turn on the dark reader those code displays disappear, but if I attempt to highlight some text within them, even tho they're invisible, I can copy/paste them into something else (emacs scratch buffer in this case). So you're right, they are there, just the browser extensions just set everything to black, letters, background, highlight background and highlight letters.

It's just so weird cuz I think this is the FIRST time I've observed this and I've been very actively using these extensions for YEARS.

Yeah, with the paintbrush menu I can turn the background dark, but then I have to turn off or somehow white list hledger.org/* pages from the extensions, so that will take a bit of research.

Its so strange that these pages are doing something that almost nobody else does.

simonmichael commented 1 year ago

Here's a shot of Dark Mode and Brave's web inspector, showing the style that is responsible. If you uncheck the red-outlined style, the code block text reappears.

Screenshot 2023-06-08 at 16 16 53
simonmichael commented 1 year ago

Possibly finding a better solution for #82 will resolve this too.