The colorScheme props doesn't apply to Link component

🐛 Bug report

When supplying a colorScheme to a <Link> component, as described in the documentation, the color does not seem to change. This can only be done by setting the color prop to a specific color key value.

💥 Steps to reproduce

1. Go to your documentation: https://chakra-ui.com/docs/components/link
2. Try to change the color scheme of the first example, like such: <Link colorScheme="red">Hello world</Link>
3. Nothing happens

💻 Link to reproduction

See previous

🧐 Expected behavior

I’d expect the color to change, as well as have a hover color set that’s different from the main color

🧭 Possible Solution

I’m not quite sure where this should be added - I’m guessing the layout package?

🌍 System information

Software	Version(s)
Chakra UI	1.0.3
Browser	Brave 1.18.75
Operating System	MacOS 11.0.1

📝 Additional information

• None

[dodas]

Hey @cereallarceny.

This probably won’t be implemented in Chakra’s default theme. We can improve the docs to clarify that - either some note, or completely omit those props from Link’s prop table.

However, you can extend the theme and implement it yourself:

export const theme = extendTheme({
  components: {
    Link: {
      variants: {
        // you can name it whatever you want
        primary: ({ colorScheme = "blue" }) => ({
          color: `${colorScheme}.500`,
          _hover: {
            color: `${colorScheme}.400`,
          },
        }),
      },
      defaultProps: {
        // you can name it whatever you want
        variant: "primary",
      },
    },
  },
})

and use it like this:

<Link colorScheme="purple" href="https://google.com">
  This is a purple link
</Link>

[cereallarceny]

THAT makes more sense. I expected that prop to exist due to incorrect docs. I’ll close this issue now.