### Install Luxify

Source: https://github.com/andreybo/luxify/blob/main/README.md

Install the package via npm.

```bash
npm install @andrewbro/luxify
```

--------------------------------

### Run development commands

Source: https://github.com/andreybo/luxify/blob/main/README.md

Standard commands for installing dependencies, building, and testing the project.

```bash
npm install
npm run build
npm run test
```

--------------------------------

### createFlux(options?)

Source: https://github.com/andreybo/luxify/blob/main/README.md

Initializes a controller for a single overlay instance with configurable options.

```APIDOC
## createFlux(options?)

### Description
Creates a controller for a single overlay instance. The library reuses the same DOM node per ID, preventing duplicate overlays.

### Parameters
#### Request Body
- **intensity** (number) - Optional - Overlay opacity (0-1). Default: 0.22
- **color** (string) - Optional - CSS color string. Default: '#ffb76b'
- **zIndex** (number) - Optional - Stacking level. Default: 2147483646
- **transitionDuration** (number) - Optional - Duration in ms. Default: 240
- **autoEnable** (boolean) - Optional - Automatically enable on init. Default: false
- **respectReducedMotion** (boolean) - Optional - Disable transitions for accessibility. Default: true
- **id** (string) - Optional - DOM ID. Default: 'luxify-overlay'
- **storageKey** (string) - Optional - Key for localStorage. Default: 'luxify'
- **persist** (boolean) - Optional - Save state to localStorage. Default: false
- **schedule** (object) - Optional - Object containing 'from' (string), 'to' (string), and 'timeZone' (string)
- **shouldEnable** (function) - Optional - Callback returning boolean based on date/time context

### Controller Methods
- **enable()** - Enables the overlay
- **disable()** - Disables the overlay
- **toggle()** - Toggles current state
- **destroy()** - Removes the overlay
- **setIntensity(value)** - Updates intensity
- **setColor(color)** - Updates color
- **isEnabled()** - Returns boolean status
- **getState()** - Returns current state
- **update(options)** - Updates configuration
```

--------------------------------

### Use Luxify with Vanilla JS

Source: https://github.com/andreybo/luxify/blob/main/README.md

Initialize and control the night mode overlay using the core Vanilla JS API.

```ts
import { createFlux } from '@andrewbro/luxify';

const flux = createFlux({
  intensity: 0.25,
  color: '#ffb45c',
  autoEnable: true,
  persist: true
});

flux.enable();
flux.disable();
flux.toggle();
flux.setIntensity(0.4);
flux.setColor('#ff9f43');
flux.destroy();
```

--------------------------------

### Luxify Summary

Source: https://context7.com/andreybo/luxify/llms.txt

Overview of Luxify's purpose, ideal use cases, and integration patterns.

```APIDOC
## Summary

Luxify is ideal for reading-heavy websites, documentation sites, blogs, dashboards, community forums, and learning platforms where users spend extended periods. The library excels in scenarios where you want to provide eye comfort without relying on system-level settings, offer users granular control over their viewing experience, or implement time-based activation for automatic evening mode. With persistence enabled, user preferences carry across sessions, making it a set-and-forget enhancement.

Integration follows standard patterns for both vanilla JavaScript and React applications. For vanilla JS, simply call `createFlux()` and use the returned controller methods. For React, wrap your app with `FluxProvider`, add `FluxOverlay` for configuration, and use `useFlux()` hook in any component that needs to control the overlay. The library handles all DOM manipulation, state management, and cleanup automatically, including proper SSR handling for Next.js and similar frameworks.
```

--------------------------------

### Use Luxify with Next.js

Source: https://github.com/andreybo/luxify/blob/main/README.md

Implement the overlay in a Next.js client component with scheduling options.

```tsx
'use client';

import { FluxOverlay, FluxProvider } from '@andrewbro/luxify/react';

export function NightLightShell({ children }: { children: React.ReactNode }) {
  return (
    <FluxProvider options={{ persist: true }}>
      <FluxOverlay
        intensity={0.22}
        color="#ffb76b"
        schedule={{ from: '19:00', to: '07:00', timeZone: 'Europe/Warsaw' }}
      />
      {children}
    </FluxProvider>
  );
}
```

--------------------------------

### Configure Time-Based Scheduling

Source: https://context7.com/andreybo/luxify/llms.txt

Automate overlay activation using the schedule option or custom callback functions for granular control.

