@react-hooks-hub/use-dark-mode

Use Dark Mode

`@react-hooks-hub/use-dark-mode`

     

@react-hooks-hub/use-dark-mode

use-dark-mode is a custom React hook that allows you to easily manage dark mode in your application. It simplifies the handling of user preferences regarding the theme (light or dark) with support for the system default mode. This hook is configurable and can be persisted in localStorage to remember the user's choices between sessions.

Features

• Automatic Dark Mode: Based on the user's system preferences.
• Persistence: Saves the user's chosen theme in localStorage.
• Simple Configuration: Customize the storage key and default mode.
• Easy Integration: Simple to use in any React application.

Installation

Use your preferred package manager to install @react-hooks-hub/use-dark-mode:

npm install @react-hooks-hub/use-dark-mode
# or
yarn add @react-hooks-hub/use-dark-mode

Usage

Import and use the useDarkMode hook in your component:

import React from 'react';
import { useDarkMode } from '@react-hooks-hub/use-dark-mode';

function MyComponent() {
  const { switchMode, darkMode } = useDarkMode({ persistance: true, defaultMode: 'system' });

  return (
    <div style={{ background: darkMode ? '#333' : '#fff', color: darkMode ? '#fff' : '#000' }}>
      <h1>{darkMode ? 'Dark Mode' : 'Light Mode'}</h1>
      <button onClick={() => switchMode('light')}>Light</button>
      <button onClick={() => switchMode('dark')}>Dark</button>
      <button onClick={() => switchMode('system')}>System</button>
    </div>
  );
};

export default MyComponent;