feat(www): Implement dark mode user system preference: `prefers-color-scheme: dark`

[thomaswang]

Description

Add prefers-color-scheme: dark to /www/src/components/with-color-mode.js to support user system preference.

Good for the new OS's that have a user setting for dark mode. Instagram doesn't even have a toggle right now so we're a step ahead!

Related PR

Related to @fk awesome PR #18027

[thomaswang]

Jest fails with window.matchMedia, need to add this workaround: https://stackoverflow.com/questions/39830580/jest-test-fails-typeerror-window-matchmedia-is-not-a-function

[fk]

😍 Oh sweeeeeet, @thomaswangio! 👍 🏃 🙏

Sorry for not responding on Twitter yesterday (and still ;-)), got pretty late over here fixing some other dark mode related bugs. 😅
Unfortunately I also don't have the time to review this right now. :-(
Maybe someone can jump in?

[thomaswang]

Maybe someone can jump in?

@gillkyle can you halp? 🥰

[gillkyle]

I've got this on my list to review (maybe tomorrow?)! Sorry for the wait!

[fk]

Hey Thomas, hey Kyle!

I just realized theme-ui (iiuc) has us covered already <3:
https://theme-ui.com/color-modes#initialize-dark-mode-with-prefers-color-scheme-dark

@thomaswangio I only checked this briefly, wasn't even aware of this — until @johno's Tweet kinda rubbed my nose in it ;-)

Would you be willing to adjust your PR, and add useColorSchemeMediaQuery: true to the theme object? I'm really sorry for not realizing this up to now. I promise to approve ASAP! 🙄 😅 🙏

[thomaswang]

Hey @fk and @gillkyle, I tried adding the flag useColorSchemeMediaQuery: true to the /www/src/gatsby-plugin-theme-ui/index.js as such:

const config = {
  // this enables the color modes feature
  // and is used as the name for the top-level colors object
  initialColorMode: `light`,
  // `prefers-color-scheme: dark` media query
  useColorSchemeMediaQuery: true,
  // borders: borders,
  breakpoints: breakpointsTokens,
  colors: col,
  fonts: fontsTokens,
  fontSizes: fontSizesTokens,
  fontWeights: fweights,
  letterSpacings: ls,
  lineHeights: lineHeightsTokens,
  mediaQueries: mq,
  radii: r,
  shadows: sh,
  sizes: si,
  space: spaceTokens,
  transition: t,
  zIndices: z,
  buttons: {
    large: {
      fontSize: 4,
      px: 4,
      height: `52px`,
    },
    small: {
      fontSize: 2,
      py: 2,
      px: 3,
    },
  },
}

This doesn't work, however. Even removing initialColorMode: `light` it still doesn't work. The original solution of setting the preference in www/src/components/with-color-mode.js definitely works though!

[gillkyle]

That's a good catch @fk! And I suppose if that's having issues with the documented approach, it's probably something we ought to let @jxnblk know about so it could be caught upstream.

I'll pull your branch now and toy with it.

[thomaswang]

Ah thanks @gillkyle! I also noticed we're using the flag initialColorMode but the documentation says initialColorModeName. I'm not too familiar with Theme-UI, not sure if it's just a naming issue?

[gillkyle]

Okay! Looks like it works for me (the documented initialColorMode method that is), I've been setting the code just like you included in your snippet, then removing the value from local storage for theme-ui-color-mode. When I refresh the page after updating my OS setting it seems to work 🙂

In regards to the naming, it looks like initialColorMode was an older version of the name, and it's still supported as per this line: https://github.com/system-ui/theme-ui/blob/8ed1c5a8fd1d1c23809c3fb74b257a1517cf6611/packages/theme-ui/src/color-modes.js#L22 probably for backwards compatibility I'd imagine. Though we should probably use the documented version so people aren't confused when they look at how Gatsby does this.

I say update the name of initialColorMode and use the useColorSchemeMediaQuery key and we should be good!

[thomaswang]

@gillkyle done! thanks so much for testing that, I think the issue on my end was not clearing local storage. Should be good to go now 👍

[gillkyle]

Looks good to me, thanks @thomaswangio 🙂

[gillkyle]

Should probably wait for @fk to give a stamp of approval as well too, since he has done so much work on this 🙂

[fk]

🎉 Yay! Thanks you two! 🙏🙏🙏 (And again, apologies for noticing this way too late!) Seeing and responding via mail, please feel free to merge!

…

On Fri, Oct 11, 2019 at 3:36 AM Kyle Gill ***@***.***> wrote: Should probably wait for @fk <https://github.com/fk> to give a stamp of approval as well too, since he has done so much work on this 🙂 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#18348?email_source=notifications&email_token=AAAFKSVBOBMIJRLXPXP4I6TQN7KALA5CNFSM4I6YAH6KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEA6OVHI#issuecomment-540863133>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAFKSSEXZTJ4UYBTONC7ALQN7KALANCNFSM4I6YAH6A> .