@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
54 lines (53 loc) • 2.09 kB
TypeScript
/**
* Theme Provider
*
*/
import type { HTMLAttributes } from 'react';
import type { DynamicElement } from './types';
export type ThemeNames = 'ui' | 'eiendom' | 'sbanken' | 'carnegie';
export type ThemeVariants = string;
export type ThemeSizes = 'basis';
export type ContrastMode = boolean;
/**
* Controls the color scheme. Use `'dark'` or `'light'` to set explicitly, or `'auto'` to follow the user's system preference. Defaults to `undefined`.
*/
export type ThemeColorScheme = 'auto' | 'light' | 'dark';
/**
* Adjusts component appearance based on background. Defaults to `undefined`.
* Use `'initial'` to reset to the component's default behavior, ignoring any parent surface context.
*/
export type ThemeSurface = 'light' | 'dark' | 'initial';
export type ThemeProps = {
name?: ThemeNames;
variant?: ThemeVariants;
size?: ThemeSizes;
contrastMode?: ContrastMode;
colorScheme?: ThemeColorScheme;
surface?: ThemeSurface;
element?: DynamicElement | false;
};
export type ThemeAllProps = ThemeProps & HTMLAttributes<HTMLElement>;
declare function Theme(themeProps: ThemeAllProps): import("react/jsx-runtime").JSX.Element;
declare namespace Theme {
var Context: ({ element, ...themeProps }: ThemeAllProps) => import("react/jsx-runtime").JSX.Element;
}
export default Theme;
export declare function ThemeWrapper({ children, theme, element, className, ...rest }: {
[x: string]: any;
children: any;
theme: any;
element?: any;
className?: any;
}): any;
export declare function getThemeClasses(theme: ThemeProps, className?: any): any;
export type ThemeState = ThemeProps & Record<string, unknown>;
/**
* Read the persisted theme state from localStorage.
* Supports a `?eufemia-theme=<name>` URL query override for the theme name.
*/
export declare function getTheme(defaultTheme?: ThemeNames): ThemeState;
/**
* Merge the given properties into the persisted theme state
* and write it back to localStorage.
*/
export declare function setTheme(themeProps: Partial<ThemeState>, callback?: (theme: ThemeState) => void): void;