Hacker News Reader

Comment by LoganDark | Hacker News Reader

There's a diagram on this page?

Holy shit there is. When my dark theme is enabled, the diagram is black on black. Amazing. (all that's visible is the emoji!)

View on HN

> When my dark theme is enabled

Like it injects/modifies the styles of pages willy-nilly? The beauty of browsers is that you're fully able to do that, but seems like a great way to just have a broken browsing experience all the time...

The page is already pretty dark!

In my case, i have the standard browser dark preference active and the website obliges and shows a broken dark theme. If i instead use the style-injecty version such as dark reader, it actually fixes the website's broken dark theme and i can see the graph. So in this case, it is completely the website's fault.

Weird. Neither my Firefox or Chrome show this issue.

Darkreader does a really good job of preserving visibility in most cases, and is available on both mobile and desktop browsers. Definitely reconnect checking it out.

This is the site's native theme upon seeing that my OS is set to dark (their CSS checks `prefers-color-scheme`). I already use and enjoy Dark Reader.

For me (Firefox on macOS, also tested with Chrome on macoS), the site's dark theme has a purple background for the diagram which makes it readable even though the background is black.

However, the SVG seems to get all its color from CSS; the color is not part of the SVG itself. Maybe that's not working in your browser?

Huh. I'm the OP, and I do have a dark mode that respects `prefers-color-scheme: dark` -- or at least, it works for me (tm). Would you mind sharing details about your dark mode theme? Is it a third party extension or maybe a browser I haven't tested?

I think the main cause of black rectangle is the lack of support for nested CSS. At least that's what I'm seeing in my browser.

Ohhh interesting. To anyone hitting this, I'm curious what specific browser you're using - I thought it was available ~everywhere now? https://caniuse.com/css-nesting

Seeing only inverted smilie over black background on my iPad, dark mode or light both.

I can't replicate on mine. If this is due to nested styles, I think you are behind on your software updates :). But also, maybe I need to hold off a bit longer before moving to nested styles.

According to a forum post [1], e.g. iPad Mini 4 was discontinued March 2019 and is stuck on iOS 15, which doesn't support nested styles. Perhaps the issue is that people want to continue using old tablet devices that are no longer getting OS updates?

[1] https://education.apple.com/resource/250012027

It's only been available everywhere since like 2023. My browser happens to be from 2022.

I'm on Windows and in the system-level settings app, there's a toggle for dark mode. When I turn that on, then `prefers-color-scheme: dark` starts matching. There are zero third-party extensions or styles here, and my browser is Chromium 118.

Reply on news.ycombinator.com