Follow browser's light/dark theme style

[stanio]

Should sufficiently solve #63:

• https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
• https://w3c.github.io/csswg-drafts/css-color-adjust/#color-scheme-prop

The ‘color-scheme’ property allows an element to indicate which color schemes it is designed to be rendered with. These values are negotiated with the user’s preferences, resulting in a used color scheme that affects things such as the default colors of form controls and scrollbars as well as the used values of the CSS system colors.

[stanio]

The style sheet already uses CSS system colors. The color-scheme: light dark declaration just adjusts their actual values to the browser's theme setting.

[stanio]

Here's a demo:

Dark	Light

[stanio]

@Rob--W, could you spin a new version using the suggested change? (if you're o.k. with the change)

[jtotht]

The style sheet already uses CSS system colors.

Mostly. As it can be seen on the screenshot, there are two non-system colors, which are hard to read in dark mode:

• .options-link-wrapper a { color: blue; } – for this, not setting a color and deferring it to the browser seems to be enough (links are blue by default). If you want to stay extra safe (avoid visited link color, active link color etc. coming into play), you can explicitly set color: LinkText.
• #url-protocol.https { color: green; } – this one is even less readable, and I haven’t found any green system colors, so I fear you have to specify a dark mode-friendly color manually.

By the way, thanks for working on this! I don’t have the right to merge and release this (I’m not even a contributor until #78 is accepted), but I’d also love to see this released.

[stanio]

Do you find another system-color more suitable, f.e. AccentColor or Highlight, or should it be just a brighter green like lime?

[jtotht]

I think it should remain a shade of green: https is highlighted because it’s good (secure), and good things are conventionally green, not blue (and most definitely not red like ActiveText). lime looks good.

[jtotht]

While testing if the settings link works as expected (it does), I realized that the settings page is also light-only. I think this PR is okay even if the settings page remains light-only (it’s rarely used anyway), but if you feel like it, you may give that one as well a go.

[jtotht]

I think it should remain a shade of green: https is highlighted because it’s good (secure), and good things are conventionally green, not blue (and most definitely not red like ActiveText). lime looks good.

[Rob--W]

Could you put this under :root for consistency? Or even meta color-scheme.

[stanio]

I hadn't been aware of the <meta name="color-scheme">, previously. Do you prefer it declared with a <meta> element? I'll replace it accordingly.

[jtotht]

Thanks for adding <meta name="color-scheme" content="light dark"> here as well. However, there are still a few hardcoded colors (three border colors and a shadow color), which, although aren’t unreadable (there’s nothing to read there), don’t look great.

[stanio]

However, there are still a few hardcoded colors (three border colors and a shadow color), which... don’t look great.

Few images for comparison:

I don't think anything but a dark (black) shadow makes sense. If both of you and @Rob--W think a glow vs. shadow with the dark scheme is better, I'll update the change appropriately.