@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:

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:

// 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:

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:

// 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

<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>