UNPKG

3.3 kBJavaScriptView Raw
1'use client';
2
3import * as React from 'react';
4import styleFunctionSx from '@mui/system/styleFunctionSx';
5import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
6import createTheme from "./createTheme.js";
7import createTypography from "./createTypography.js";
8import THEME_ID from "./identifier.js";
9import { defaultConfig } from "../InitColorSchemeScript/InitColorSchemeScript.js";
10import { jsx as _jsx } from "react/jsx-runtime";
11const {
12 CssVarsProvider: InternalCssVarsProvider,
13 useColorScheme,
14 getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
15} = createCssVarsProvider({
16 themeId: THEME_ID,
17 // @ts-ignore ignore module augmentation tests
18 theme: () => createTheme({
19 cssVariables: true
20 }),
21 colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
22 modeStorageKey: defaultConfig.modeStorageKey,
23 defaultColorScheme: {
24 light: defaultConfig.defaultLightColorScheme,
25 dark: defaultConfig.defaultDarkColorScheme
26 },
27 resolveTheme: theme => {
28 const newTheme = {
29 ...theme,
30 typography: createTypography(theme.palette, theme.typography)
31 };
32 newTheme.unstable_sx = function sx(props) {
33 return styleFunctionSx({
34 sx: props,
35 theme: this
36 });
37 };
38 return newTheme;
39 }
40});
41let warnedOnce = false;
42
43// TODO: remove in v7
44// eslint-disable-next-line @typescript-eslint/naming-convention
45function Experimental_CssVarsProvider(props) {
46 if (process.env.NODE_ENV !== 'production') {
47 if (!warnedOnce) {
48 console.warn(['MUI: The Experimental_CssVarsProvider component has been ported into ThemeProvider.', '', "You should use `import { ThemeProvider } from '@mui/material/styles'` instead.", 'For more details, check out https://mui.com/material-ui/customization/css-theme-variables/usage/'].join('\n'));
49 warnedOnce = true;
50 }
51 }
52 return /*#__PURE__*/_jsx(InternalCssVarsProvider, {
53 ...props
54 });
55}
56let warnedInitScriptOnce = false;
57
58// TODO: remove in v7
59const getInitColorSchemeScript = params => {
60 if (!warnedInitScriptOnce) {
61 console.warn(['MUI: The getInitColorSchemeScript function has been deprecated.', '', "You should use `import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'`", 'and replace the function call with `<InitColorSchemeScript />` instead.'].join('\n'));
62 warnedInitScriptOnce = true;
63 }
64 return deprecatedGetInitColorSchemeScript(params);
65};
66
67/**
68 * TODO: remove this export in v7
69 * @deprecated
70 * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
71 *
72 * You should use `ThemeProvider` and `createTheme()` instead:
73 *
74 * ```diff
75 * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
76 * + import { ThemeProvider, createTheme } from '@mui/material/styles';
77 *
78 * - const theme = extendTheme();
79 * + const theme = createTheme({
80 * + cssVariables: true,
81 * + colorSchemes: { light: true, dark: true },
82 * + });
83 *
84 * - <CssVarsProvider theme={theme}>
85 * + <ThemeProvider theme={theme}>
86 * ```
87 *
88 * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
89 */
90export const CssVarsProvider = InternalCssVarsProvider;
91export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
\No newline at end of file