code sections are invisible in dark mode

[vigilancetech-com]

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:

vs

[simonmichael]

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

[vigilancetech-com]

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]

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

[vigilancetech-com]

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]

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

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

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]

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]

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.

[simonmichael]

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

[simonmichael]

I don't have any new solution for this (unreadable code blocks when using Dark Mode extensions). Just checking in to see if it's still happening, and to request links to the relevant extensions for reference.

[acinader]

Fixed by 089d09f. The pre { z-index: -1 } in your screenshot (added in f00cf24 for #1998) painted code blocks behind the body, which dark-mode extensions fill with a solid color. That rule is gone; with a Dark Reader-style stylesheet injected, code blocks on hledger.org are readable now.

[simonmichael]

@vigilancetech-com is this resolved for you ?