DEV Community

Add utteranc.es to Gatsby (React)

LocTran016 on December 21, 2020

Excuse me, I'm using Gatsby (React) and I'm trying my hard to add dark/light mode toggleable utturanc.es. My idea is that dark/light mode change, t...

Read full post

LocTran016 • Dec 21 '20

Btw, here is my code for dark/light mode button:

export const ModeToggle = ({ ...props }) => {
  const [colorMode, setColorMode] = useColorMode()
  const [utterancesId] = useColorMode() ? 'light-utterance' : 'dark-utterance'
  return (
    <button
      variant="button.icon"
      className="mode-toggle"
      aria-label="Toggle mode"
      id={colorMode === "default" ? "light" : "dark"}
      onClick={() => {
        setColorMode(colorMode === "default" ? "dark" : "default");
      }}
      ml={[2, 4]}
      {...props}
      _hover={{
        color: "primary",
      }}
      _focus={{
        color: "text",
      }}
    >
      <Icon name={colorMode === "default" ? "sun" : "moon"} size="6" />
    </button>
  )
}