Toggle between light and dark color modes with React

DarkModeToggle.js

import React, { useEffect, useState } from "react";
import { useMediaQuery } from "react-responsive";

export const DarkModeToggle = () => {
  const [isDark, setIsDark] = useState(true);

  useMediaQuery(
  {
    query: "(prefers-color-scheme: dark)",
  },
  undefined,
  (isSystemDark) => setIsDark(isSystemDark)
  );

  useEffect(() => {
    if (isDark) {
      document.body.classList.add('dark');
    } else {
      document.body.classList.remove('dark');
    }
  }, [isDark]);

  return (
    <p className="dark-mode-toggle" aria-label="Dark mode toggle" onClick={() => {setIsDark(!isDark)}}>
      <span className="dark-mode-toggle-text font-size-small font-weight-light">Theme:</span><span className="dark-mode-toggle-img" role="img" aria-label="Sun or moon emoji">{ isDark ? "🌙" : "🔆"}</span>
    </p>
  );
};