How to use the @xstyled/styled-components.useColorMode function in @xstyled/styled-components

export function AppNavbar() {
  const user = useUser()
  const [colorMode] = useColorMode()

  return (
    
      
        
          
        
      
      
        {user ? (
          
        ) : (

function Projects({ data, projects }) {
  const [colorMode] = useColorMode()
  const regexp = new RegExp(`^projects/logo-(.*)-${colorMode}.png$`)
  const logos = data.allFile.edges.reduce((obj, edge) => {
    const matches = edge.node.relativePath.match(regexp)
    if (!matches) return obj
    obj[matches[1]] = edge.node.childImageSharp.fluid
    return obj
  }, {})
  const projectElements = [

export function AppFooter() {
  const [colorMode] = useColorMode()
  return (
    <footer>
      
        
          <a rel="noopener noreferrer" href="https://www.smooth-code.com">
            
          </a>
        
        
          
            Terms
          </footer>

export function DarkModeSwitcher() {
  const [mode, setMode] = useColorMode()
  const [ready, setReady] = React.useState(false)
  React.useEffect(() => {
    setTimeout(() => {
      setReady(true)
    }, 10)
  }, [])
  return (
     setMode(mode => (mode === 'light' ? 'dark' : 'light'))}
    >
      <div>
      <div>
      <div></div></div></div>

function Clients({ clientLogos }) {
  const [colorMode] = useColorMode()

  return (
    
      {clients.map(client => {
        const logo = clientLogos.edges.find(edge =>
          edge.node.relativePath.includes(client.slug),
        )
        return (
          
            
          
        )

export default function Editor(props) {
  const [colorMode] = useColorMode()
  const theme = colorMode === 'dark' ? 'tomorrow_night' : 'github'
  return (
    
  )
}

function Clients({ clientLogos }) {
  const [colorMode] = useColorMode()

  return (
    
      {clients.map(client => {
        const logo = clientLogos.edges.find(edge =>
          edge.node.relativePath.includes(client.slug),
        )
        return (
          
            
          
        )