React Dark-Light Scheme

A versatile React component package to toggle between light and dark themes using a button or a toggle switch.

Features

• Easy integration with any React application.
• Supports both button and toggle switch styles.
• Remembers user preferences using localStorage.
• Syncs with system theme preferences.

Installation

To install the package, run:

npm install react-dark-light-scheme

Usage

Here's a step-by-step guide to using the react-dark-light-scheme package in your React application.

Step 1: Wrap Your App with ThemeProvider

First, wrap your application with the ThemeProvider to provide the theme context.

import { ThemeProvider } from 'react-dark-light-scheme'

const App = () => (
  <ThemeProvider>
    <div>
      {/* Your app content */}
    </div>
  </ThemeProvider>
)

export default App

Step 2: Add the ThemeButton

Next, add the ThemeButton component wherever you want the theme toggle button or switch to appear.

import { ThemeButton } from 'react-dark-light-scheme'

const App = () => (
  <ThemeProvider>
    <div>
      <ThemeButton type="button" size={20} />
      {/* or */}
      <ThemeButton type="toggle" size={25} useIcons={false} />
      <div>Your app content</div>
    </div>
  </ThemeProvider>
)

export default App

Step 3: Add the Styles

Finally, add the necessary CSS styles to your project.

:root {
  --theme-background: #ffffff1a;
}

[data-theme="light"] {
  --theme-background: #3d3d3d1a;
}

body {
  background-color: var(--theme-background);
}

Props

The ThemeButton component accepts the following props:

type: Specifies the type of the button. Options are 'button' (default) or 'toggle'.

size: Sets the size of the button or toggle switch. Default is 20.

useIcons: Boolean value to determine whether to use icons for the button or switch. Default is true.

Contributing

If you would like to contribute to this project, please open an issue or submit a pull request. We welcome all contributions!