/
Write
Start a team blog
NEW ✨
Start a team blog, invite your team, and start publishing.

"useColorMode" imported from Theme UI plugin in React-based GatsbyJS doesn't work due to “InvalidCharacterError: String contains an invalid character”

Gustavo Benedito Costa's photo
Gustavo Benedito Costa
·Aug 16, 2020·

4 min read

After compiling, I received two errors:

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

Check my whole code:

/** @jsx jsx */

import { jsx, Styled, useColorMode } from 'theme-ui'
import { Context } from '../../common'
import SelectLanguage from './SelectLanguage'
import { Navegador, Input, Label, Submenu, StyledHeader } from './styles'

function Header() 
{
  const themes = ['deep', 'funk', 'future', 'swiss'];
  const modes = ['default', 'dark'];
  const [mode, setMode, setTheme, theme] = useColorMode()

  return (

    <Styled.root>
      <Context.Consumer>
        {({ toggleLanguage, lang }) => (
          <StyledHeader>
            <Navegador id="menu">
              <li>
                  <SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />
              </li>

              <li>
                <Input id="modes" type="checkbox" name="menu"/>
                <Label for="modes">Modes</Label>
                <Submenu className="submenu">
                  <li onClick={e => setMode("default")}> Light </li>
                  <li onClick={e => setMode("dark")}> Dark </li>
                </Submenu>
              </li>

              <li>
                <Input id="themes" type="checkbox" name="menu"/>
                <Label for="themes">Themes</Label>
                <Submenu className="submenu">
                  <li onClick={e => setTheme("deep")}> Deep </li>
                  <li onClick={e => setTheme("funk")}> Funk </li>
                  <li onClick={e => setTheme("future")}> Futuristic </li>
                  <li onClick={e => setTheme("swiss")}> Swiss </li>
                </Submenu>
              </li>

            </Navegador>
          </StyledHeader>
        )}
      </Context.Consumer>
    </Styled.root>
  )
}

export default Header