How to change active border colour of grommet v2 FormField?

Question

I'm trying to create app theme with grommet v2. I'm using Form and FormField from grommet components to crate froms. When FormField is active the bottom-border changes colour to default accent-1 and I can't change this border colour.

I have theme.js file which I'm putting to theme property in component. Everything connected to theme works well (buttons colours etc.) I was tried to change accent-1 colour but there's a lack in Documentation about this.

in theme.js

export const theme = {
   global: {
      colors: {
         brand: colors.primary,
         text: colors.white
      },
      focus: {
         border: {
            color: colors.primary
         },
         accent: {
            1: "#EEEEEE"
         },
         borderBottom: colors.primary
      }
   },
}

I expect to change this colour to grey but it's still default colour

score 3 · Answer 1 · answered Aug 02 '19 at 05:31

I also had this issue. I was able to sort of solve it by adding a global color called focus. It doesn't look like you are able to customize the colors of the FormField component.

This works:

const theme = {
  global: {
    colors: {
      brand: '#0CA7D3',
      grey: '#DDDBE0',
      grey2: '#9A9A9A',
      focus: '#0CA7D3' // added focus color
    }
  },
  formField: {
    label: {
      size: 'small'
    }
  }
}

Notice that this may change the focus color across other components since this is a global color.

This does not work:

const theme = {
  global: {
    colors: {
      brand: '#0CA7D3',
      grey: '#DDDBE0',
      grey2: '#9A9A9A'
    }
  },
  formField: {
    label: {
      size: 'small'
    },
    colors: {
      focus: '#0CA7D3' // tried adding a colors property with a focus property inside of it
    }
  }
}

Source Code

Looking at the source code for the FormField component, it looks like they define borderColor like this:

let borderColor;
if (focus && !normalizedError) {
  borderColor = 'focus';
} else if (normalizedError) {
  borderColor = (border && border.error.color) || 'status-critical';
} else {
  borderColor = (border && border.color) || 'border';
}

Here is a link to the component code on Github: FormField.js

Notice in the normalizedError case how they use border.error.color which is the property from the theme object in Grommet. In the focus case, they set borderColor to focus.

It seems the component does not support specifying a focus color on the FormField component from the theme object.

score 0 · Answer 2 · answered Oct 21 '19 at 13:52

I used styled-components' extend like so:

textInput: {
  extend: `
    background: ${ '#333333' }; // dark-1
    margin: 2px 0px;

    &:hover {
      background: ${ '#555555' }; // dark-2
    }

    &:focus {
      background: ${ '#555555' }; // dark-2
      color: ${ '#ffffff' };
    }

    &::placeholder {
      color: dark-5;
      font-style: italic;
      font-weight: 200;
    }
  `,
},

score 0 · Answer 3 · answered Jul 07 '20 at 21:41

Here are couple of ideas on how to control the focus color from your theme:

Define your own color set on global.colors and pick a color form the set to be the focus color:

const customTheme = {
  global: {
    colors: {
      deepBlue: "#003366",
      focus: "deepBlue",
    }
  }
};

Change the focus color object directly on the theme:

const customTheme = {
  global: {
    colors: {
      focus: "#000000"
    }
  }
};

Use the following Markup with your customTheme and you should see the focus color changing accordingly:

    <Grommet theme={customTheme}>
      <Box pad="small" gap="medium" width="medium">
        <TextInput placeholder="hi" />
        <Anchor href="">Anchor</Anchor>
        <Button label="Button" onClick={() => {}} />
      </Box>
    </Grommet>

Note: grommet colors also accepts dark/light objects, read more here.

For a live story example on the grommet focus behavior go here.

How to change active border colour of grommet v2 FormField?

3 Answers3

This works:

This does not work:

Source Code