```typescript
import { createFlux } from '@andrewbro/luxify';

// Schedule-based activation (19:00 to 07:00)
const flux = createFlux({
  schedule: {
    from: '19:00',       // Start time (24-hour format)
    to: '07:00',         // End time (24-hour format)
    timeZone: 'Europe/Warsaw'  // Optional: specific timezone
  }
});

// Custom callback for advanced scheduling logic
const customFlux = createFlux({
  shouldEnable: ({ date, hour, minute, timeZone }) => {
    // Enable between 7 PM and 7 AM
    return hour >= 19 || hour < 7;
  }
});

// Weekend-only night mode example
const weekendFlux = createFlux({
  shouldEnable: ({ date, hour }) => {
    const day = date.getDay();
    const isWeekend = day === 0 || day === 6;
    const isNightTime = hour >= 20 || hour < 8;
    return isWeekend && isNightTime;
  }
});
```

--------------------------------

### Integrate Luxify with React Themes

Source: https://github.com/andreybo/luxify/blob/main/README.md

Use FluxProvider and FluxOverlay to layer a night mode on top of existing light or dark themes.

```tsx
import { useState } from 'react';
import { FluxProvider, FluxOverlay } from '@andrewbro/luxify/react';

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

  return (
    <div data-theme={isDark ? 'dark' : 'light'}>
      <FluxProvider>
        {/* Night mode layer on top of your existing theme */}
        <FluxOverlay 
          intensity={0.22} 
          color={isDark ? '#1a1a2e' : '#ffb76b'}
        />
        <YourApp />
      </FluxProvider>
    </div>
  );
}
```

```tsx
const [isDark, setIsDark] = useState(false);

<FluxOverlay 
  intensity={isDark ? 0.15 : 0}  // Subtle in dark mode, off in light
  autoEnable={isDark}
/>
```

--------------------------------

### Use Luxify with React

Source: https://github.com/andreybo/luxify/blob/main/README.md

Implement the overlay using React components or the useFlux hook.

```tsx
import { FluxOverlay, FluxProvider } from '@andrewbro/luxify/react';

function App() {
  return (
    <FluxProvider options={{ persist: true }}>
      <FluxOverlay intensity={0.25} color="#ffb45c" />
      <Page />
    </FluxProvider>
  );
}
```

```tsx
import { useFlux } from '@andrewbro/luxify/react';

function Page() {
  const { toggle, setIntensity } = useFlux();

  return (
    <div>
      <button onClick={toggle}>Toggle night mode</button>
      <button onClick={() => setIntensity(0.35)}>Make it warmer</button>
    </div>
  );
}
```

--------------------------------

### Manage Overlay with createFlux API

Source: https://context7.com/andreybo/luxify/llms.txt

The createFlux function initializes a controller for managing the overlay instance. It supports manual control methods like enable, disable, toggle, and dynamic updates.

```typescript
import { createFlux } from '@andrewbro/luxify';

// Create a flux controller with custom options
const flux = createFlux({
  intensity: 0.25,        // Overlay opacity (0-1), default: 0.22
  color: '#ffb45c',       // Any valid CSS color, default: '#ffb76b'
  autoEnable: true,       // Enable overlay on creation, default: false
  persist: true,          // Store state in localStorage, default: false
  zIndex: 2147483646,     // Stacking level, default: 2147483646
  transitionDuration: 240, // Fade duration in ms, default: 240
  respectReducedMotion: true, // Disable transitions for reduced motion users
  id: 'luxify-overlay',   // DOM element ID, default: 'luxify-overlay'
  storageKey: 'luxify'    // localStorage key, default: 'luxify'
});

// Enable the night light overlay
flux.enable();

// Disable the overlay
flux.disable();

// Toggle overlay state
flux.toggle();

// Adjust warmth intensity dynamically (0-1)
flux.setIntensity(0.4);

// Change overlay color
flux.setColor('#ff9f43');

// Check if overlay is currently enabled
const isActive = flux.isEnabled();
// Returns: true or false

// Get full current state
const state = flux.getState();
// Returns: { enabled: true, intensity: 0.4, color: '#ff9f43' }

// Update multiple options at once
flux.update({ intensity: 0.3, color: '#ffb76b' });

// Clean up and remove overlay when done
flux.destroy();
```

--------------------------------

### Dark/Light Theme Integration with Luxify

Source: https://context7.com/andreybo/luxify/llms.txt

Combines Luxify with existing dark/light theme systems to provide adaptive eye comfort. Adjusts overlay based on theme settings.

```tsx
import { useState } from 'react';
import { FluxProvider, FluxOverlay, useFlux } from '@andrewbro/luxify/react';

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

  return (
    <div data-theme={isDark ? 'dark' : 'light'}> 
      <FluxProvider>
        {/* Adjust overlay based on theme */}
        <FluxOverlay
          intensity={isDark ? 0.15 : 0.22}  // Subtle in dark, normal in light
          color={isDark ? '#1a1a2e' : '#ffb76b'}  // Different tint per theme
        />

        <button onClick={() => setIsDark(!isDark)}>
          Toggle Theme
        </button>

        <NightModeToggle />
      </FluxProvider>
    </div>
  );
}

function NightModeToggle() {
  const { toggle, isEnabled } = useFlux();

  return (
    <button onClick={toggle}>
      Night Mode: {isEnabled() ? 'On' : 'Off'}
    </button>
  );
}
```

