Improve CSS theming

Now we support automatic dark theme detection, we need a way to override it.

Probable way to do it:

• Add blank theme option to the picker, this would be the automatic one
• Unset anyone who has the "default" theme checked
• Rename default to light
• Split light colours from main CSS into light.css and @media (prefers-color-scheme: light) {

I think I will also need to split the prefers-color-scheme sections into their own, something like auto.css. So then loading would be like:

• style.css (basic layout, with light colouring as default to ensure everyone actually has colours)
• auto.css (picks colouring based on prefers-color-scheme (or light if no-preference))
• users manually chosen theme to override it (light.css or dark.css)

It will add a few extra kbs if they manually pick a theme but it seems the sanest way to do it, thanks to SCSS imports I don't need any CSS duplication either. This also then doesn't rely on JavaScript to do any switching, which every other way I looked up did.

Also, for the dark mode css, think about adding:

  img {
    opacity: 0.90;
    transition: opacity 0.5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }

Stop images being blinding? Mouse over for full brightness.