Dark mode support

Hey, quick one.

Unless I am missing something obvious, it looks like there is no dark mode support by default?

You can pass directly to the React-Select component.

Took me a little bit to figure out, but I reversed the theme colours for it.

Original:

{
  "borderRadius": 4,
  "colors": {
    "primary": "#2684FF",
    "primary75": "#4C9AFF",
    "primary50": "#B2D4FF",
    "primary25": "#DEEBFF",
    "danger": "#DE350B",
    "dangerLight": "#FFBDAD",
    "neutral0": "hsl(0, 0%, 100%)",
    "neutral5": "hsl(0, 0%, 95%)",
    "neutral10": "hsl(0, 0%, 90%)",
    "neutral20": "hsl(0, 0%, 80%)",
    "neutral30": "hsl(0, 0%, 70%)",
    "neutral40": "hsl(0, 0%, 60%)",
    "neutral50": "hsl(0, 0%, 50%)",
    "neutral60": "hsl(0, 0%, 40%)",
    "neutral70": "hsl(0, 0%, 30%)",
    "neutral80": "hsl(0, 0%, 20%)",
    "neutral90": "hsl(0, 0%, 10%)"
  },
  "spacing": {
    "baseUnit": 4,
    "controlHeight": 38,
    "menuGutter": 8
  }
}

Added the following to tags field:

reactSelectOptions: {
  theme: (theme: any) => ({
    ...theme,
    colors: {
      ...theme.colors,
      "neutral0": "hsl(0, 0%, 10%)",
      "neutral5": "hsl(0, 0%, 15%)",
      "neutral10": "hsl(0, 0%, 20%)",
      "neutral20": "hsl(0, 0%, 30%)",
      "neutral30": "hsl(0, 0%, 40%)",
      "neutral40": "hsl(0, 0%, 50%)",
      "neutral50": "hsl(0, 0%, 60%)",
      "neutral60": "hsl(0, 0%, 70%)",
      "neutral70": "hsl(0, 0%, 80%)",
      "neutral80": "hsl(0, 0%, 90%)",
      "neutral90": "hsl(0, 0%, 100%)"
    },
  })
},

Entire field:

defineField({
  name: 'tags',
  title: 'Tags',
  type: 'tags',
  options: {
    reactSelectOptions: {
      theme: (theme: any) => ({
        ...theme,
        colors: {
          ...theme.colors,
          "neutral0": "hsl(0, 0%, 10%)",
          "neutral5": "hsl(0, 0%, 15%)",
          "neutral10": "hsl(0, 0%, 20%)",
          "neutral20": "hsl(0, 0%, 30%)",
          "neutral30": "hsl(0, 0%, 40%)",
          "neutral40": "hsl(0, 0%, 50%)",
          "neutral50": "hsl(0, 0%, 60%)",
          "neutral60": "hsl(0, 0%, 70%)",
          "neutral70": "hsl(0, 0%, 80%)",
          "neutral80": "hsl(0, 0%, 90%)",
          "neutral90": "hsl(0, 0%, 100%)"
        },
      })
    },
    includeFromRelated: 'tags'
  }
}),

@liamb13 Amazing, thank you!

Sorry for late reply, guess I missed the notification or the notification missed me :)

What was the fix here? The latest version does not work in dark mode, and the above suggestion does not work in either...

Default:

Above fix: