index.d.ts 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. import * as React from 'react';
  2. interface ValueObject {
  3. [themeName: string]: string;
  4. }
  5. type DataAttribute = `data-${string}`;
  6. interface ScriptProps extends React.DetailedHTMLProps<React.ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement> {
  7. [dataAttribute: DataAttribute]: any;
  8. }
  9. interface UseThemeProps {
  10. /** List of all available theme names */
  11. themes: string[];
  12. /** Forced theme name for the current page */
  13. forcedTheme?: string | undefined;
  14. /** Update the theme */
  15. setTheme: React.Dispatch<React.SetStateAction<string>>;
  16. /** Active theme name */
  17. theme?: string | undefined;
  18. /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
  19. resolvedTheme?: string | undefined;
  20. /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
  21. systemTheme?: 'dark' | 'light' | undefined;
  22. }
  23. type Attribute = DataAttribute | 'class';
  24. interface ThemeProviderProps extends React.PropsWithChildren {
  25. /** List of all available theme names */
  26. themes?: string[] | undefined;
  27. /** Forced theme name for the current page */
  28. forcedTheme?: string | undefined;
  29. /** Whether to switch between dark and light themes based on prefers-color-scheme */
  30. enableSystem?: boolean | undefined;
  31. /** Disable all CSS transitions when switching themes */
  32. disableTransitionOnChange?: boolean | undefined;
  33. /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
  34. enableColorScheme?: boolean | undefined;
  35. /** Key used to store theme setting in localStorage */
  36. storageKey?: string | undefined;
  37. /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
  38. defaultTheme?: string | undefined;
  39. /** HTML attribute modified based on the active theme. Accepts `class`, `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.), or an array which could include both */
  40. attribute?: Attribute | Attribute[] | undefined;
  41. /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
  42. value?: ValueObject | undefined;
  43. /** Nonce string to pass to the inline script and style elements for CSP headers */
  44. nonce?: string;
  45. /** Props to pass the inline script */
  46. scriptProps?: ScriptProps;
  47. }
  48. declare const useTheme: () => UseThemeProps;
  49. declare const ThemeProvider: (props: ThemeProviderProps) => React.JSX.Element;
  50. export { type Attribute, ThemeProvider, type ThemeProviderProps, type UseThemeProps, useTheme };