react-theme-snap
Version:
A lightweight React package to easily add dark mode support with theme persistence, custom tokens. Plug-and-play with built-in context, hook — fully customizable for your UI.
64 lines (56 loc) • 1.95 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import * as React from 'react';
import React__default, { ReactNode } from 'react';
declare const ThemeToggle: ({ isDark, toggleTheme, iconSize, className, }: {
isDark: boolean;
toggleTheme: () => void;
iconSize?: number;
className?: string;
}) => react_jsx_runtime.JSX.Element;
interface LocalThemedProps$1 {
defaultMode?: "light" | "dark" | "inherit";
tokens?: {
light: Record<string, string>;
dark: Record<string, string>;
};
children: (theme: {
isDark: boolean;
toggleTheme: () => void;
themeClasses: Record<string, string>;
}) => React__default.ReactNode;
}
declare const ThemedComponent: React__default.FC<LocalThemedProps$1>;
interface LocalThemedProps {
defaultMode?: "light" | "dark" | "inherit" | "inherit-reverse";
tokens?: {
light: Record<string, string>;
dark: Record<string, string>;
};
children: (theme: {
isDark: boolean;
toggleTheme: () => void;
themeClasses: Record<string, string>;
}) => React__default.ReactNode;
}
declare const ThemedComponentSync: React__default.FC<LocalThemedProps>;
interface ThemeTokens {
[key: string]: string;
}
interface ThemeProviderProps {
children: ReactNode;
tokens: {
dark: ThemeTokens;
light: ThemeTokens;
};
className?: string;
storageKey?: string;
}
interface ThemeContextProps {
isDark: boolean;
toggleTheme: () => void;
themeClasses: ThemeTokens;
}
declare const ThemeProvider: ({ children, tokens, storageKey, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
declare const ThemeContext: React.Context<ThemeContextProps | null>;
declare const useDarkTheme: () => ThemeContextProps;
export { ThemeContext, type ThemeContextProps, ThemeProvider, type ThemeProviderProps, ThemeToggle, ThemedComponent, ThemedComponentSync, useDarkTheme };