Changing color of text in <Input/>

[spidertwin2]

How can I change the color of input text in <Input />? I tried using colorScheme, but it doesn't change the default value.

<Input
    placeholder="Enter email"
    m="3% 0"
    variant="unstyled"
    colorScheme="blue"
    isRequired="true"
/>

What I want is - when user enters his/her email, it should appear in blue.

Thank you!

[chr-ge]

To change the input text color add color="blue.500"

<Input
    placeholder="Enter email"
    m="3% 0"
    color="blue.500"
    variant="unstyled"
    colorScheme="blue"
    isRequired
/>

[spidertwin2]

Worked like a charm! Merci bien

[spidertwin2]

@chr-ge I am unable to apply blue as defaultProps to <Input/>. However, variant: "unstyled" works.

theme.js

import { extendTheme } from "@chakra-ui/react";

const Input = {
  defaultProps: {
    color: "blue.400",
    colorScheme: "blue",
    variant: "unstyled",
  },
};

const customTheme = extendTheme({
  components: {
    Input,
  },
});

export default customTheme;

Thanks!

[chr-ge]

You need to specifiy the field part:

const Input = {
  parts: ['field'],
  baseStyle: {
    field: {
      color: "blue.400"
    }
  },
  defaultProps: {
    colorScheme: "blue",
    variant: "unstyled"
  }
};

[spidertwin2]

Worked perfectly! :)