Theme-ui: initialColorMode in gatsby-plugin-theme-ui not working

[juanhenriquez]

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

[juanhenriquez]

I've been reading the source code of theme-ui and seems that it looks for the prefers-color-scheme media query, and given that I'm using dark mode on my Macbook, the site is picking dark mode too ignoring the value provided in the initialColorMode property.

I think it would be great if you could ignore what values is prefers-color-scheme set to, and give us the possibility of deciding what initial color should the site use.

[jxnblk]

I think it would be great if you could ignore what values is prefers-color-scheme set to, and give us the possibility of deciding what initial color should the site use.

The plan is to make the media query behavior optional, which we'll probably prioritize sooner with dark mode coming to iOS and Android now

[kevinwolfcr]

On my end it is not working at all, I have this color configuration:

export default {
  initialColorMode: 'light',
  colors: {
    primary: '#00ccd7',
    background: '#fff',
    text: '#4f4f4f',
    accent: '#333',
    muted: '#a8a8a8',
    modes: {
      dark: {
        background: '#000',
        text: '#fff',
      },
    },
  },
}

And the MacOS settings defined to use Dark Mode, but still can't get it to work automatically.

[jxnblk]

@iamkevinwolf as of the latest version, if you want to initialize color mode based on the prefers-color-scheme: dark media query, you'll need to add the useColorSchemeMediaQuery option to your theme, see https://theme-ui.com/color-modes#initialize-dark-mode-with-prefers-color-scheme-dark

[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.

[jxnblk]

Closing this since the behavior will be changing slightly in v0.3 -- see #535