nextjs-themes-lite
Version:
Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.
45 lines (44 loc) • 1.91 kB
TypeScript
import { ColorSchemeType } from "../../types";
export interface ThemeSwitcherProps {
/**
* Forced theme name for the current page
* @see [Force per page theme and color-scheme](https://github.com/react18-tools/nextjs-themes?tab=readme-ov-file#force-per-page-theme-and-color-scheme)
*/
forcedTheme?: string;
/**
* Forced color scheme for the current page
* @see [Force per page theme and color-scheme](https://github.com/react18-tools/nextjs-themes?tab=readme-ov-file#force-per-page-theme-and-color-scheme)
*/
forcedColorScheme?: ColorSchemeType;
/**
* CSS selector for the target element to apply the theme.
* Use this to specify a different target element than the default (html or documentElement).
* This is particularly useful for controlling the theme of different parts of the page independently.
*/
targetSelector?: string;
/**
* The transition property to enforce on all elements, preventing unwanted transitions during theme changes.
* @example 'background .3s'
* @defaultValue 'none'
*/
themeTransition?: string;
/**
* Provide a styles object imported from CSS/SCSS modules if you are using these modules to define theme and color-scheme classes.
* All classes applied to the target are modified using the styles object as follows:
* `if (styles) classes = classes.map(cls => styles[cls] ?? cls);`
*/
styles?: Record<string, string>;
/** The nonce value for your Content Security Policy. */
nonce?: string;
}
/**
* The Core component wich applies classes and transitions. Use this only once on a layout.
*
* For contained themes you may use Switcher from `nextjs-themes/client/switcher`
*
* @example
* ```tsx
* <ThemeSwitcher [...props] />
* ```
*/
export declare const ThemeSwitcher: (props: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;