--------------------------------

### Luxify TypeScript Type Definitions

Source: https://context7.com/andreybo/luxify/llms.txt

Complete interface definitions for configuration options, scheduling, time context, and controller methods.

```typescript
import type {
  FluxOptions,
  FluxController,
  FluxState,
  FluxSchedule,
  FluxTimeContext
} from '@andrewbro/luxify';

// Full options interface
type FluxOptions = {
  intensity?: number;           // 0-1, default: 0.22
  color?: string;               // CSS color, default: '#ffb76b'
  zIndex?: number;              // default: 2147483646
  transitionDuration?: number;  // ms, default: 240
  autoEnable?: boolean;         // default: false
  respectReducedMotion?: boolean; // default: true
  id?: string;                  // default: 'luxify-overlay'
  storageKey?: string;          // default: 'luxify'
  persist?: boolean;            // default: false
  schedule?: FluxSchedule;
  shouldEnable?: (context: FluxTimeContext) => boolean;
};

// Schedule configuration
type FluxSchedule = {
  from: string;     // Time in 'HH:MM' format
  to: string;       // Time in 'HH:MM' format
  timeZone?: string; // IANA timezone identifier
};

// Time context for custom scheduling
type FluxTimeContext = {
  date: Date;
  hour: number;
  minute: number;
  timeZone?: string;
};

// Controller state
type FluxState = {
  enabled: boolean;
  intensity: number;
  color: string;
};

// Controller methods
type FluxController = {
  enable: () => void;
  disable: () => void;
  toggle: () => void;
  destroy: () => void;
  setIntensity: (value: number) => void;
  setColor: (value: string) => void;
  isEnabled: () => boolean;
  getState: () => FluxState;
  update: (options: Partial<FluxOptions>) => void;
};
```

--------------------------------

### Schedule overlay activation

Source: https://github.com/andreybo/luxify/blob/main/README.md

Configure the overlay to enable and disable based on specific times.

```ts
createFlux({
  schedule: {
    from: '19:00',
    to: '07:00'
  }
});
```

--------------------------------

### Define custom scheduling logic

Source: https://github.com/andreybo/luxify/blob/main/README.md

Use a callback function to determine if the overlay should be enabled based on the current time.

```ts
createFlux({
  shouldEnable: ({ hour }) => hour >= 19 || hour < 7
});
```

--------------------------------

### FluxOptions Type Reference

Source: https://context7.com/andreybo/luxify/llms.txt

Complete TypeScript type definitions for all configuration options available in Luxify.

```APIDOC
## FluxOptions Type Reference

Complete TypeScript type definitions for all configuration options available in Luxify.

```typescript
import type {
  FluxOptions,
  FluxController,
  FluxState,
  FluxSchedule,
  FluxTimeContext
} from '@andrewbro/luxify';

// Full options interface
type FluxOptions = {
  intensity?: number;           // 0-1, default: 0.22
  color?: string;               // CSS color, default: '#ffb76b'
  zIndex?: number;              // default: 2147483646
  transitionDuration?: number;  // ms, default: 240
  autoEnable?: boolean;         // default: false
  respectReducedMotion?: boolean; // default: true
  id?: string;                  // default: 'luxify-overlay'
  storageKey?: string;          // default: 'luxify'
  persist?: boolean;            // default: false
  schedule?: FluxSchedule;
  shouldEnable?: (context: FluxTimeContext) => boolean;
};

// Schedule configuration
type FluxSchedule = {
  from: string;     // Time in 'HH:MM' format
  to: string;       // Time in 'HH:MM' format
  timeZone?: string; // IANA timezone identifier
};

// Time context for custom scheduling
type FluxTimeContext = {
  date: Date;
  hour: number;
  minute: number;
  timeZone?: string;
};

// Controller state
type FluxState = {
  enabled: boolean;
  intensity: number;
  color: string;
};

// Controller methods
type FluxController = {
  enable: () => void;
  disable: () => void;
  toggle: () => void;
  destroy: () => void;
  setIntensity: (value: number) => void;
  setColor: (value: string) => void;
  isEnabled: () => boolean;
  getState: () => FluxState;
  update: (options: Partial<FluxOptions>) => void;
};
```
```

--------------------------------

### Luxify CSS Styles

Source: https://github.com/andreybo/luxify/blob/main/examples/vanilla/index.html

Defines the layout, backdrop blur, and button styling for the Luxify interface.

