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