Make a dark mode with nextJS without any dependences

Question

I created a website with Next JS and I Add an icon of light and dark mode like that in Navbar.js.

<FontAwesomeIcon onClick={darkMode} icon={click ? faSun : faMoon} className="icon"/>

and this is the function that change the icon.

const [click, setClick] = useState(false);

const darkMode = (event) => {
        setClick(!click)
}

and I create useState for the dark theme.

const [dark, setDark] = useState(undefined)

and then I got stuck!!

I tried to find out about it and I found https://nextjs.org/docs/advanced-features/custom-document but it say that i can't make onClick.

I want to know how to change body className from light to dark and vice verse in order to make the dark mode effect.

How can I do this?

Note : I don't want to add any packages or make it in component function, just with useState or useEffect or both.