use-dark-mode icon indicating copy to clipboard operation
use-dark-mode copied to clipboard

Initial toggle component

Open moharnadreza opened this issue 4 years ago • 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.

moharnadreza avatar Apr 09 '20 17:04 moharnadreza

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;

philippbck avatar Aug 01 '20 21:08 philippbck