@aniruddha1806/theme-toggle v1.0.3

React Theme Toggle

A lightweight, customizable theme toggle component for React applications with TypeScript support. Easily switch between light and dark themes with smooth transitions and persistent storage.

Installation

npm install @aniruddha1806/theme-toggle

Features

• 🌙 Light and dark theme switching
• 💾 Persistent theme storage with localStorage
• 🎨 Customizable icons and colors
• ⚡ Smooth transitions and animations
• 🔧 Flexible configuration options
• 📱 Responsive design
• ♿ Accessibility features with ARIA labels
• 🪶 Zero dependencies and lightweight
• 📦 TypeScript support with full type definitions

Quick Start

import { ThemeProvider, ThemeToggle } from '@aniruddha1806/theme-toggle';

function App() {
  return (
    <ThemeProvider>
      <div>
        <header>
          <h1>My App</h1>
          <ThemeToggle />
        </header>
        <main>
          <p>Your content here...</p>
        </main>
      </div>
    </ThemeProvider>
  );
}

export default App;

Components

ThemeProvider

Wrap your application with the ThemeProvider to enable theme functionality throughout your app.

Props

ThemeToggle

A button component that toggles between light and dark themes.

Props

useTheme Hook

Access theme state and controls from any component within the ThemeProvider.

Returns

Examples

Basic Usage

Simple theme toggle with default settings:

import { ThemeProvider, ThemeToggle } from '@aniruddha1806/theme-toggle';

function BasicExample() {
  return (
    <ThemeProvider defaultTheme="dark">
      <div style={{ padding: '20px' }}>
        <h1>Welcome to My App</h1>
        <ThemeToggle />
        <p>This content will automatically adapt to the selected theme.</p>
      </div>
    </ThemeProvider>
  );
}

Custom Styled Toggle

Customize the appearance of the theme toggle:

import { ThemeProvider, ThemeToggle } from '@aniruddha1806/theme-toggle';

function CustomStyledExample() {
  return (
    <ThemeProvider>
      <div style={{ padding: '20px' }}>
        <h1>Custom Theme Toggle</h1>
        <ThemeToggle
          size={32}
          lightIconColor="#FF6B35"
          darkIconColor="#4ECDC4"
          className="custom-toggle"
        />
      </div>
    </ThemeProvider>
  );
}

Using the useTheme Hook

Access theme state in any component:

import { ThemeProvider, ThemeToggle, useTheme } from '@aniruddha1806/theme-toggle';

function ThemeAwareComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div style={{
      padding: '20px',
      backgroundColor: theme === 'dark' ? '#2a2a2a' : '#f5f5f5',
      borderRadius: '8px'
    }}>
      <h2>Current theme: {theme}</h2>
      <p>This component adapts its styling based on the current theme.</p>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'dark' : 'light'} mode
      </button>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <div style={{ padding: '20px' }}>
        <ThemeToggle />
        <ThemeAwareComponent />
      </div>
    </ThemeProvider>
  );
}

Navigation Bar with Theme Toggle

Integrate theme toggle into a navigation bar:

import { ThemeProvider, ThemeToggle, useTheme } from '@aniruddha1806/theme-toggle';

function NavigationBar() {
  const { theme } = useTheme();

  const navStyle = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '1rem 2rem',
    backgroundColor: theme === 'dark' ? '#1a1a1a' : '#ffffff',
    borderBottom: `1px solid \${theme === 'dark' ? '#333' : '#e0e0e0'}`,
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
  };

  const logoStyle = {
    fontSize: '1.5rem',
    fontWeight: 'bold',
    color: theme === 'dark' ? '#ffffff' : '#333333'
  };

  return (
    <nav style={navStyle}>
      <div style={logoStyle}>MyApp</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
        <a href="/about" style={{ color: theme === 'dark' ? '#ffffff' : '#333333' }}>
          About
        </a>
        <a href="/contact" style={{ color: theme === 'dark' ? '#ffffff' : '#333333' }}>
          Contact
        </a>
        <ThemeToggle size={28} />
      </div>
    </nav>
  );
}

function App() {
  return (
    <ThemeProvider>
      <NavigationBar />
      <main style={{ padding: '2rem' }}>
        <h1>Welcome to MyApp</h1>
        <p>Toggle the theme using the button in the navigation bar.</p>
      </main>
    </ThemeProvider>
  );
}

TypeScript Usage

The component provides full TypeScript support:

import { 
  ThemeProvider, 
  ThemeToggle, 
  useTheme,
  ThemeProviderProps,
  ThemeToggleProps,
  ThemeContextType
} from '@aniruddha1806/theme-toggle';

interface AppProps {
  initialTheme?: 'light' | 'dark';
}

const App: React.FC<AppProps> = ({ initialTheme = 'light' }) => {
  const themeProviderProps: ThemeProviderProps = {
    defaultTheme: initialTheme,
    overrideTextColor: true
  };

  return (
    <ThemeProvider {...themeProviderProps}>
      <AppContent />
    </ThemeProvider>
  );
};

const AppContent: React.FC = () => {
  const { theme, toggleTheme }: ThemeContextType = useTheme();

  const toggleProps: ThemeToggleProps = {
    size: 28,
    lightIconColor: '#f39c12',
    darkIconColor: '#ecf0f1'
  };

  return (
    <div>
      <h1>Current theme: {theme}</h1>
      <ThemeToggle {...toggleProps} />
      <button onClick={toggleTheme}>
        Toggle Theme Programmatically
      </button>
    </div>
  );
};