[genezeta]

In case the author reads this:

I would suggest editing your Venn diagram a bit so that it makes more sense. Something like this

  <circle class="property stylable" cx="190" cy="145" r="70"></circle>
  <text class="stylable" x="150" y="140" fill="black">stylable</text>

  <circle class="property cacheable" cx="310" cy="145" r="70"></circle>
  <text class="cacheable" x="300" y="140" fill="black">cacheable</text>

  <circle class="property dimensional" cx="250" cy="260" r="70"></circle>
  <text class="dimensional" x="210" y="280" fill="black">dimensional</text>

This way, the region where your three circles overlap actually disappears, signifying that you can't indeed get all three at the same time.

[szundi]

You must have some pretty important work to do with this level of procrastination ongoing.

[shermantanktop]

Without side projects to avoid deadlines on now-forgotten odious tasks, we’d all be living in grass huts.

[mrled]

This is a great point. I'm going to test some of the `<use>` suggestions I got in this thread, but if those don't pan out I'll definitely do this.

[LoganDark]

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!)

[madeofpalk]

> 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!

[LightHugger]

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.

[madeofpalk]

Weird. Neither my Firefox or Chrome show this issue.

[Modified3019]

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.

[LoganDark]

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.

[mort96]

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?

[mrled]

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?

[LoganDark]

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.

[Grom_PE]

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.

[mrled]

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

[everybodyknows]

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

[mrled]

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.

[LoganDark]

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