Day Night Toggle

A beautiful day/night mode toggle button React component library.

Features

• 🌞 Beautiful day/night mode toggle animations
• 🎨 Pure CSS animations with excellent performance
• 📦 Zero dependencies (except React)
• 🎯 TypeScript support
• ♿ Accessibility support (ARIA attributes)
• 🎭 Customizable styles and callbacks
• 📏 Three sizes: small, medium, large (default: small)

Installation

npm install day-night-toggle
# or
yarn add day-night-toggle
# or
pnpm add day-night-toggle

Usage

Basic Usage

import { DayNightToggle } from 'day-night-toggle';
import 'day-night-toggle/dist/DayNightToggle.css';

function App() {
  return <DayNightToggle />;
}

Sync to body's data-dark-mode attribute

import { DayNightToggle } from 'day-night-toggle';
import 'day-night-toggle/dist/DayNightToggle.css';

function App() {
  return (
    <DayNightToggle
      syncBody={true}
      onChange={(isDark) => {
        console.log('Current mode:', isDark ? 'dark' : 'light');
      }}
    />
  );
}

Controlled Component

import { useState } from 'react';
import { DayNightToggle } from 'day-night-toggle';
import 'day-night-toggle/dist/DayNightToggle.css';

function App() {
  const [isDark, setIsDark] = useState(false);

  return (
    <DayNightToggle
      defaultDark={isDark}
      onChange={setIsDark}
    />
  );
}

Size Variants

import { DayNightToggle } from 'day-night-toggle';
import 'day-night-toggle/dist/DayNightToggle.css';

function App() {
  return (
    <div>
      <h3>Small (default)</h3>
      <DayNightToggle size="small" />

      <h3>Medium</h3>
      <DayNightToggle size="medium" />

      <h3>Large</h3>
      <DayNightToggle size="large" />
    </div>
  );
}

API

DayNightToggleProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | defaultDark | boolean | false | Initial state for dark mode | | syncBody | boolean | false | Whether to sync to body's data-dark-mode attribute | | onChange | (isDark: boolean) => void | - | Callback function when toggled | | className | string | '' | Custom class name | | style | React.CSSProperties | - | Custom styles | | size | 'small' \| 'medium' \| 'large' | 'small' | Size of the toggle button |

How It Works

The component controls state through the aria-pressed attribute:

• aria-pressed="false" represents light mode (day)
• aria-pressed="true" represents dark mode (night)

CSS uses the [aria-pressed=true] selector to set --dark: 1, which triggers all animations and style changes.

Style Customization

The component uses CSS variables. You can customize styles by overriding these variables:

.toggle {
  --width: 300px; /* Button width */
  --speed: 0.6s; /* Animation speed */
  --sun: hsl(47, 91%, 58%); /* Sun color */
  --moon: hsl(212, 13%, 82%); /* Moon color */
}

Notes

• Make sure to import the CSS file: import 'day-night-toggle/dist/DayNightToggle.css'
• If using syncBody={true}, the component will automatically set the data-dark-mode attribute on body
• The component has removed bear and spaceship animations, keeping only the core day/night toggle functionality

License

MIT