Chakra UI colorScheme prop on button

Question

i extended the theme provider in chakra_ui

import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";

import App from "./App";

const theme = extendTheme({
  colors: {
    brand: {
      50: "#44337A",
      100: "#B794F4"
    }
  }
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
  rootElement
);

I used the Button Component like and set the colorScheme prop to the value my theme has:

 <Button size="sm" colorScheme="brand.100">
    Click Me
  </Button>

it produced the following in css: background: brand.50.500;. so it does not apply the color, any problem??

i noticed something, without the .number: e.g .50 or .100... the brand does not work, but other inbuilt colors work.

https://codesandbox.io/s/infallible-allen-1k0tx?file=/src/App.js:257-333

Answer 1

The colorScheme just accepts the color name. In your case, it will be colorScheme="brand".

If we inspect the way chakra works to generate the colorScheme for a solid button, we can notice that it calls ${c}.500. It means that when you create your brand color scheme, you need to specify one color for 500 and you're missing that in your code example.

import React from "react";
import ReactDOM from "react-dom";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";

import App from "./App";

const theme = extendTheme({
  colors: {
    brand: {
      50: "#44337A",
      100: "#B794F4",
      500: "#B794F4", // you need this
    }
  }
});

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <App />
    </ChakraProvider>
  </React.StrictMode>,
  rootElement
);

And when you're calling the button you just need to:

<Button size="sm" colorScheme="brand">
  Click Me
</Button