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

Question

• I am using @smakosh's GatsbyJS theme and Theme UI plugin;
• I learned to use Hooks' useColorMode from Hooks - useThemeUI and useColorMode;
• My whole code is totally correct;
• I have already cleared the caches of GatsbyJS, npm and browser, but the same errors still persist;
• You can get my small package to analyse: https://drive.google.com/file/d/1SsgPXAq9zMv8Yp4XDjy3MJLeWun-J3UQ/view?usp=sharing.

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

Answer 1

Looking at the doumentation link you provided, the useThemeUI hook return value seems to contain the theme, components, colorMode and setColorMode properties. You could use that hook instead of the useColorMode hook. And change your mode and setMode variables to colorMode and setColorMode respectively. This could solve the "setMode is not a function" problem while still giving you access to the theme property.

Same setMode problem could be the root cause of this invalidCharacterError you are getting. So resolving that problem could also cause this error to go away. Otherwise look into the character set you should be using. The most common one these days is utf8. If your application contains diacritics, umlauts, hieroglyphics e.t.c., you might have to use the appropriate character set for that use-case.

Also do verify that setTheme is a valid property of the useThemeUI hook's return value. Much like the setMode, it was not mentioned in the documentation you provided. It is likely not to exist.