React Dark Mode Library

Zero-config dark mode for React applications with Tailwind CSS. Add dark mode to your entire application with JUST TWO LINES OF CODE!

Features

• 🌓 Smooth dark/light mode transitions
• 💾 Persists user preferences
• 🎨 Customizable styling
• 🎯 Selective dark mode exclusion
• 📱 Fully responsive
• ⚛️ React 18+ support
• 🎨 Tailwind CSS integration

Installation

npm install @adnanwani/universal-darkmode

Quick Start

1. Wrap your app with DarkModeProvider:

import { DarkModeProvider } from '@adnanwani/universal-darkmode';

function App() {
  return (
    <DarkModeProvider>
      {/* Your app content */}
    </DarkModeProvider>
  );
}

2. Add the toggle button wherever you want:

import { DarkModeToggle } from '@adnanwani/universal-darkmode';

function Navbar() {
  return (
    <nav>
      <DarkModeToggle />
    </nav>
  );
}

3. Configure Tailwind CSS:

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

Usage

Basic Example

import { DarkModeProvider, DarkModeToggle } from '@adnanwani/universal-darkmode';

function App() {
  return (
    <DarkModeProvider>
      <div className="min-h-screen p-8">
        <DarkModeToggle className="mb-4" />
        <div className="p-6 rounded-lg border">
          <h1 className="text-2xl font-bold">Hello Dark Mode!</h1>
          <p>This content will automatically adapt to dark mode.</p>
        </div>
      </div>
    </DarkModeProvider>
  );
}

Excluding Elements from Dark Mode

Use the no-dark-mode class to keep elements in their original styling:

<div className="p-6 rounded-lg no-dark-mode bg-blue-100">
  <h2 className="text-blue-900">This stays blue in both modes!</h2>
</div>

Using the Dark Mode Hook

import { useDarkMode } from '@adnanwani/universal-darkmode';

function CustomComponent() {
  const { isDarkMode, toggleDarkMode } = useDarkMode();

  return (
    <div>
      <p>Current mode: {isDarkMode ? 'Dark' : 'Light'}</p>
      <button onClick={toggleDarkMode}>Toggle</button>
    </div>
  );
}

Provider Options

<DarkModeProvider defaultDark={true}>
  {/* Content */}
</DarkModeProvider>

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultDark | boolean | false | Initial dark mode state | | children | ReactNode | - | Child components |

Toggle Button Props

<DarkModeToggle className="custom-class" />

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | '' | Additional CSS classes |

Styling

The library automatically handles dark mode transitions and applies appropriate styles based on the current theme. It uses CSS variables for theme colors which can be customized in your CSS:

:root {
  --bg-primary: #ffffff;
  --text-primary: #000000;
  --border-color: #e5e7eb;
}

.dark {
  --bg-primary: #1a1a1a;
  --text-primary: #ffffff;
  --border-color: #374151;
}

Browser Support

• Chrome (and Chromium-based browsers)
• Firefox
• Safari
• Edge

Requirements

• React 18 or higher
• Tailwind CSS 3.0 or higher

License

MIT