dark-mode-toggler

A reusable React component library for toggling dark mode, built with TypeScript and Tailwind CSS. Includes a customizable dark mode toggle button and a React hook for managing dark mode state.

Installation

npm install dark-mode-toggler

Usage

1. Import the Component and Hook

import { DarkModeToggler, useDarkMode } from "dark-mode-toggler";

2. Use in Your React App

import React from "react";
import { DarkModeToggler, useDarkMode } from "dark-mode-toggler";

const App = () => {
  // Correct: use object destructuring
  const { theme, resolvedTheme, toggleTheme, setTheme, mounted } =
    useDarkMode();

  return (
    <div className={resolvedTheme === "dark" ? "dark" : ""}>
      {/* Custom icons and dark/light only toggle example */}
      <DarkModeToggler
        theme={theme}
        resolvedTheme={resolvedTheme}
        toggleTheme={toggleDarkLight}
        mounted={mounted}
        icons={{
          dark: (
            <span role="img" aria-label="moon">
              🌙
            </span>
          ),
          light: (
            <span role="img" aria-label="sun">
              ☀️
            </span>
          ),
        }}
      />
      {/* Your app content */}
    </div>
  );

  // Only toggle between dark and light
  const toggleDarkLight = () => {
    setTheme(theme === "light" ? "dark" : "light");
  };
};

export default App;

Important usage notes:

• Do not use array destructuring with useDarkMode. It returns an object, not an array.
• The DarkModeToggler component does not accept a dark prop. Use the onToggleTheme prop to handle toggling.

3. Tailwind CSS Setup

Make sure your Tailwind config enables dark mode:

// tailwind.config.js
module.exports = {
  darkMode: "class",
  // ...other config
};

Features

• 🌗 Easy dark/light mode toggle
• ⚡ Built with TypeScript
• 🎨 Styled with Tailwind CSS
• 🦄 Uses lucide-react icons

License

MIT