npm package: @jvhaile/luna
Description: Luna is a flexible React and Tailwind CSS theming library, enabling dynamic and customizable theme management for a seamless design experience.
Author: Jvhaile
Latest version: 1.0.1

# @jvhaile/luna

**@jvhaile/luna** is a flexible theming library for React and Tailwind CSS, enabling dynamic theme customization with user-defined color schemes, theme variants, and easy integration with Tailwind's utility classes.

## Features

- **Dynamic Theming**: Create and switch between custom themes with light and dark mode support.
- **Tailwind Integration**: Extend Tailwind CSS with theme-specific utility classes.
- **React Context API**: Manage themes globally across your application.
- **TypeScript Support**: Type-safe theming for robust and predictable development.

## Installation

Install the package using npm or pnpm:

```bash
npm install @jvhaile/luna
# or
pnpm add @jvhaile/luna
```

## Setup

### 1. Define Your Theme System

Create your theme configurations and set up your theme system:

```typescript
// src/theme.ts
import { createThemeSystem } from "@jvhaile/luna";

export const themeSystem = createThemeSystem(
    ['primary', 'secondary', 'background', 'text', 'accent', 'card'],
    [
        {
            name: 'Modern Elegance',
            light: {
                primary: '#0D47A1',  // Deep Blue
                secondary: '#8E24AA',  // Purple
                background: '#FAFAFA',  // Off White
                text: '#212121',  // Dark Gray
                accent: '#FF5722',  // Vibrant Orange
                card: '#FFFFFF',  // Pure White
            },
            dark: {
                primary: '#42A5F5',  // Soft Blue
                secondary: '#BA68C8',  // Light Purple
                background: '#121212',  // Almost Black
                text: '#E0E0E0',  // Light Gray
                accent: '#FF7043',  // Soft Orange
                card: '#1C1C1C',  // Dark Gray
            },
        },
        {
            name: 'Forest Retreat',
            light: {
                primary: '#2E7D32',  // Forest Green
                secondary: '#FFB300',  // Amber
                background: '#F1F8E9',  // Light Green
                text: '#3E2723',  // Dark Brown
                accent: '#FF8F00',  // Deep Orange
                card: '#FFFFFF',  // Pure White
            },
            dark: {
                primary: '#66BB6A',  // Light Green
                secondary: '#FFC107',  // Bright Amber
                background: '#1B5E20',  // Dark Green
                text: '#E8F5E9',  // Pale Green
                accent: '#FFA000',  // Orange
                card: '#263238',  // Blue Gray
            },
        }
    ]
);
```

### 2. Wrap Your Application with `ThemeProvider`

Use the `ThemeProvider` to wrap your application components:

```typescript
import { ThemeProvider } from "@jvhaile/luna";
import { themeSystem } from "./src/theme";

export default function App() {
  return (
    <ThemeProvider {...themeSystem}>
      <div className="bg-background text-primary">
        <h1 className="text-secondary">Welcome to Luna</h1>
        <p className="bg-card p-4">This is a card with accent color.</p>
      </div>
    </ThemeProvider>
  );
}
```

### 3. Configure Tailwind CSS

Extend your Tailwind CSS configuration to include the theme variables:

```typescript
// tailwind.config.ts
import { generateTailwindColorExtension } from "@jvhaile/luna";
import { themeSystem } from "./src/theme";

const config = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: generateTailwindColorExtension(themeSystem.variables),
    },
  },
  plugins: [],
};

export default config;
```

## Usage

With the setup complete, you can now use your theme variables in Tailwind utility classes like `bg-primary`, `text-secondary`, `bg-card`, and more. The theme will dynamically switch between light and dark modes based on user preference.

### Example

```typescript
<div className="bg-background text-primary">
  <h1 className="text-secondary">Welcome to Luna</h1>
  <p className="bg-card p-4">This is a card with card color.</p>
</div>
```