Function ThemeProvider

packages/react/src/ThemeProvider.tsx:53–147

({children, ...props})

}

export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({children, ...props}) => {
  // Get fallback values from parent ThemeProvider (if exists)
  const {
    theme: fallbackTheme,
    colorMode: fallbackColorMode,
    dayScheme: fallbackDayScheme,
    nightScheme: fallbackNightScheme,
  } = useTheme()

  // Initialize state
  const theme = props.theme ?? fallbackTheme ?? defaultTheme

  const uniqueDataId = useId()
  const {resolvedServerColorMode} = getServerHandoff(uniqueDataId)
  const resolvedColorModePassthrough = React.useRef(resolvedServerColorMode)

  const [colorMode, setColorMode] = React.useState(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
  const [dayScheme, setDayScheme] = React.useState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme)
  const [nightScheme, setNightScheme] = React.useState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme)
  const systemColorMode = useSystemColorMode()
  const resolvedColorMode = resolvedColorModePassthrough.current || resolveColorMode(colorMode, systemColorMode)
  const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme)
  const {resolvedTheme, resolvedColorScheme} = React.useMemo(
    () => applyColorScheme(theme, colorScheme),
    [theme, colorScheme],
  )

  // this effect will only run on client
  React.useEffect(
    function updateColorModeAfterServerPassthrough() {
      const resolvedColorModeOnClient = resolveColorMode(colorMode, systemColorMode)

      if (resolvedColorModePassthrough.current) {
        // if the resolved color mode passed on from the server is not the resolved color mode on client, change it!
        if (resolvedColorModePassthrough.current !== resolvedColorModeOnClient) {
          window.setTimeout(() => {
            // use ReactDOM.flushSync to prevent automatic batching of state updates since React 18
            // ref: https://github.com/reactwg/react-18/discussions/21
            ReactDOM.flushSync(() => {
              // override colorMode to whatever is resolved on the client to get a re-render
              setColorMode(resolvedColorModeOnClient)
            })

            // immediately after that, set the colorMode to what the user passed to respond to system color mode changes
            setColorMode(colorMode)
          })
        }

        resolvedColorModePassthrough.current = null
      }
    },
    [colorMode, systemColorMode],
  )

  // Update state if props change
  React.useEffect(() => {
    setColorMode(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
  }, [props.colorMode, fallbackColorMode])