@dev-asterix/celestial-toggle 🌙✨

A beautiful, animated "Sun & Moon" theme switcher component for React. Perfect for adding a celestial touch to your dark mode toggle.

Features

• 🌗 Adaptive Design: Smoothly transitions between a bright morning sun and a cratered moon.
• ☁️ Animated Decor: Dynamic clouds for light mode and twinkling stars for dark mode.
• ♿ Accessible: Built with semantic HTML and appropriate ARIA roles.
• ⚛️ React 19 Ready: Optimized for the latest React versions.
• 🎨 Tailwind 4 Ready: Built using utility-first CSS for easy styling.

Installation

npm install @dev-asterix/celestial-toggle

OR

pnpm add @dev-asterix/celestial-toggle

Prerequisites

This component uses Tailwind CSS. Ensure you have Tailwind configured in your project.

Usage

import { useState } from 'react';
import { CelestialToggle } from '@dev-asterix/celestial-toggle';

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

  return (
    <div className={isDark ? 'dark bg-slate-900' : 'bg-sky-50'}>
      <CelestialToggle 
        isDark={isDark} 
        onChange={setIsDark} 
      />
    </div>
  );
}

Props

| Prop | Type | Description | | :--- | :--- | :--- | | isDark | boolean | Current state of the theme (true for dark, false for light). | | onChange | (isDark: boolean) => void | Callback triggered when the toggle is clicked. |

Development

# Clone the repository
git clone https://github.com/dev-asterix/celestial-toggle.git

# Install dependencies
npm install

# Build the package
npm run build

# Run linting
npm run lint

License

MIT