React-theme-lightdark NPM

React Theme LightDark 🎨🌙🌞

A simple and customizable React Light/Dark theme provider for your React apps.

🚀 Installation

You can install this package using npm:

npm install react-theme-lightdark

Or using yarn:

yarn add react-theme-lightdark

📌 How to Use in Your App

1️⃣ Wrap Your App with `ThemeProvider`

Modify your index.js or App.js:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "react-theme-lightdark"; // Import ThemeProvider

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <ThemeProvider>
    <App />
  </ThemeProvider>
);

2️⃣ Use `ThemeToggleButton` to Switch Themes

Modify App.js to include the theme toggle button:

import React from "react";
import { ThemeToggleButton } from "react-theme-lightdark"; // Import Toggle Button

const App = () => {
  return (
    <div style={{ textAlign: "center", padding: "20px" }}>
      <h1>Theme Switcher</h1>
      <ThemeToggleButton label="Switch Theme" />
    </div>
  );
};

export default App;

3️⃣ Apply Global Styles for Theme

To ensure the theme changes apply to your entire app, add the following CSS to your styles.css:

/* Smooth Theme Transition */
body {
  transition: background 0.3s ease, color 0.3s ease;
}

/* Light Mode */
[data-theme="light"] {
  background-color: #ffffff;
  color: #000000;
}

/* Dark Mode */
[data-theme="dark"] {
  background-color: #1e1e1e;
  color: #ffffff;
}

Then import it in App.js:

import "./styles.css"; // Import styles

4️⃣ Use `useTheme` Hook for Custom Theme Controls

If you want more control over the theme inside your own components, use the useTheme hook:

import React from "react";
import { useTheme } from "react-theme-lightdark"; // Import useTheme hook

const CustomThemeButton = () => {
  const { theme, toggleTheme } = useTheme(); // Access theme and toggle function

  return (
    <button onClick={toggleTheme} style={{ padding: "10px 20px", fontSize: "16px" }}>
      Switch to {theme === "light" ? "Dark" : "Light"} Mode
    </button>
  );
};

export default CustomThemeButton;

Then use this button inside App.js:

import CustomThemeButton from "./CustomThemeButton";

const App = () => {
  return (
    <div>
      <h1>Theme Switcher</h1>
      <CustomThemeButton />
    </div>
  );
};

🎨 Features

✅ One-click Light/Dark Mode Switching
✅ Remembers User Preference using localStorage
✅ Customizable Theme Button & Styles
✅ Includes useTheme Hook for Custom Controls