Tiny Theming Engine

A lightweight, framework-agnostic theming engine with ready-to-use React components. Switch between themes seamlessly with automatic persistence.

Installation

npm install tiny-theming-engine

Quick Start

Vanilla JavaScript

import { ThemeEngine } from 'tiny-theming-engine';

const themes = {
  light: {
    '--bg': '#ffffff',
    '--text': '#333333',
    '--primary': '#007bff'
  },
  dark: {
    '--bg': '#1a1a1a',
    '--text': '#ffffff',
    '--primary': '#0d6efd'
  }
};

const engine = new ThemeEngine({
  themes,
  default: 'light',
  key: 'my-theme'
});

// Toggle between themes
engine.toggle();

// Apply specific theme
engine.apply('dark');

// Get current theme
console.log(engine.currentTheme);

React Integration

import React from 'react';
import { ThemeEngine, react } from 'tiny-theming-engine';

const { useTheme, ThemeToggleButton } = react;

const themes = {
  light: { '--bg': '#fff', '--text': '#333' },
  dark: { '--bg': '#1a1a1a', '--text': '#fff' }
};

function App() {
  return (
    <div style={{ 
      backgroundColor: 'var(--bg)', 
      color: 'var(--text)' 
    }}>
      <ThemeToggleButton 
        config={{ themes, default: 'light' }}
        icons={{ light: '☀️', dark: '🌙' }}
        labels={{ light: 'Light', dark: 'Dark' }}
      />
    </div>
  );
}

CSS Setup

Use CSS variables in your stylesheets:

:root {
  --bg: #ffffff;
  --text: #333333;
  --primary: #007bff;
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.button {
  background-color: var(--primary);
  color: var(--bg);
}

API Reference

ThemeEngine

new ThemeEngine(config)

Config Options:

• themes (object): Theme definitions with CSS variables
• default (string): Default theme name (default: 'light')
• key (string): localStorage key (default: 'theme')

Methods:

• apply(themeName): Apply specific theme
• toggle(): Cycle to next theme
• currentTheme: Get current theme name

React Hook

const { theme, toggle } = useTheme(config);

React Component

<ThemeToggleButton 
  config={themeConfig}
  icons={{ light: '☀️', dark: '🌙' }}
  labels={{ light: 'Light Mode', dark: 'Dark Mode' }}
  transition={true}
/>

Multiple Themes Example

const themes = {
  light: {
    '--bg': '#ffffff',
    '--text': '#333333',
    '--primary': '#007bff'
  },
  dark: {
    '--bg': '#1a1a1a',
    '--text': '#ffffff',
    '--primary': '#0d6efd'
  },
  blue: {
    '--bg': '#e3f2fd',
    '--text': '#0d47a1',
    '--primary': '#1976d2'
  }
};

const engine = new ThemeEngine({ themes, default: 'light' });

Features

• 🚀 Lightweight: Minimal bundle size
• 🎨 Framework Agnostic: Works with any framework
• ⚛️ React Ready: Built-in React components and hooks
• 💾 Auto Persistence: Remembers user preference
• 🔄 Smooth Transitions: CSS transition support
• 📱 Responsive: Mobile-friendly components

License

MIT