```css
page-flux vanilla demo body { font-family: ui-sans-serif, system-ui, sans-serif; margin: 0; min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #f4efe7, #d8e5f1); } main { width: min(640px, calc(100vw - 32px)); padding: 32px; border-radius: 24px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(16px); box-shadow: 0 16px 40px rgba(20, 37, 63, 0.18); } button { border: 0; border-radius: 999px; padding: 12px 18px; font: inherit; background: #0d3b66; color: white; cursor: pointer; }
```

--------------------------------

### Basic FluxOverlay Usage

Source: https://context7.com/andreybo/luxify/llms.txt

Renders a basic overlay with specified intensity and color. Place inside FluxProvider to control overlay appearance.

```tsx
import { FluxProvider, FluxOverlay } from '@andrewbro/luxify/react';

function App() {
  return (
    <FluxProvider options={{ persist: true }}>
      {/* Basic overlay */}
      <FluxOverlay
        intensity={0.22}           // Opacity (0-1)
        color="#ffb76b"            // Overlay color
      />

      {/* Full configuration */}
      <FluxOverlay
        intensity={0.25}
        color="#ffb45c"
        zIndex={2147483646}
        transitionDuration={240}
        respectReducedMotion={true}
        autoEnable={true}
        schedule={{ from: '19:00', to: '07:00' }}
      />

      <MainContent />
    </FluxProvider>
  );
}
```

--------------------------------

### Integrate with React using FluxProvider

Source: https://context7.com/andreybo/luxify/llms.txt

Use FluxProvider to share the controller instance via React context and FluxOverlay to render the component.

```tsx
import { FluxProvider, FluxOverlay } from '@andrewbro/luxify/react';

function App() {
  return (
    <FluxProvider
      options={{
        persist: true,           // Persist state across sessions
        schedule: {
          from: '19:00',
          to: '07:00'
        }
      }}
    >
      <FluxOverlay intensity={0.25} color="#ffb45c" />
      <YourAppContent />
    </FluxProvider>
  );
}
```

--------------------------------

### Programmatic Control with useFlux Hook

Source: https://context7.com/andreybo/luxify/llms.txt

Provides access to the flux controller for programmatic control of the overlay. Use within a FluxProvider.

```tsx
import { useFlux, FluxProvider, FluxOverlay } from '@andrewbro/luxify/react';

function NightModeControls() {
  const flux = useFlux();

  const handleIntensityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    flux.setIntensity(parseFloat(e.target.value));
  };

  return (
    <div>
      <button onClick={() => flux.toggle()}>
        Toggle Night Mode
      </button>

      <button onClick={() => flux.enable()}>Enable</button>
      <button onClick={() => flux.disable()}>Disable</button>

      <input
        type="range"
        min="0"
        max="1"
        step="0.05"
        defaultValue="0.22"
        onChange={handleIntensityChange}
      />

      <button onClick={() => flux.setColor('#ff6b6b')}>
        Warm Red
      </button>
      <button onClick={() => flux.setColor('#ffb76b')}>
        Warm Orange
      </button>

      <p>Status: {flux.isEnabled() ? 'On' : 'Off'}</p>
      <p>Current State: {JSON.stringify(flux.getState())}</p>
    </div>
  );
}

function App() {
  return (
    <FluxProvider options={{ persist: true }}>
      <FluxOverlay intensity={0.22} color="#ffb76b" />
      <NightModeControls />
    </FluxProvider>
  );
}
```

--------------------------------

### Next.js Client Component Integration

Source: https://context7.com/andreybo/luxify/llms.txt

Wraps components in a client component shell for Next.js applications. The library is SSR-safe and renders the overlay client-side.

```tsx
// components/NightLightShell.tsx
'use client';

import { FluxProvider, FluxOverlay } from '@andrewbro/luxify/react';

export function NightLightShell({ children }: { children: React.ReactNode }) {
  return (
    <FluxProvider options={{ persist: true }}>
      <FluxOverlay
        intensity={0.22}
        color="#ffb76b"
        schedule={{
          from: '19:00',
          to: '07:00',
          timeZone: 'America/New_York'
        }}
      />
      {children}
    </FluxProvider>
  );
}

// app/layout.tsx
import { NightLightShell } from '@/components/NightLightShell';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <NightLightShell>
          {children}
        </NightLightShell>
      </body>
    </html>
  );
}
```

--------------------------------

### Define FluxOptions type

Source: https://github.com/andreybo/luxify/blob/main/README.md

Configuration options for the createFlux controller.

```ts
type FluxOptions = {
  intensity?: number;
  color?: string;
  zIndex?: number;
  transitionDuration?: number;
  autoEnable?: boolean;
  respectReducedMotion?: boolean;
  id?: string;
  storageKey?: string;
  persist?: boolean;
  schedule?: {
    from: string;
    to: string;
    timeZone?: string;
  };
  shouldEnable?: (context: {
    date: Date;
    hour: number;
    minute: number;
    timeZone?: string;
  }) => boolean;
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.