@rajace2005/theme-changer

v1.0.11

Published

8 months ago

A simple, lightweight and easy-to-use React component to add dark and light theme toggling to your application.

0High
0Medium
0Low

rajace2005

react theme theme-changer theme-provider theme-toggle dark-mode light-mode dark-theme light-theme color-scheme ui context-api

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme