react-theme-toggle-button

Animated React component to invert the theme of React-based projects.

Status and support

• ✔ stable
• ✔ supported
• ✖ no ongoing development

Credit goes to Aaron Iker - he's the creator of the styles of this superb animated toggle button.

Install

npm

npm install --save react-theme-toggle-button

yarn

yarn add react-theme-toggle-button

Usage

import React, { useState } from "react";
import ToggleButton from "react-theme-toggle-button";
import "react-theme-toggle-button/dist/index.css";

const App = () => {
  const [isDark, setIsDark] = useState(false);

  return (
    <ToggleButton isDark={isDark} onChange={() => setIsDark(prevIsDark => !prevIsDark)} />
  )
}

Caveats:

• styles must be imported explicitly for now

Properties

Property | Description :--- | :--- isDark|Boolean value to set the aria-label and title attributes according to the theme. onChange|Function to fire when the button is toggled.

Styling

The package leverages CSS properties in order for you to tailor the colors to suit your needs.

:root {
  --color-light-theme: aqua;
  --color-dark-theme: bisque;
}

Property | Default :--- | :--- --color-light-theme|#eee --color-dark-theme|#000

Development

Refer to https://github.com/transitive-bullshit/create-react-library#development.

Put simply, launch two terminal windows/tabs:

npm run dev:package

npm run dev:example

Changes made to any of the running instances will live-reload the underlying dev server.

License

The project is available as open source under the terms of the MIT License.