theme-toggle.js

import { IconContext } from "react-icons";
import { BsMoonFill, BsSunFill } from "react-icons/bs";
import cn from "classnames";
import useDarkMode from "use-dark-mode";
import { useTheme } from "@nextui-org/react";

export const ThemeToggle = ({ className }) => {
  const darkMode = useDarkMode();
  const theme = useTheme();

  const isDark = theme.type === "dark";

  return (
    <span
      className={cn(className, "theme-selector")}
      onClick={darkMode.toggle}>
      <IconContext.Provider value={{size: "1.5em"}}>
        {isDark? (
          <BsSunFill/>
        ) : (
          <BsMoonFill/>
        )}
      </IconContext.Provider>
      <style jsx>
        {`
          .theme-selector {
            display: flex;
            width: auto;
            height: auto;
            cursor: pointer;
            justify-content: center;
            align-items: center;
          }
        `}
      </style>
    </span>
  );
}