Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

code sections are invisible in dark mode #85

Open
vigilancetech-com opened this issue Jun 8, 2023 · 8 comments
Open

code sections are invisible in dark mode #85

vigilancetech-com opened this issue Jun 8, 2023 · 8 comments
Labels
bug Something isn't working layout Related to page rendering or interaction in some browser

Comments

@vigilancetech-com
Copy link

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
Copy link
Owner

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

@simonmichael simonmichael added the bug Something isn't working label Jun 8, 2023
@vigilancetech-com
Copy link
Author

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
Copy link
Author

vigilancetech-com commented Jun 8, 2023

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

@vigilancetech-com
Copy link
Author

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
Copy link
Owner

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.

@simonmichael simonmichael added the layout Related to page rendering or interaction in some browser label Jun 9, 2023
@vigilancetech-com
Copy link
Author

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
Copy link
Owner

simonmichael commented Jun 9, 2023

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working layout Related to page rendering or interaction in some browser
Projects
None yet
Development

No branches or pull requests

2 participants