How do I change color of placeholder?

[rwdigia]

I've tried to style the placeholder i my theme, but I can't seem to get it right.

...
      Input: {
        variants: {
          filled: (props) => ({
            field: {
              bg: props.colorMode === 'dark' ? '#474747' : '#F8FBF5',
              _placeholder: {
                color: props.colorMode === 'dark' ? '#474747' : '#F8FBF5'
              }
            }
          })
        },
        defaultProps: {
          size: 'md',
          variant: 'filled'
        }
      }
...

[csandman]

Ah I see what happened, so by default there is no specific placeholder color applied to the theme for Chakra's Input component, so I don't pull the placeholder color from there. The best way to style it is to use the chakraStyles prop:

import { useColorModeValue } from "@chakra-ui/react";
import { Select } from "chakra-react-select";
import { groupedOptions } from "./data/data";

const Example = () => {
  const placeholderColor = useColorModeValue("#F8FBF5", "#474747");

  return (
    <Select
      isMulti
      name="colors"
      options={groupedOptions}
      placeholder="Select some colors..."
      chakraStyles={{
        placeholder: (provided) => ({
          ...provided,
          color: placeholderColor
        })
      }}
    />
  );
};

https://codesandbox.io/s/chakra-react-select-placeholder-color-ut3dpj?file=/example.js