Add dark-mode support and improve readability

[Alhadis]

This commit adds dark-mode support to no-color.org and makes several tweaks to the existing styling to improve readability:

Before and after refactoring

Dark mode previews

Desktop

Mobile

[SethFalco]

I think it'd be better to define CSS variables in :root and override those variables in @media (prefers-color-scheme: dark)?

I've seen some projects maintain themes like without them before, but it tends to lead to inconsistent use of colors, and broken themes on updates. ^-^'

Maintaining color pallets is a lot easier than maintaining individual overrides.

For example:

:root {
  --pri-bg-color: #fff;
  --link-color: #0969da;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pri-bg-color: #161b22;
    --link-color: #2f81f7;
  }
}

body {
  background-color: var(--pri-bg-color);
}

a:link, a:visited {
  color: var(--link-color);
}

[Alhadis]

Using variables for values that're only referenced once is wasteful, IMHO. Especially for such a decidedly simple design.

It's your call, though.

[DeflateAwning]

Would be awesome to merge this! Is there anything missing?

[jcs]

I don't agree that these changes improve readability. Dark mode can be supported with a meta tag that doesn't require overriding the user's colors, which I can do in a separate commit.

[Alhadis]

Dark mode can be supported with a meta tag that doesn't require overriding the user's colours

🤦 I didn't even know you could do that…

(Christ, I really have fallen behind with staying atop recent developments to the Web platform… 😥)