Adds support for prefers-color-scheme

[carolinebridge]

(Updated with feedback) Resolves https://github.com/GMOD/jbrowse-components/issues/4173

Adds light | dark | system selector to the preferences panel that determines how themes are rendered.

Themes defined in the config now support either "light" or "dark" options, like so:

"configuration": {
    "theme": {
      "light": {
        "palette": {
          "tertiary": {
            "main": "#9da9b6"
          },
          "secondary": {
            "main": "#29405F"
          }
        }
      },
      "dark": {
        "palette": {
          "mode": "dark",
          "tertiary": {
            "main": "#9da9b6"
          },
          "secondary": {
            "main": "#29405F"
          }
        }
      }
    },
    "extraThemes": {
      "legacy": {
        "name": "Legacy",
        "palette": {
          "primary": {
            "main": "#444"
          },
          "secondary": {
            "main": "#335"
          },
          "tertiary": {
            "main": "#250"
          },
          "quaternary": {
            "main": "#535"
          },
          "mode": "dark"
        }
      },
      "new": {
        "name": "New",
        "light": {
          "palette": {
            "primary": {
              "main": "#F2F3AE"
            },
            "secondary": {
              "main": "#EDD382"
            },
            "tertiary": {
              "main": "#FC9E4F"
            },
            "quaternary": {
              "main": "#F4442E"
            }
          }
        },
        "dark": {
          "palette": {
            "mode": "dark",
            "primary": {
              "main": "#1B065E"
            },
            "secondary": {
              "main": "#FF47DA"
            },
            "tertiary": {
              "main": "#25FF87AB0"
            },
            "quaternary": {
              "main": "#FCC8C2"
            }
          }
        }
      }
    }
  },

The theme, or its alternate, will be used depending on what the user has selected for "mode". The "system" option for mode uses prefers-color-scheme.

If the user selects a theme mode that is not available through the theme's definition (e.g. there is no dark mode defined), the system will generate an "acceptable" theme using the makeContrasting function.

Here's an example with 'stock':

Our theme definition:

makeContrasting: