How to use

useDarkMode

function

in

use-dark-mode

const ThemeToggle = () => {
 const darkMode = useDarkMode(false);

 return (
  <div className='dark-mode-toggle'>
   <button type='button' onClick={darkMode.disable}>
    ☀
   </button>
   <Toggle checked={darkMode.value} onChange={darkMode.toggle} />
   <button type='button' onClick={darkMode.enable}>
    ☾
   </button>
  </div>
 );
}

const ThemeStatus = () => {
 const { value } = useDarkMode(false);

 return value ? 'Dark Mode' : 'Light Mode';
}

const DarkModeToggle = () => {
  const darkMode = useDarkMode(false);

  return (
    <div>


      <Tooltip id="blackmode" title={"Dark Mode"}>
        <FormControlLabel
          control={
            <Checkbox

              icon={<FavoriteBorder id="blackmode" fontSize="large" style={{ color: "white" }} />}
              checkedIcon={<Favorite id="blackmode" fontSize="large" style={{ color: "white" }} />}
              value="checkedI"
              onClick={darkMode.toggle} />
          }

        />

      </Tooltip>

    </div>
  );
}