Skip to content

Loops-so/dark-mode-toggle

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

24 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

React Toggle Dark Mode

Version License: MIT PRs Welcome Bundle size

๐ŸŒƒ Animated dark mode toggle as seen in blogs!

Interactive sun and moon transition

Prerequisites

  • node >=10

Installation

npm i react-toggle-dark-mode

or with Yarn:

yarn add react-toggle-dark-mode

Usage

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { DarkModeSwitch } from 'react-toggle-dark-mode';

const App = () => {
  const [isDarkMode, setDarkMode] = React.useState(false);

  const toggleDarkMode = (checked: boolean) => {
    setDarkMode(checked);
  };

  return (
    <DarkModeSwitch
      style={{ marginBottom: '2rem' }}
      checked={isDarkMode}
      onChange={toggleDarkMode}
      size={120}
    />
  );
};

API

DarkModeSwitch

Props

Name Type Default Value Description
onChange (checked: boolean) => void Event that triggers when icon is clicked.
checked boolean false Current icon state.
style Object CSS properties object.
size number 24 SVG size.
animationProperties Object defaultProperties (see below) Override default animation properties.
moonColor string white Color of the moon.
sunColor string black Color of the sun.

Default Animation Properties

const defaultProperties = {
  dark: {
    circle: {
      r: 9,
    },
    mask: {
      cx: '50%',
      cy: '23%',
    },
    svg: {
      transform: 'rotate(40deg)',
    },
    lines: {
      opacity: 0,
    },
  },
  light: {
    circle: {
      r: 5,
    },
    mask: {
      cx: '100%',
      cy: '0%',
    },
    svg: {
      transform: 'rotate(90deg)',
    },
    lines: {
      opacity: 1,
    },
  },
  springConfig: { mass: 4, tension: 250, friction: 35 },
};

Contributors

Thanks goes to these wonderful people (emoji key):


Jose Felix

๐Ÿ’ป ๐Ÿ“– โš ๏ธ

This project follows the all-contributors specification. Contributions of any kind are welcome!

Show your support

Give a โญ๏ธ if this project helped you!

About

๐ŸŒƒ A sleek dark mode toggle button for React.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 94.0%
  • HTML 6.0%