# React Theme Changer
[](https://badge.fury.io/js/@rajace2005%2Ftheme-changer) [](https://opensource.org/licenses/ISC)
A tiny, framework-agnostic React utility to toggle between light and dark mode. Works out of the box with CommonJS and ES module consumers, and integrates seamlessly with plain CSS, CSS variables, or Tailwind CSS (darkMode='class').
## Installation
```bash
npm install @rajace2005/theme-changer
# or
yarn add @rajace2005/theme-changer
```
## Quick Start
1. **Wrap your app**
```jsx
// src/main.jsx (or index.jsx)
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { ThemeProvider } from '@rajace2005/theme-changer';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
);
```
The `ThemeProvider` automatically adds `class="light"` or `class="dark"` to your `` element.
2. **Toggle the theme**
```jsx
// any component
import React from 'react';
import { useTheme } from '@rajace2005/theme-changer';
const ThemeToggleButton = () => {
const { theme, toggleTheme } = useTheme();
return (
);
};
export default ThemeToggleButton;
```
3. **Tailwind CSS integration**
Include these directives in your CSS entry (e.g., `index.css`):
```css
@import "tailwindcss";
@layer base {
body.light {
@apply bg-white text-gray-800;
}
body.dark {
@apply bg-gray-900 text-white;
}
body {
@apply transition-colors duration-300;
}
}
```
Use dark variants in JSX:
```jsx