initialColorMode in gatsby-plugin-theme-ui not working

When using the gatsby-plugin-theme-ui plugin with Gatsby, it is not using the initialColorMode in the /src/gatsby-plugin-theme-ui/index.js file, and instead, it is using the dark mode directly.

Take this theme as an example:

export default {
  initialColorMode: 'light',
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#6e67ff',
    secondary: '#212121',
    modes: {
      dark: {
        text: '#fff',
        background: '#212121',
        secondary: '#fff',
      },
    },
  },
};

It should use the light mode as the default mode, but instead, it is using the dark mode with no reason.

Here is a reproduction of the issue: https://codesandbox.io/embed/gatsby-starter-default-qyqkp

[kevinwolfcr]

Thanks @jxnblk, adding that to my theme solved the issue. Although I have a recommendation: the theme should always be in sync with the system preferences, this is what just happened to me:

1. After adding the useColorSchemeMediaQuery prop to my theme, I’d cleared my localStorage and refreshed, it matched my dark system preferences.
2. I’d changed my system preferences to light, went back to the site and refreshed, but the site UI was still on dark theme.

Is this an expected behaviour? IMHO it should change according to the system preferences, and only save into localStorage if the user explicitly set so.

[mcs07]

I agree with the comment by @iamkevinwolf. My preferred behaviour would be localStorage would never be set until and unless setColorMode was explicitly called. And also, if useColorSchemeMediaQuery: true then ideally the color mode would dynamically update as the system preference changes from dark to light, without a refresh. It would also be nice to be able to reset the color mode back to ‘auto’ after choosing light/dark, e.g. by setColorMode(null) clearing the local storage.