Package Exports

themeshift
themeshift/dist/index.esm.js
themeshift/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (themeshift) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

ThemeShift 🎨

A lightweight, customizable theme toggler for React applications with smooth transitions and animated icons.

Features ✨

🌓 Default themes: Light, Dark, Sepia, and High Contrast
🎨 Support for custom themes with local storage persistence
⚡ Smooth theme transitions with configurable duration
🎭 Animated theme toggle icons using Framer Motion
⚛️ React Hook (useThemeShift)
📦 Tree-shakable and optimized for performance
💪 Full TypeScript support

Installation 📦

npm install themeshift
# or
yarn add themeshift

Usage ⚛️

import { useThemeShift, ThemeToggleButton } from 'themeshift';

function App() {
  const { currentTheme, setTheme, availableThemes } = useThemeShift({
    defaultTheme: 'light',
    transitionDuration: 300,
  });

  const cycleTheme = () => {
    const themes = Object.keys(availableThemes);
    const currentIndex = themes.indexOf(currentTheme);
    const nextTheme = themes[(currentIndex + 1) % themes.length];
    setTheme(nextTheme);
  };

  return (
    <div>
      <ThemeToggleButton
        currentTheme={currentTheme}
        onClick={cycleTheme}
        size={24}
      />
    </div>
  );
}

Custom Themes 🎨

import { useThemeShift } from 'themeshift';

const customTheme = {
  id: 'my-theme',
  name: 'My Theme',
  colors: {
    background: '#f0f0f0',
    text: '#333333',
    primary: '#007acc',
    secondary: '#6c757d',
    accent: '#ff4081',
  },
  variables: {
    '--theme-bg': '#f0f0f0',
    '--theme-text': '#333333',
    '--theme-primary': '#007acc',
    '--theme-secondary': '#6c757d',
    '--theme-accent': '#ff4081',
  },
};

function App() {
  const { addCustomTheme } = useThemeShift();
  
  useEffect(() => {
    addCustomTheme(customTheme);
  }, []);

  // ... rest of your component
}

API Reference 📚

useThemeShift Hook

const {
  currentTheme,          // Current active theme
  setTheme,             // Function to set the active theme
  isTransitioning,      // Boolean indicating if theme transition is active
  availableThemes,      // Object containing all available themes
  customThemes,         // Object containing user-defined themes
  addCustomTheme,       // Function to add a custom theme
  removeCustomTheme,    // Function to remove a custom theme
} = useThemeShift({
  defaultTheme?: string,           // Initial theme (default: 'light')
  transitionDuration?: number,     // Transition duration in ms (default: 300)
  storage?: Storage,               // Storage implementation (default: localStorage)
});

Running the Example 🚀

To run the example React application:

cd examples/react-demo
npm install
npm run dev

License 📄

MIT License - see the LICENSE file for details.

Contributing 🤝

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

Support 💖

If you found this project helpful, please consider giving it a ⭐️ on GitHub!