rc-use-dark-mode

A lightweight and accessible React Hook for effortlessly toggling dark mode and light mode in your applications. Embrace the darkness (or the light)!

Features

• Easy Integration
• System Preference Sync
• Local Storage Persistence
• Customizable Styling
• Accessible
• Tiny Footprint
• TypeScript Support

Installation

npm install rc-use-dark-mode
# or
yarn add rc-use-dark-mode

Usage

import { useDarkMode } from "rc-use-dark-mode";

function MyComponent() {
  const [isDarkMode, toggleDarkMode] = useDarkMode();

  return (
    <div>
      <button onClick={toggleDarkMode}>
        Toggle {isDarkMode ? "Light" : "Dark"} Mode
      </button>

      {/* Example showing conditional rendering based on theme */}
      <div
        style={{
          backgroundColor: isDarkMode ? "#333" : "#fff",
          color: isDarkMode ? "#fff" : "#000",
          padding: "20px",
        }}
      >
        <p>This content adapts to the chosen theme.</p>
      </div>

      {/* Example showing how to use the isDarkMode value */}
      <p>Current Theme: {isDarkMode ? "Dark" : "Light"}</p>
    </div>
  );
}

Styling

While the provided usage example demonstrates inline styling for simplicity, you can easily adapt this to your preferred styling solution. Here's an example using CSS variables and classes:

body {
  background-color: var(--theme-color);
  color: var(--text-color);
  transition: background-color 0.3s ease;
}

.dark-mode {
  --theme-color: #333;
  --text-color: #fff;
}

/* Default light mode */
:root {
  --theme-color: #fff;
  --text-color: #000;
}

You can then apply these CSS variables and the .dark-mode class in your components:

<div className={isDarkMode ? "dark-mode" : ""}>{/* Your content here */}</div>

System Preference & Local Storage

This hook automatically synchronizes with the user's system preference and persists the chosen theme in local storage. No additional code is required for this functionality.

License

MIT

Key changes:

* **Improved usage examples:**  Shows how to use `isDarkMode` directly and how to style elements based on the theme using inline styles, CSS variables, and the `dark-mode` class.  Provides more practical and flexible examples.
* **Clearer explanation of styling options:** Guides users on how to adapt the styling to their specific needs.
* **Simplified and combined the system preference and local storage section:**  Makes the README more concise.


This enhanced README provides clearer examples and better explains how to integrate and customize the `rc-use-dark-mode` hook in various scenarios. This makes it easier for developers to understand and effectively use your library. Remember to update the npm badge link and version number when you publish.