useColorMode no longer works since latest Theme UI's NPM packages

[gusbemacbe]

Describe the bug
My whole code is totally correct. There are two errors related to useColorMode:

• TypeError: setMode is not a function;
• InvalidCharacterError: String contains an invalid character.

To Reproduce
Steps to reproduce the behavior:

1. Take from https://github.com/system-ui/theme-ui/blob/master/packages/docs/src/pages/hooks.mdx
2. Use Gatsby to clean and to develop
3. These two errors appear.

Screenshots

Additional context

I will send you my website proejct package and the system info.

• My package:

i81n-smakosh.zip

• System, NPM and Gatsby info:

  System:
    OS: Linux 5.7 EndeavourOS
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.3.0 - ~/.nvm/versions/node/v14.3.0/bin/node
    Yarn: 1.22.4 - /usr/bin/yarn
    npm: 6.14.7 - ~/.nvm/versions/node/v14.3.0/bin/npm
  Languages:
    Python: 3.8.5 - /usr/bin/python
  Browsers:
    Firefox: 79.0
  npmPackages:
    gatsby: ^2.24.42 => 2.24.47 
    gatsby-image: ^2.4.14 => 2.4.16 
    gatsby-link: ^2.4.13 => 2.4.13 
    gatsby-plugin-canonical-urls: ^2.1.2 => 2.3.10 
    gatsby-plugin-catch-links: ^2.1.2 => 2.3.11 
    gatsby-plugin-google-analytics: ^2.1.4 => 2.3.13 
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1 
    gatsby-plugin-i18n: ^1.0.1 => 1.0.1 
    gatsby-plugin-manifest: ^2.4.22 => 2.4.23 
    gatsby-plugin-mdx: ^1.2.34 => 1.2.34 
    gatsby-plugin-netlify: ^2.1.3 => 2.3.13 
    gatsby-plugin-no-javascript: ^2.0.5 => 2.0.5 
    gatsby-plugin-nprogress: ^2.0.5 => 2.3.10 
    gatsby-plugin-offline: ^3.2.22 => 3.2.23 
    gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10 
    gatsby-plugin-robots-txt: ^1.5.1 => 1.5.1 
    gatsby-plugin-sass: ^2.3.12 => 2.3.12 
    gatsby-plugin-sharp: ^2.6.26 => 2.6.27 
    gatsby-plugin-styled-components: ^3.0.0 => 3.3.10 
    gatsby-plugin-styled-jsx: ^3.3.11 => 3.3.11 
    gatsby-plugin-theme-ui: ^0.3.0 => 0.3.0 
    gatsby-remark-autolink-headers: ^2.3.11 => 2.3.11 
    gatsby-remark-copy-linked-files: ^2.3.12 => 2.3.12 
    gatsby-remark-images: ^3.3.25 => 3.3.25 
    gatsby-remark-prismjs: ^3.5.10 => 3.5.10 
    gatsby-remark-responsive-iframe: ^2.4.12 => 2.4.12 
    gatsby-remark-smartypants: ^2.3.10 => 2.3.10 
    gatsby-source-filesystem: ^2.3.24 => 2.3.24 
    gatsby-transformer-json: ^2.4.11 => 2.4.11 
    gatsby-transformer-remark: ^2.8.28 => 2.8.28 
    gatsby-transformer-sharp: ^2.5.12 => 2.5.13 
  npmGlobalPackages:
    gatsby-cli: 2.12.82

cc: @hasparus, @joe-bell, @jordanoverbye, @jxnblk and @lachlanjc