next-theme-kit/dist/index.d.mts

Your ultimate companion for seamless dark and light theme handling in Next.js! 🎨 Simplify theme management with this powerful wrapper 🧪.

import React from 'react';

type ThemeContextData = {
    /**
     * Theme update function.
     * @param theme New theme.
     * @returns Void
     */
    setTheme: (theme: string) => void;
    /** Current theme */
    theme: string | undefined;
    /** Available themes */
    themes: string[];
};
type ThemeProviderProps = {
    children?: React.ReactNode;
    /** Optional: Default theme. Default: 'light' */
    defaultTheme?: string;
    /** Optional: Theme mode, class or attribute (data-theme). Default: 'class' */
    mode?: 'class' | 'attribute';
    /** Optional: Storage key. Default: 'theme' */
    storageKey?: string;
    /** Optional: Available themes. Default: '[light,  dark]' */
    themes?: string[];
    /** Optional: Use color scheme. Default: 'true' */
    useColorScheme?: boolean;
    /** Optional: Use locale storage. Default: 'false' */
    useLocalStorage?: boolean;
    /** Optional: Use system. Default: 'true' */
    useSystem?: boolean;
};

declare const ThemeContext: React.Context<ThemeContextData>;
declare const ThemeProvider: React.FC<ThemeProviderProps>;

/**
 * Use theme hook.
 * @returns An object with the theme and the setter.
 */
declare const useTheme: () => ThemeContextData;

export { ThemeContext, ThemeProvider, useTheme };