Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rajace2005/theme-changer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Theme Changer

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

npm install @rajace2005/theme-changer
# or
yarn add @rajace2005/theme-changer

Quick Start

Wrap your app

// 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(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

The ThemeProvider automatically adds class="light" or class="dark" to your <body> element.

Toggle the theme

// any component
import React from 'react';
import { useTheme } from '@rajace2005/theme-changer';

const ThemeToggleButton = () => {
  const { theme, toggleTheme } = useTheme();
  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? '🌙 Dark Mode' : '☀️ Light Mode'}
    </button>
  );
};

export default ThemeToggleButton;

Tailwind CSS integration

Include these directives in your CSS entry (e.g., index.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:

<div className="bg-white text-gray-800 dark:bg-gray-900 dark:text-white">
  {/* ... */}
</div>

API

ThemeProvider

A React component that provides theme context and toggling function.

Props:

children: React.ReactNode — the app components to render.

useTheme()

A hook that returns current theme and toggle function.

Returns:

theme: 'light' | 'dark'
toggleTheme(): () => void

TypeScript Support

Declaration files are included. Import with:

import { ThemeProvider, useTheme } from '@rajace2005/theme-changer';

Contributing

Contributions, issues, and feature requests are welcome!

Fork the repo
Create a branch (git checkout -b feature/xyz)
Commit your changes (git commit -m 'feat: add xyz')
Open a pull request

@rajace2005/theme-changer