Incompatibility with Night Eye

[edemaine]

I use the Night Eye Chrome extension to view the web in dark mode. (This helps me with a light sensitivity medical condition.) It works well with most websites, generally converting light colors to dark and vice versa, but Solid's website has a few issues:

First, the popup menus don't render with a background, making them difficult to read:

Second, the Hackathon page text is illegible, rendering with dark grey text on almost identical dark blue background.

The latter seems to be caused by the text-gray-700 class. Ah, it sets color: rgb(55 65 81 / var(--tw-text-opacity)) which Night Eye seems to be ignoring, I guess because it doesn't understand the / notation for alpha. If --tw-text-opacity isn't ever changed, perhaps there's a Tailwind option to simplify this? Alternatively, for this specific page, things look good if you omit the rule and leave it black (which gets turned into white with Night Eye).

Curiously, it's the same notation that's causing the first issue, but this time it's not ignored. Night Eye converts bg-gray-200 class's background-color: rgb(229 231 235 / var(--tw-bg-opacity)) into background-color: rgb(229 231 235 / var(--tw-bg-opacity-night-eye)); and then fails to define the variable --tw-bg-opacity-night-eye. Weird.

I hesitated to raise this issue, because at least some of this could be attributed to Night Eye. I'll send this report to them as well. But @davedbase suggested I make an issue, so here it is!

A dark mode as suggested in #129 would effectively fix this for me, as then I could turn off Night Eye for this site. Maybe I should work on that...

[davedbase]

This is mostly resolved on dev so I'll close it out. Thanks for your PR :-)