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.