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

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | required | Child components to wrap | | defaultTheme | "light" \\| "dark" | "light" | Initial theme when no saved preference exists | | overrideTextColor | boolean | true | Whether to automatically adjust text colors |

ThemeToggle

A button component that toggles between light and dark themes.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 24 | Size of the toggle button in pixels | | className | string | "" | Additional CSS class for styling | | lightIconColor | string | "#FDB813" | Color of the sun icon (light mode) | | darkIconColor | string | "#FFFFFF" | Color of the moon icon (dark mode) |

useTheme Hook

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

Returns

| Property | Type | Description | |----------|------|-------------| | theme | "light" \\| "dark" | Current active theme | | toggleTheme | () => void | Function to toggle between themes | | overrideTextColor | boolean | Whether text color override is enabled |

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>
  );
};