I just created a new React project using Vite and installed the latest version of Chakra UI (@chakra-ui/react@3.16.1). I previously used Chakra UI in older projects where the colorScheme prop was commonly used to style components like <Button>—for example:
<Button colorScheme="blue">Click me</Button>
However, in this version, colorScheme no longer seems to have any effect, and I couldn't find it mentioned in the updated documentation or type definitions.
Instead, I've come across examples using a colorPalette prop instead, which seems to work:
<Button colorPalette="orange" variant="surface">Click me</Button>
Can someone explain why colorScheme no longer works in v3.x? Has it been deprecated or replaced? I couldn't find a clear explanation in the official docs or changelogs.
The colorScheme prop has been changed to colorPalette in Chakra UI v3.x from v2.x. You can refer to this official document about Migration to v3.
ColorScheme Prop The colorScheme prop has been changed to colorPalette
You could only use colorScheme in a component's theme colorScheme clashes with the native colorScheme prop in HTML elements
<Button colorScheme="blue">Click me</Button>
You can now use colorPalette anywhere
<Button colorPalette="blue">Click me</Button>