@space-man/react-theme-animation 1.1.0 → 2.0.0

package/README.md

@@ -4,10 +4,63 @@ https://github.com/user-attachments/assets/2819cf70-c474-478e-b821-6b26457c8d4a
 
 React theme switching with smooth view transition animations, multi-theme support, and synchronized state management.
 
-<p align="center">
-<img width="50%" src="https://github.com/user-attachments/assets/98b7f5cc-705c-4d32-a2f6-47f79b298707" />
-<img width="50%" src="https://github.com/user-attachments/assets/128cc7b0-5708-4b4c-884f-a8310d4e494f" />
-</p>
+## Spaceman React Theme Animation version 2
+
+Version 2 introduces new features for enhanced color theme management and improved Vite integration.
+
+- New functions to directly toggle between different color themes, without using the ThemeSelector component
+- Vite theme provider now supports theme toggling and persistence
+- Functions to manage and check active themes
+- Functions to toggle light and dark themes directly
+
+```tsx
+import { useThemeAnimation } from '@space-man/react-theme-animation'
+
+function ColorThemeDemo() {
+  const { createColorThemeToggle, isColorThemeActive, toggleDarkTheme, toggleLightTheme } =
+    useThemeAnimation({
+      colorThemes: ['supabase'],
+    })
+
+  return (
+    <>
+      <button onClick={createColorThemeToggle('supabase')} className="theme-toggle-btn">
+        Supabase Theme {isColorThemeActive('supabase') ? '✅' : '❌'}
+      </button>
+      <button ref={ref} onClick={toggleDarkTheme} className="theme-toggle-btn">
+        Dark Theme
+      </button>
+      <button ref={ref} onClick={toggleLightTheme} className="theme-toggle-btn">
+        Light Theme
+      </button>
+    </>
+  )
+}
+
+// Vite Theme Provider Example
+function App() {
+  return (
+    <ViteThemeProvider
+      themes={['light', 'dark', 'system']}
+      colorThemes={['default', 'supabase']}
+      defaultTheme="system"
+      defaultColorTheme="default"
+    >
+      <ThemeToggle />
+    </ViteThemeProvider>
+  )
+}
+
+function ThemeToggle() {
+  const { createColorThemeToggle, isColorThemeActive } = useViteTheme()
+
+  return (
+    <button onClick={createColorThemeToggle('supabase')} className="theme-toggle-btn">
+      Supabase Theme {isColorThemeActive('supabase') ? '✅' : '❌'}
+    </button>
+  )
+}
+```
 
 ## Live Demo
 
@@ -15,18 +68,18 @@ React theme switching with smooth view transition animations, multi-theme suppor
 
 ## Features
 
-- 🎨 **Smooth Animations**: Beautiful view transition animations for theme switching with customizable origins
-- 🌓 **Multi-Theme Support**: Support for light, dark, and system themes
-- 🎯 **Color Themes**: Additional color theme variants (brand colors, etc.)
-- 🪝 **Powerful Hook**: `useThemeAnimation` hook with full control
-- 🧩 **Ready Components**: `ThemeSwitcher` and `ThemeSelector` components
-- 🎛️ **Provider Pattern**: Centralized theme state management with `SpacemanThemeProvider`
-- 🔄 **State Synchronization**: Prevents state drift between multiple components
-- 📱 **Responsive**: Works on all screen sizes including high-resolution displays
-- ⚡ **Performance**: Optimized animations with reduced motion support
-- 🔧 **TypeScript**: Full TypeScript support with comprehensive types
-- 🎛️ **Customizable**: Extensive configuration options
-- 🔙 **Backward Compatible**: Works with existing implementations
+- **Smooth Animations**: Beautiful view transition animations for theme switching with customizable origins
+- **Multi-Theme Support**: Support for light, dark, and system themes
+- **Color Themes**: Additional color theme variants (brand colors, etc.)
+- **Powerful Hook**: `useThemeAnimation` hook with full control
+- **Ready Components**: `ThemeSwitcher` and `ThemeSelector` components
+- **Provider Pattern**: Centralized theme state management with `SpacemanThemeProvider`
+- **State Synchronization**: Prevents state drift between multiple components
+- **Responsive**: Works on all screen sizes including high-resolution displays
+- **Performance**: Optimized animations with reduced motion support
+- **TypeScript**: Full TypeScript support with comprehensive types
+- **Customizable**: Extensive configuration options
+- **Backward Compatible**: Works with existing implementations
 
 ## Installation
 
@@ -42,11 +95,11 @@ This library supports multiple usage patterns:
 2. **Provider Pattern**: Centralized state management (recommended)
 3. **ViteThemeProvider**: Specialized provider for Vite React SPAs
 
-📚 **[See the complete Getting Started Guide](./getting-started.md)** for detailed examples, advanced configurations, and best practices.
+**[See the complete Getting Started Guide](./getting-started.md)** for detailed examples, advanced configurations, and best practices.
 
-🚀 **[View the Next.js Code Example](./example/)** to see this package in action with a complete implementation of both hook and provider pattern.
+**[View the Next.js Code Example](./example/)** to see this package in action with a complete implementation of both hook and provider pattern.
 
