donavon/use-dark-mode

Initial toggle component

moharnadreza opened this issue ยท 1 comments

Hi @donavon, Is it OK to add an initial toggle component? If the answer is yes I'll be happy to work on it.

for everybody who has missed a toggle component. I have simply used the react-toggle-component.

npm install react-toggle-component styled-components

And then my dark mode component looks like the following:

import useDarkMode from 'use-dark-mode'
import { Toggle } from 'react-toggle-component'

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

  return (
    <div>
      <span role="img" aria-label="sun">๐Ÿ”†</span>
      <Toggle 
        leftBackgroundColor="#ffffff"
        rightBackgroundColor="#1a1919"
        borderColor="black"
        knobColor="#006aff"
        name="toggle-switch"
        checked={darkMode.value} 
        onChange={darkMode.toggle} 
      />
      <span role="img" aria-label="moon">๐ŸŒ™</span>
    </div>
  );
};

export default DarkModeToggle;