Start a team blog
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 (

        {({ toggleLanguage, lang }) => (
            <Navegador id="menu">
                  <SelectLanguage lang={lang} toggleLanguage={toggleLanguage} />

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

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


export default Header