-⚡ **[View the Vite React SPA Demo](https://github.com/tonyedgal/spaceman-rta-framework-guides/tree/main/example-vite)** for a complete Vite implementation using ViteThemeProvider.
+**[View the Vite React SPA Demo](https://github.com/tonyedgal/spaceman-rta-framework-guides/tree/main/example-vite)** for a complete Vite implementation using ViteThemeProvider.
 
 ---
 

package/dist/cjs/components/SpacemanThemeProvider.d.ts

@@ -4,15 +4,21 @@ import { Theme, ColorTheme, ThemeAnimationType } from '../types';
  * Context type for the Spaceman Theme Provider
  */
 interface SpacemanThemeContextType {
+    ref: React.RefObject<HTMLButtonElement | null>;
     theme: Theme;
     colorTheme: ColorTheme;
     resolvedTheme: 'light' | 'dark';
     setTheme: (theme: Theme) => void;
     setColorTheme: (colorTheme: ColorTheme) => void;
-    toggleTheme: () => Promise<void>;
     switchTheme: (theme: Theme) => Promise<void>;
+    switchColorTheme: (colorTheme: string) => void;
+    toggleTheme: () => Promise<void>;
+    toggleLightTheme: () => Promise<void>;
+    toggleDarkTheme: () => Promise<void>;
+    toggleColorTheme: () => void;
+    createColorThemeToggle: (targetColorTheme: string) => () => void;
+    isColorThemeActive: (targetColorTheme: string) => boolean;
     switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
-    ref: React.RefObject<HTMLButtonElement | null>;
 }
 /**
  * Props for the Spaceman Theme Provider

package/dist/cjs/components/SpacemanThemeProvider.js

@@ -59,28 +59,40 @@ const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'system'],
     };
     if (!mounted) {
         const loadingContextValue = {
+            ref: { current: null },
             theme: defaultTheme,
             colorTheme: defaultColorTheme,
             resolvedTheme: defaultTheme === 'dark' ? 'dark' : 'light',
             setTheme: () => { },
             setColorTheme: () => { },
-            toggleTheme: async () => { },
             switchTheme: async () => { },
             switchThemeFromElement: async () => { },
-            ref: { current: null },
+            switchColorTheme: () => { },
+            toggleTheme: async () => { },
+            toggleLightTheme: async () => { },
+            toggleDarkTheme: async () => { },
+            toggleColorTheme: () => { },
+            createColorThemeToggle: () => () => { },
+            isColorThemeActive: () => false,
         };
         return ((0, jsx_runtime_1.jsx)(SpacemanThemeContext.Provider, { value: loadingContextValue, children: children }));
     }
     const contextValue = {
+        ref: themeState.ref,
         theme: themeState.theme,
         colorTheme: themeState.colorTheme,
         resolvedTheme: themeState.resolvedTheme,
         setTheme: themeState.setTheme,
         setColorTheme: themeState.setColorTheme,
-        toggleTheme: themeState.toggleTheme,
         switchTheme: themeState.switchTheme,
         switchThemeFromElement,
-        ref: themeState.ref,
+        switchColorTheme: themeState.switchColorTheme,
+        toggleTheme: themeState.toggleTheme,
+        toggleLightTheme: themeState.toggleLightTheme,
+        toggleDarkTheme: themeState.toggleDarkTheme,
+        toggleColorTheme: themeState.toggleColorTheme,
+        createColorThemeToggle: themeState.createColorThemeToggle,
+        isColorThemeActive: themeState.isColorThemeActive,
     };
     return ((0, jsx_runtime_1.jsx)(SpacemanThemeContext.Provider, { value: contextValue, children: children }));
 };

package/dist/cjs/components/ViteThemeProvider.d.ts

@@ -1,18 +1,37 @@
-import React from 'react';
-type Theme = 'light' | 'dark' | 'system';
-export interface ViteThemeContextType {
+import React, { ReactNode } from 'react';
+import { Theme, ColorTheme, ThemeAnimationType } from '../types';
+interface ViteThemeContextType {
+    ref: React.RefObject<HTMLButtonElement | null>;
     theme: Theme;
+    colorTheme: ColorTheme;
     resolvedTheme: 'light' | 'dark';
-    setTheme: (theme: Theme) => void;
     systemTheme: 'light' | 'dark';
+    setTheme: (theme: Theme) => void;
+    setColorTheme: (colorTheme: ColorTheme) => void;
+    switchTheme: (theme: Theme) => Promise<void>;
+    switchColorTheme: (colorTheme: string) => void;
+    toggleTheme: () => Promise<void>;
+    toggleLightTheme: () => Promise<void>;
+    toggleDarkTheme: () => Promise<void>;
+    toggleColorTheme: () => void;
+    createColorThemeToggle: (targetColorTheme: string) => () => void;
+    isColorThemeActive: (targetColorTheme: string) => boolean;
+    switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
 }
 interface ViteThemeProviderProps {
-    children: React.ReactNode;
-    attribute?: 'class' | 'data-theme';
+    children: ReactNode;
+    themes?: Theme[];
+    colorThemes?: ColorTheme[];
     defaultTheme?: Theme;
-    enableSystem?: boolean;
+    defaultColorTheme?: ColorTheme;
+    animationType?: ThemeAnimationType;
+    duration?: number;
+    attribute?: 'class' | 'data-theme';
     disableTransitionOnChange?: boolean;
     storageKey?: string;
+    colorStorageKey?: string;
+    globalClassName?: string;
+    colorThemePrefix?: string;
 }
 export declare const ViteThemeProvider: React.FC<ViteThemeProviderProps>;
 export declare const useViteTheme: () => ViteThemeContextType;

package/dist/cjs/components/ViteThemeProvider.js

@@ -3,76 +3,108 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useViteTheme = exports.ViteThemeProvider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const use_theme_animation_1 = require("../hooks/use-theme-animation");
+const types_1 = require("../types");
 const ViteThemeContext = (0, react_1.createContext)(undefined);
-const ViteThemeProvider = ({ children, attribute = 'class', defaultTheme = 'system', enableSystem = true, disableTransitionOnChange = false, storageKey = 'vite-theme', }) => {
-    const [mounted, setMounted] = (0, react_1.useState)(false);
-    const [systemTheme, setSystemTheme] = (0, react_1.useState)('light');
-    const [theme, setThemeState] = (0, react_1.useState)(() => {
-        if (typeof window === 'undefined')
-            return defaultTheme;
-        try {
-            const savedTheme = localStorage.getItem(storageKey);
-            return savedTheme && ['light', 'dark', 'system'].includes(savedTheme)
-                ? savedTheme
-                : defaultTheme;
-        }
-        catch {
-            return defaultTheme;
-        }
+const ViteThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = types_1.ThemeAnimationType.CIRCLE, duration = 750, attribute = 'class', disableTransitionOnChange = false, storageKey = 'vite-theme', colorStorageKey = 'vite-color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
+    const themeState = (0, use_theme_animation_1.useThemeAnimation)({
+        themes,
+        colorThemes,
+        defaultTheme,
+        defaultColorTheme,
+        animationType,
+        duration,
+        storageKey,
+        colorStorageKey,
+        globalClassName: attribute === 'class' ? globalClassName : undefined,
+        colorThemePrefix,
     });
-    (0, react_1.useEffect)(() => {
-        if (!enableSystem)
-            return;
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const updateSystemTheme = () => {
-            setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
-        };
-        updateSystemTheme();
-        mediaQuery.addEventListener('change', updateSystemTheme);
-        return () => mediaQuery.removeEventListener('change', updateSystemTheme);
-    }, [enableSystem]);
-    const resolvedTheme = theme === 'system' ? systemTheme : theme;
-    (0, react_1.useEffect)(() => {
-        if (!mounted)
-            return;
-        const root = document.documentElement;
-        if (disableTransitionOnChange) {
-            const css = document.createElement('style');
-            css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
-            document.head.appendChild(css);
-            window.getComputedStyle(document.body);
+    const applyTransitionDisable = (0, react_1.useCallback)(() => {
+        if (!disableTransitionOnChange)
+            return () => { };
+        const css = document.createElement('style');
+        css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
+        document.head.appendChild(css);
+        window.getComputedStyle(document.body);
+        return () => {
             setTimeout(() => {
                 document.head.removeChild(css);
             }, 1);
-        }
-        if (attribute === 'class') {
-            root.classList.remove('light', 'dark');
-            root.classList.add(resolvedTheme);
+        };
+    }, [disableTransitionOnChange]);
+    const wrappedSetTheme = (0, react_1.useCallback)((theme) => {
+        const cleanup = applyTransitionDisable();
+        themeState.setTheme(theme);
+        cleanup();
+    }, [themeState.setTheme, applyTransitionDisable]);
+    const wrappedSwitchTheme = (0, react_1.useCallback)(async (theme) => {
+        const cleanup = applyTransitionDisable();
+        await themeState.switchTheme(theme);
+        cleanup();
+    }, [themeState.switchTheme, applyTransitionDisable]);
+    const wrappedToggleTheme = (0, react_1.useCallback)(async () => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleTheme();
+        cleanup();
+    }, [themeState.toggleTheme, applyTransitionDisable]);
+    const wrappedToggleLightTheme = (0, react_1.useCallback)(async () => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleLightTheme();
+        cleanup();
+    }, [themeState.toggleLightTheme, applyTransitionDisable]);
+    const wrappedToggleDarkTheme = (0, react_1.useCallback)(async () => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleDarkTheme();
+        cleanup();
+    }, [themeState.toggleDarkTheme, applyTransitionDisable]);
+    const switchThemeFromElement = async (theme, element) => {
+        const cleanup = applyTransitionDisable();
+        if (themeState.ref.current) {
+            const originalRef = themeState.ref.current;
+            Object.defineProperty(themeState.ref, 'current', {
+                value: element,
+                writable: true,
+                configurable: true,
+            });
+            await themeState.switchTheme(theme);
+            Object.defineProperty(themeState.ref, 'current', {
+                value: originalRef,
+                writable: true,
+                configurable: true,
+            });
         }
         else {
-            root.setAttribute(attribute, resolvedTheme);
-        }
-        try {
-            localStorage.setItem(storageKey, theme);
+            Object.defineProperty(themeState.ref, 'current', {
+                value: element,
+                writable: true,
+                configurable: true,
+            });
+            await themeState.switchTheme(theme);
         }
-        catch { }
-    }, [theme, resolvedTheme, mounted, attribute, disableTransitionOnChange, storageKey]);
-    (0, react_1.useEffect)(() => {
-        setMounted(true);
-    }, []);
-    const setTheme = (0, react_1.useCallback)((newTheme) => {
-        setThemeState(newTheme);
-    }, []);
-    if (!mounted) {
-        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
-    }
-    const value = {
-        theme,
-        resolvedTheme,
-        setTheme,
+        cleanup();
+    };
+    const systemTheme = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    const contextValue = {
+        ref: themeState.ref,
+        theme: themeState.theme,
+        colorTheme: themeState.colorTheme,
+        resolvedTheme: themeState.resolvedTheme,
         systemTheme,
+        setTheme: wrappedSetTheme,
+        setColorTheme: themeState.setColorTheme,
+        switchTheme: wrappedSwitchTheme,
+        switchThemeFromElement,
+        switchColorTheme: themeState.switchColorTheme,
+        toggleTheme: wrappedToggleTheme,
+        toggleLightTheme: wrappedToggleLightTheme,
+        toggleDarkTheme: wrappedToggleDarkTheme,
+        toggleColorTheme: themeState.toggleColorTheme,
+        createColorThemeToggle: themeState.createColorThemeToggle,
+        isColorThemeActive: themeState.isColorThemeActive,
     };
-    return (0, jsx_runtime_1.jsx)(ViteThemeContext.Provider, { value: value, children: children });
+    return (0, jsx_runtime_1.jsx)(ViteThemeContext.Provider, { value: contextValue, children: children });
 };
 exports.ViteThemeProvider = ViteThemeProvider;
 const useViteTheme = () => {

package/dist/cjs/hooks/use-theme-animation.js

@@ -13,34 +13,23 @@ const useThemeAnimation = (props = {}) => {
     const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
     const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
     const [mounted, setMounted] = (0, react_1.useState)(false);
+    // Inject base styles once on mount
     (0, react_1.useEffect)(() => {
         (0, animations_1.injectBaseStyles)();
+        setMounted(true);
     }, []);
     const [internalTheme, setInternalTheme] = (0, react_1.useState)(() => {
         if (!isBrowser)
             return defaultTheme;
-        return defaultTheme;
+        const saved = localStorage.getItem(storageKey);
+        return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
     });
     const [internalColorTheme, setInternalColorTheme] = (0, react_1.useState)(() => {
         if (!isBrowser)
             return defaultColorTheme;
-        return defaultColorTheme;
+        const saved = localStorage.getItem(colorStorageKey);
+        return saved && colorThemes.indexOf(saved) !== -1 ? saved : defaultColorTheme;
     });
-    (0, react_1.useEffect)(() => {
-        setMounted(true);
-        if (isBrowser && !externalTheme) {
-            const saved = localStorage.getItem(storageKey);
-            if (saved && themes.indexOf(saved) !== -1) {
-                setInternalTheme(saved);
-            }
-        }
-        if (isBrowser && !externalColorTheme) {
-            const saved = localStorage.getItem(colorStorageKey);
-            if (saved && colorThemes.indexOf(saved) !== -1) {
-                setInternalColorTheme(saved);
-            }
-        }
-    }, []);
     const currentTheme = externalTheme ?? internalTheme;
     const currentColorTheme = externalColorTheme ?? internalColorTheme;
     const [, setSystemTheme] = (0, react_1.useState)(() => (0, animations_1.getSystemTheme)());
@@ -186,26 +175,45 @@ const useThemeAnimation = (props = {}) => {
         slideToX,
         slideToY,
     ]);
+    const switchColorTheme = (0, react_1.useCallback)((newColorTheme) => {
+        if (colorThemes.indexOf(newColorTheme) === -1) {
+            console.warn(`Color theme "${newColorTheme}" not found in available themes`);
+            return;
+        }
+        setColorTheme(newColorTheme);
+    }, [colorThemes, setColorTheme]);
     const toggleTheme = (0, react_1.useCallback)(async () => {
         const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
         await switchTheme(newTheme);
     }, [resolvedTheme, switchTheme]);
-    (0, react_1.useEffect)(() => {
-        if (!isBrowser || !mounted)
+    const toggleLightTheme = (0, react_1.useCallback)(async () => {
+        if (resolvedTheme === 'light')
             return;
-        if (resolvedTheme === 'dark') {
-            document.documentElement.classList.add(globalClassName);
-        }
-        else {
-            document.documentElement.classList.remove(globalClassName);
-        }
-        colorThemes.forEach(theme => {
-            document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
-        });
-        if (currentColorTheme !== 'default') {
-            document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-        }
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes, mounted]);
+        await switchTheme('light');
+    }, [resolvedTheme, switchTheme]);
+    const toggleDarkTheme = (0, react_1.useCallback)(async () => {
+        if (resolvedTheme === 'dark')
+            return;
+        await switchTheme('dark');
+    }, [resolvedTheme, switchTheme]);
+    const toggleColorTheme = (0, react_1.useCallback)(() => {
+        const currentIndex = colorThemes.indexOf(currentColorTheme);
+        const nextIndex = (currentIndex + 1) % colorThemes.length;
+        const nextColorTheme = colorThemes[nextIndex];
+        setColorTheme(nextColorTheme);
+    }, [currentColorTheme, colorThemes, setColorTheme]);
+    const createColorThemeToggle = (0, react_1.useCallback)((targetColorTheme) => {
+        return () => {
+            if (colorThemes.indexOf(targetColorTheme) === -1) {
+                console.warn(`Color theme "${targetColorTheme}" not found in available themes`);
+                return;
+            }
+            setColorTheme(targetColorTheme);
+        };
+    }, [colorThemes, setColorTheme]);
+    const isColorThemeActive = (0, react_1.useCallback)((targetColorTheme) => {
+        return currentColorTheme === targetColorTheme;
+    }, [currentColorTheme]);
     return {
         ref,
         theme: currentTheme,
@@ -213,8 +221,14 @@ const useThemeAnimation = (props = {}) => {
         resolvedTheme,
         setTheme,
         setColorTheme,
-        toggleTheme,
         switchTheme,
+        switchColorTheme,
+        toggleTheme,
+        toggleLightTheme,
+        toggleDarkTheme,
+        toggleColorTheme,
+        createColorThemeToggle,
+        isColorThemeActive,
     };
 };
 exports.useThemeAnimation = useThemeAnimation;

package/dist/cjs/index.d.ts

@@ -3,7 +3,6 @@ export { ThemeSwitcher } from './components/ThemeSwitcher';
 export { ThemeSelector } from './components/ThemeSelector';
 export { SpacemanThemeProvider, useSpacemanTheme } from './components/SpacemanThemeProvider';
 export { ViteThemeProvider, useViteTheme } from './components/ViteThemeProvider';
-export type { UseThemeAnimationProps, UseThemeAnimationReturn, ThemeSwitcherProps, ThemeSelectorProps, Theme, ColorTheme, } from './types';
-export type { ViteThemeContextType } from './components/ViteThemeProvider';
+export type { UseThemeAnimationProps, UseThemeAnimationReturn, ThemeSwitcherProps, ThemeSelectorProps, Theme, ColorTheme, SlideDirection, } from './types';
 export { ThemeAnimationType } from './types';
 export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/cjs/types/index.d.ts

@@ -38,8 +38,14 @@ export interface UseThemeAnimationReturn {
     resolvedTheme: 'light' | 'dark';
     setTheme: (theme: Theme) => void;
     setColorTheme: (colorTheme: ColorTheme) => void;
-    toggleTheme: () => Promise<void>;
     switchTheme: (theme: Theme) => Promise<void>;
+    switchColorTheme: (colorTheme: string) => void;
+    toggleTheme: () => Promise<void>;
+    toggleLightTheme: () => Promise<void>;
+    toggleDarkTheme: () => Promise<void>;
+    toggleColorTheme: () => void;
+    createColorThemeToggle: (targetColorTheme: string) => () => void;
+    isColorThemeActive: (targetColorTheme: string) => boolean;
 }
 export interface ThemeSwitcherProps {
     themes?: Theme[];

package/dist/esm/components/SpacemanThemeProvider.d.ts

@@ -4,15 +4,21 @@ import { Theme, ColorTheme, ThemeAnimationType } from '../types';
  * Context type for the Spaceman Theme Provider
  */
 interface SpacemanThemeContextType {
+    ref: React.RefObject<HTMLButtonElement | null>;
     theme: Theme;
     colorTheme: ColorTheme;
     resolvedTheme: 'light' | 'dark';
     setTheme: (theme: Theme) => void;
     setColorTheme: (colorTheme: ColorTheme) => void;
-    toggleTheme: () => Promise<void>;
     switchTheme: (theme: Theme) => Promise<void>;
+    switchColorTheme: (colorTheme: string) => void;
+    toggleTheme: () => Promise<void>;
+    toggleLightTheme: () => Promise<void>;
+    toggleDarkTheme: () => Promise<void>;
+    toggleColorTheme: () => void;
+    createColorThemeToggle: (targetColorTheme: string) => () => void;
+    isColorThemeActive: (targetColorTheme: string) => boolean;
     switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
-    ref: React.RefObject<HTMLButtonElement | null>;
 }
 /**
  * Props for the Spaceman Theme Provider

package/dist/esm/components/SpacemanThemeProvider.js

@@ -56,28 +56,40 @@ export const SpacemanThemeProvider = ({ children, themes = ['light', 'dark', 'sy
     };
     if (!mounted) {
         const loadingContextValue = {
+            ref: { current: null },
             theme: defaultTheme,
             colorTheme: defaultColorTheme,
             resolvedTheme: defaultTheme === 'dark' ? 'dark' : 'light',
             setTheme: () => { },
             setColorTheme: () => { },
-            toggleTheme: async () => { },
             switchTheme: async () => { },
             switchThemeFromElement: async () => { },
-            ref: { current: null },
+            switchColorTheme: () => { },
+            toggleTheme: async () => { },
+            toggleLightTheme: async () => { },
+            toggleDarkTheme: async () => { },
+            toggleColorTheme: () => { },
+            createColorThemeToggle: () => () => { },
+            isColorThemeActive: () => false,
         };
         return (_jsx(SpacemanThemeContext.Provider, { value: loadingContextValue, children: children }));
     }
     const contextValue = {
+        ref: themeState.ref,
         theme: themeState.theme,
         colorTheme: themeState.colorTheme,
         resolvedTheme: themeState.resolvedTheme,
         setTheme: themeState.setTheme,
         setColorTheme: themeState.setColorTheme,
-        toggleTheme: themeState.toggleTheme,
         switchTheme: themeState.switchTheme,
         switchThemeFromElement,
-        ref: themeState.ref,
+        switchColorTheme: themeState.switchColorTheme,
+        toggleTheme: themeState.toggleTheme,
+        toggleLightTheme: themeState.toggleLightTheme,
+        toggleDarkTheme: themeState.toggleDarkTheme,
+        toggleColorTheme: themeState.toggleColorTheme,
+        createColorThemeToggle: themeState.createColorThemeToggle,
+        isColorThemeActive: themeState.isColorThemeActive,
     };
     return (_jsx(SpacemanThemeContext.Provider, { value: contextValue, children: children }));
 };

package/dist/esm/components/ViteThemeProvider.d.ts

@@ -1,18 +1,37 @@
-import React from 'react';
-type Theme = 'light' | 'dark' | 'system';
-export interface ViteThemeContextType {
+import React, { ReactNode } from 'react';
+import { Theme, ColorTheme, ThemeAnimationType } from '../types';
+interface ViteThemeContextType {
+    ref: React.RefObject<HTMLButtonElement | null>;
     theme: Theme;
+    colorTheme: ColorTheme;
     resolvedTheme: 'light' | 'dark';
-    setTheme: (theme: Theme) => void;
     systemTheme: 'light' | 'dark';
+    setTheme: (theme: Theme) => void;
+    setColorTheme: (colorTheme: ColorTheme) => void;
+    switchTheme: (theme: Theme) => Promise<void>;
+    switchColorTheme: (colorTheme: string) => void;
+    toggleTheme: () => Promise<void>;
+    toggleLightTheme: () => Promise<void>;
+    toggleDarkTheme: () => Promise<void>;
+    toggleColorTheme: () => void;
+    createColorThemeToggle: (targetColorTheme: string) => () => void;
+    isColorThemeActive: (targetColorTheme: string) => boolean;
+    switchThemeFromElement: (theme: Theme, element: HTMLButtonElement) => Promise<void>;
 }
 interface ViteThemeProviderProps {
-    children: React.ReactNode;
-    attribute?: 'class' | 'data-theme';
+    children: ReactNode;
+    themes?: Theme[];
+    colorThemes?: ColorTheme[];
     defaultTheme?: Theme;
-    enableSystem?: boolean;
+    defaultColorTheme?: ColorTheme;
+    animationType?: ThemeAnimationType;
+    duration?: number;
+    attribute?: 'class' | 'data-theme';
     disableTransitionOnChange?: boolean;
     storageKey?: string;
+    colorStorageKey?: string;
+    globalClassName?: string;
+    colorThemePrefix?: string;
 }
 export declare const ViteThemeProvider: React.FC<ViteThemeProviderProps>;
 export declare const useViteTheme: () => ViteThemeContextType;

package/dist/esm/components/ViteThemeProvider.js

@@ -1,75 +1,107 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useEffect, useState, useCallback } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useCallback } from 'react';
+import { useThemeAnimation } from '../hooks/use-theme-animation';
+import { ThemeAnimationType } from '../types';
 const ViteThemeContext = createContext(undefined);
-export const ViteThemeProvider = ({ children, attribute = 'class', defaultTheme = 'system', enableSystem = true, disableTransitionOnChange = false, storageKey = 'vite-theme', }) => {
-    const [mounted, setMounted] = useState(false);
-    const [systemTheme, setSystemTheme] = useState('light');
-    const [theme, setThemeState] = useState(() => {
-        if (typeof window === 'undefined')
-            return defaultTheme;
-        try {
-            const savedTheme = localStorage.getItem(storageKey);
-            return savedTheme && ['light', 'dark', 'system'].includes(savedTheme)
-                ? savedTheme
-                : defaultTheme;
-        }
-        catch {
-            return defaultTheme;
-        }
+export const ViteThemeProvider = ({ children, themes = ['light', 'dark', 'system'], colorThemes = ['default'], defaultTheme = 'system', defaultColorTheme = 'default', animationType = ThemeAnimationType.CIRCLE, duration = 750, attribute = 'class', disableTransitionOnChange = false, storageKey = 'vite-theme', colorStorageKey = 'vite-color-theme', globalClassName = 'dark', colorThemePrefix = 'theme-', }) => {
+    const themeState = useThemeAnimation({
+        themes,
+        colorThemes,
+        defaultTheme,
+        defaultColorTheme,
+        animationType,
+        duration,
+        storageKey,
+        colorStorageKey,
+        globalClassName: attribute === 'class' ? globalClassName : undefined,
+        colorThemePrefix,
     });
-    useEffect(() => {
-        if (!enableSystem)
-            return;
-        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-        const updateSystemTheme = () => {
-            setSystemTheme(mediaQuery.matches ? 'dark' : 'light');
-        };
-        updateSystemTheme();
-        mediaQuery.addEventListener('change', updateSystemTheme);
-        return () => mediaQuery.removeEventListener('change', updateSystemTheme);
-    }, [enableSystem]);
-    const resolvedTheme = theme === 'system' ? systemTheme : theme;
-    useEffect(() => {
-        if (!mounted)
-            return;
-        const root = document.documentElement;
-        if (disableTransitionOnChange) {
-            const css = document.createElement('style');
-            css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
-            document.head.appendChild(css);
-            window.getComputedStyle(document.body);
+    const applyTransitionDisable = useCallback(() => {
+        if (!disableTransitionOnChange)
+            return () => { };
+        const css = document.createElement('style');
+        css.textContent = `*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}`;
+        document.head.appendChild(css);
+        window.getComputedStyle(document.body);
+        return () => {
             setTimeout(() => {
                 document.head.removeChild(css);
             }, 1);
-        }
-        if (attribute === 'class') {
-            root.classList.remove('light', 'dark');
-            root.classList.add(resolvedTheme);
+        };
+    }, [disableTransitionOnChange]);
+    const wrappedSetTheme = useCallback((theme) => {
+        const cleanup = applyTransitionDisable();
+        themeState.setTheme(theme);
+        cleanup();
+    }, [themeState.setTheme, applyTransitionDisable]);
+    const wrappedSwitchTheme = useCallback(async (theme) => {
+        const cleanup = applyTransitionDisable();
+        await themeState.switchTheme(theme);
+        cleanup();
+    }, [themeState.switchTheme, applyTransitionDisable]);
+    const wrappedToggleTheme = useCallback(async () => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleTheme();
+        cleanup();
+    }, [themeState.toggleTheme, applyTransitionDisable]);
+    const wrappedToggleLightTheme = useCallback(async () => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleLightTheme();
+        cleanup();
+    }, [themeState.toggleLightTheme, applyTransitionDisable]);
+    const wrappedToggleDarkTheme = useCallback(async () => {
+        const cleanup = applyTransitionDisable();
+        await themeState.toggleDarkTheme();
+        cleanup();
+    }, [themeState.toggleDarkTheme, applyTransitionDisable]);
+    const switchThemeFromElement = async (theme, element) => {
+        const cleanup = applyTransitionDisable();
+        if (themeState.ref.current) {
+            const originalRef = themeState.ref.current;
+            Object.defineProperty(themeState.ref, 'current', {
+                value: element,
+                writable: true,
+                configurable: true,
+            });
+            await themeState.switchTheme(theme);
+            Object.defineProperty(themeState.ref, 'current', {
+                value: originalRef,
+                writable: true,
+                configurable: true,
+            });
         }
         else {
-            root.setAttribute(attribute, resolvedTheme);
-        }
-        try {
-            localStorage.setItem(storageKey, theme);
+            Object.defineProperty(themeState.ref, 'current', {
+                value: element,
+                writable: true,
+                configurable: true,
+            });
+            await themeState.switchTheme(theme);
         }
-        catch { }
-    }, [theme, resolvedTheme, mounted, attribute, disableTransitionOnChange, storageKey]);
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-    const setTheme = useCallback((newTheme) => {
-        setThemeState(newTheme);
-    }, []);
-    if (!mounted) {
-        return _jsx(_Fragment, { children: children });
-    }
-    const value = {
-        theme,
-        resolvedTheme,
-        setTheme,
+        cleanup();
+    };
+    const systemTheme = typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    const contextValue = {
+        ref: themeState.ref,
+        theme: themeState.theme,
+        colorTheme: themeState.colorTheme,
+        resolvedTheme: themeState.resolvedTheme,
         systemTheme,
+        setTheme: wrappedSetTheme,
+        setColorTheme: themeState.setColorTheme,
+        switchTheme: wrappedSwitchTheme,
+        switchThemeFromElement,
+        switchColorTheme: themeState.switchColorTheme,
+        toggleTheme: wrappedToggleTheme,
+        toggleLightTheme: wrappedToggleLightTheme,
+        toggleDarkTheme: wrappedToggleDarkTheme,
+        toggleColorTheme: themeState.toggleColorTheme,
+        createColorThemeToggle: themeState.createColorThemeToggle,
+        isColorThemeActive: themeState.isColorThemeActive,
     };
-    return _jsx(ViteThemeContext.Provider, { value: value, children: children });
+    return _jsx(ViteThemeContext.Provider, { value: contextValue, children: children });
 };
 export const useViteTheme = () => {
     const context = useContext(ViteThemeContext);

package/dist/esm/hooks/use-theme-animation.js

@@ -10,34 +10,23 @@ export const useThemeAnimation = (props = {}) => {
     const isHighResolution = isBrowser && (window.innerWidth >= 3000 || window.innerHeight >= 2000);
     const duration = isHighResolution ? Math.max(propsDuration * 0.8, 500) : propsDuration;
     const [mounted, setMounted] = useState(false);
+    // Inject base styles once on mount
     useEffect(() => {
         injectBaseStyles();
+        setMounted(true);
     }, []);
     const [internalTheme, setInternalTheme] = useState(() => {
         if (!isBrowser)
             return defaultTheme;
-        return defaultTheme;
+        const saved = localStorage.getItem(storageKey);
+        return saved && themes.indexOf(saved) !== -1 ? saved : defaultTheme;
     });
     const [internalColorTheme, setInternalColorTheme] = useState(() => {
         if (!isBrowser)
             return defaultColorTheme;
-        return defaultColorTheme;
+        const saved = localStorage.getItem(colorStorageKey);
+        return saved && colorThemes.indexOf(saved) !== -1 ? saved : defaultColorTheme;
     });
-    useEffect(() => {
-        setMounted(true);
-        if (isBrowser && !externalTheme) {
-            const saved = localStorage.getItem(storageKey);
-            if (saved && themes.indexOf(saved) !== -1) {
-                setInternalTheme(saved);
-            }
-        }
-        if (isBrowser && !externalColorTheme) {
-            const saved = localStorage.getItem(colorStorageKey);
-            if (saved && colorThemes.indexOf(saved) !== -1) {
-                setInternalColorTheme(saved);
-            }
-        }
-    }, []);
     const currentTheme = externalTheme ?? internalTheme;
     const currentColorTheme = externalColorTheme ?? internalColorTheme;
     const [, setSystemTheme] = useState(() => getSystemTheme());
@@ -183,26 +172,45 @@ export const useThemeAnimation = (props = {}) => {
         slideToX,
         slideToY,
     ]);
+    const switchColorTheme = useCallback((newColorTheme) => {
+        if (colorThemes.indexOf(newColorTheme) === -1) {
+            console.warn(`Color theme "${newColorTheme}" not found in available themes`);
+            return;
+        }
+        setColorTheme(newColorTheme);
+    }, [colorThemes, setColorTheme]);
     const toggleTheme = useCallback(async () => {
         const newTheme = resolvedTheme === 'dark' ? 'light' : 'dark';
         await switchTheme(newTheme);
     }, [resolvedTheme, switchTheme]);
-    useEffect(() => {
-        if (!isBrowser || !mounted)
+    const toggleLightTheme = useCallback(async () => {
+        if (resolvedTheme === 'light')
             return;
-        if (resolvedTheme === 'dark') {
-            document.documentElement.classList.add(globalClassName);
-        }
-        else {
-            document.documentElement.classList.remove(globalClassName);
-        }
-        colorThemes.forEach(theme => {
-            document.documentElement.classList.remove(`${colorThemePrefix}${theme}`);
-        });
-        if (currentColorTheme !== 'default') {
-            document.documentElement.classList.add(`${colorThemePrefix}${currentColorTheme}`);
-        }
-    }, [resolvedTheme, currentColorTheme, globalClassName, colorThemePrefix, colorThemes, mounted]);
+        await switchTheme('light');
+    }, [resolvedTheme, switchTheme]);
+    const toggleDarkTheme = useCallback(async () => {
+        if (resolvedTheme === 'dark')
+            return;
+        await switchTheme('dark');
+    }, [resolvedTheme, switchTheme]);
+    const toggleColorTheme = useCallback(() => {
+        const currentIndex = colorThemes.indexOf(currentColorTheme);
+        const nextIndex = (currentIndex + 1) % colorThemes.length;
+        const nextColorTheme = colorThemes[nextIndex];
+        setColorTheme(nextColorTheme);
+    }, [currentColorTheme, colorThemes, setColorTheme]);
+    const createColorThemeToggle = useCallback((targetColorTheme) => {
+        return () => {
+            if (colorThemes.indexOf(targetColorTheme) === -1) {
+                console.warn(`Color theme "${targetColorTheme}" not found in available themes`);
+                return;
+            }
+            setColorTheme(targetColorTheme);
+        };
+    }, [colorThemes, setColorTheme]);
+    const isColorThemeActive = useCallback((targetColorTheme) => {
+        return currentColorTheme === targetColorTheme;
+    }, [currentColorTheme]);
     return {
         ref,
         theme: currentTheme,
@@ -210,7 +218,13 @@ export const useThemeAnimation = (props = {}) => {
         resolvedTheme,
         setTheme,
         setColorTheme,
-        toggleTheme,
         switchTheme,
+        switchColorTheme,
+        toggleTheme,
+        toggleLightTheme,
+        toggleDarkTheme,
+        toggleColorTheme,
+        createColorThemeToggle,
+        isColorThemeActive,
     };
 };

package/dist/esm/index.d.ts

@@ -3,7 +3,6 @@ export { ThemeSwitcher } from './components/ThemeSwitcher';
 export { ThemeSelector } from './components/ThemeSelector';
 export { SpacemanThemeProvider, useSpacemanTheme } from './components/SpacemanThemeProvider';
 export { ViteThemeProvider, useViteTheme } from './components/ViteThemeProvider';
-export type { UseThemeAnimationProps, UseThemeAnimationReturn, ThemeSwitcherProps, ThemeSelectorProps, Theme, ColorTheme, } from './types';
-export type { ViteThemeContextType } from './components/ViteThemeProvider';
+export type { UseThemeAnimationProps, UseThemeAnimationReturn, ThemeSwitcherProps, ThemeSelectorProps, Theme, ColorTheme, SlideDirection, } from './types';
 export { ThemeAnimationType } from './types';
 export { injectBaseStyles, getSystemTheme, resolveTheme, supportsViewTransitions, prefersReducedMotion, } from './utils/animations';

package/dist/esm/types/index.d.ts

@@ -38,8 +38,14 @@ export interface UseThemeAnimationReturn {
     resolvedTheme: 'light' | 'dark';
     setTheme: (theme: Theme) => void;
     setColorTheme: (colorTheme: ColorTheme) => void;
-    toggleTheme: () => Promise<void>;
     switchTheme: (theme: Theme) => Promise<void>;
+    switchColorTheme: (colorTheme: string) => void;
+    toggleTheme: () => Promise<void>;
+    toggleLightTheme: () => Promise<void>;
+    toggleDarkTheme: () => Promise<void>;
+    toggleColorTheme: () => void;
+    createColorThemeToggle: (targetColorTheme: string) => () => void;
+    isColorThemeActive: (targetColorTheme: string) => boolean;
 }
 export interface ThemeSwitcherProps {
     themes?: Theme[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@space-man/react-theme-animation",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "React theme switching with smooth view transition animations and multi-theme support",
   "keywords": [
     "react",