Infinity Theme

A lightweight React theme system with dark/light mode and 5 color themes using CSS custom properties.

Features

• Dark/Light mode toggle with system preference detection
• 5 color themes: Purple, Red, Blue, Green, Orange
• Persistent — saves preferences to localStorage
• PWA-ready — updates manifest theme-color dynamically
• Zero dependencies — just React peer dependency
• ~2KB gzipped

Installation

npm install infinity-theme

Usage

1. Wrap your app with ThemeProvider

import { ThemeProvider } from 'infinity-theme';
import 'infinity-theme/globals.css';

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}

2. Use the ThemeToggle component

import { ThemeToggle } from 'infinity-theme';

function Header() {
  return (
    <header>
      <h1>My App</h1>
      <ThemeToggle />
    </header>
  );
}

3. Use theme colors in your CSS

The theme uses CSS custom properties in HSL format:

.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
}

.btn {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

Available CSS Variables

| Variable | Usage | |---|---| | --background | Page background | | --foreground | Default text color | | --card | Card/container background | | --card-foreground | Card text color | | --primary | Primary accent color | | --primary-foreground | Text on primary | | --secondary | Secondary accent | | --secondary-foreground | Text on secondary | | --muted | Muted backgrounds | | --muted-foreground | Muted text | | --border | Border colors | | --ring | Focus rings, scrollbars | | --radius | Border radius |

API

useTheme()

import { useTheme } from 'infinity-theme';

function MyComponent() {
  const { theme, toggleTheme, colorTheme, setColorTheme, colorThemes } = useTheme();
  // theme: 'light' | 'dark'
  // colorTheme: 'purple' | 'red' | 'blue' | 'green' | 'orange'
  // colorThemes: array of available colors
}

Color Themes

| Color | Light Primary | Dark Primary | |---|---|---| | Purple (default) | hsl(270 90% 60%) | hsl(270 90% 70%) | | Red | hsl(0 85% 60%) | hsl(0 85% 65%) | | Blue | hsl(220 90% 60%) | hsl(220 90% 70%) | | Green | hsl(140 70% 45%) | hsl(140 70% 55%) | | Orange | hsl(25 95% 55%) | hsl(25 95% 60%) |

License

MIT

Contributors

Contributions are welcome and encouraged! If you'd like to contribute code, or just give feedback on the project, please don't hesitate to reach out.

Github repo: infinity-theme