Gatsby-theme-novela: useColorSchemeMediaQuery has no effect

[jcayzac]

Prerequisites

• [x] Have you searched the issue tracker for similar issues (either past or present)?
• [x] Can you reproduce the issue consistently?
• [x] Are you reporting to the correct repository?
• [x] Is this something you can debug and fix? Send a pull request! Bug fixes and documentation fixes are welcome.

Description

Version of Novela you are using

0.13.3

Number of posts you have and which data source

• [x] Local (1)
• [ ] Contentful (0)

Describe the bug

Using useColorSchemeMediaQuery has no effect:

// src/gatsby-plugin-theme-ui/index.js
import novelaTheme from '@narative/gatsby-theme-novela/src/gatsby-plugin-theme-ui'

export default {
  ...novelaTheme,
  useColorSchemeMediaQuery: true,
}

I'm using macOS Catalina and my system setting is set to dark. Yet when I open my blog in an incognito tab it shows in the default light theme, both in Safari and in Chrome 80.

To Reproduce

Steps to reproduce the behavior:

1. Set useColorSchemeMediaQuery: true on the theme.
2. Open in an incognito tab, or after clearing the site data.

Expected behavior

The system setting is followed.

Browser

Catalina Safari, Chrome 80 for macOS

[jcayzac]

It seems this has all changed a bit in theme-ui 0.3. Unfortunately the theme is not compatible with theme-ui 0.3 breaking changes.

[brotzky]

@jcayzac would love a PR fix for this one.