Function NestedColorModeProvider

packages/color-modes/src/index.tsx:312–363

({
  outerCtx,
  children,
}: {
  outerCtx: ThemeUIContextValue
  children: React.ReactNode
})

}

function NestedColorModeProvider({
  outerCtx,
  children,
}: {
  outerCtx: ThemeUIContextValue
  children: React.ReactNode
}) {
  const newTheme = useThemeWithAppliedColorMode({
    outerTheme: outerCtx.theme,
    colorMode: outerCtx.colorMode,
  })

  // Nested theme providers need to be rerendered after hydration for the correct
  // color mode to apply.
  const [needsRerender, setNeedsRerender] = useState(
    // Note: we could also check some "ssr-enabled" flag as an optimization for
    // SPAs, as deeply nested theme providers will also pay a performance penalty
    // for this SSR bug fix
    () => newTheme.config?.useLocalStorage !== false
  )

  useClientsideEffect(() => void setNeedsRerender(false), [])

  const themeColors = newTheme.rawColors || newTheme.colors
  const useCustomProperties = newTheme.config?.useCustomProperties

  const colorVars = useMemo(() => {
    if (useCustomProperties === false) {
      return {}
    }
    const colors = themeColors || {}

    return css(__createColorProperties(colors, colors.modes || {}))(newTheme)
  }, [newTheme, themeColors, useCustomProperties])

  return (
    <ThemeUIInternalBaseThemeProvider
      context={{ ...outerCtx, theme: newTheme }}
    >
      {/* Changed CSS Variables will cascade from the wrapping div */}
      {jsx('div', {
        'data-themeui-nested-provider': true,
        // the key here ensures that children will be rerendered after color
        // mode is read from localStorage
        key: Number(needsRerender),
        suppressHydrationWarning: true,
        css: colorVars,
        children,
      })}
    </ThemeUIInternalBaseThemeProvider>
  )
}

export const ColorModeProvider = ({
  children,