Function ThemeProvider

packages/theme-provider/src/index.tsx:61–85

({
  theme,
  children,
})

/** @deprecated ThemeProvider is now called ThemeUIProvider to reduce confusion with Emotion */
export const ThemeProvider: React.FC<ThemeProviderProps> = ({
  theme,
  children,
}) => {
  React.useEffect(() => {
    if (process.env.NODE_ENV !== 'production') {
      console.warn(
        '[theme-ui] The export ThemeProvider is deprecated and is now called ThemeUIProvider to reduce confusion with Emotion. Please update your import; ThemeProvider will be removed in a future version.'
      )
    }
  }, [])

  const outer = useThemeUI()

  const isTopLevel = outer === __themeUiDefaultContextValue

  return (
    <CoreProvider theme={theme}>
      <ColorModeProvider>
        {isTopLevel && <RootStyles />}
        {children}
      </ColorModeProvider>
    </CoreProvider>
  )
}