Which color mode API should be used for server-side rendering in Chakra UI?

Implementing a theme that supports light, dark, and system preferences requires careful synchronization between the server-rendered HTML and the client-side hydration process to avoid a flash of unstyled content (FOUC).

Current documentation describes two distinct approaches to theming and color mode management. One approach utilizes extendTheme and a specialized script in the document head to apply the preference before React hydrates. A newer approach shifts toward createSystem and defineConfig, often delegating the persistence layer to external providers like next-themes.

Because these two architectures use different providers, imports, and configuration objects, mixing them leads to runtime errors or hydration mismatches. There is uncertainty regarding which API is the recommended standard for new projects requiring strict SSR compatibility.

Technical Questions

• Does the createSystem architecture natively handle the pre-hydration script logic previously found in the extendTheme workflow?
• Which API provides the most reliable mechanism for ensuring the storage key remains consistent between the initial paint and the provider's state?