Grommet UI — Custom Color Schemes

Question

I'm using grommet-ui with webpack and react. How do I set my own color options.

Is there a way to use my own custom colors/color schemes in place of predefined colors like colorIndex="neutral-1".

Answer 1

Yes, there is a way to override them, but it is currently not documented. I would start checking the colors here:

https://github.com/grommet/grommet/blob/master/src/scss/grommet-core/_settings.color.scss

For example, neutral-1 is used from this array

$brand-neutral-colors: (#5d0cfb, #7026ff, #767676) !default;

In your index.scss you can replace that (!default allows replacement):

$brand-neutral-colors: (#333333, #7026ff, #767676)

We are working on adding documentation for custom theme variables.

Answer 2

Check the pre-packed themes from https://github.com/grommet/grommet/tree/master/src/js/themes and choose the one that's closest to your goal
Then write your own, but only the parts you want to change
Roll your complete theme by merging the pre-packed with your prefs like so:

import React from 'reactn';
import { dark } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';
import { generate } from 'grommet/themes/base';
import { FormDown } from 'grommet-icons';

const localTheme = {

  global: {
    font: {
      family: 'Montserrat, Roboto, sans-serif',
      size: '14px',
      lineHeight: '20px'
    },
    colors: {
      brand: '#4040DB',
      focus: '#50c050',
      [dark-5]: '#aaaaaa',
      [dark-6]: '#bbbbbb',
      // [light-1]: '#ededed', // has error "light not defined"
    },
    input: {
      padding: '5px;',      // this renders a 4px padding!
    },
  },

  button: {
    hoverIndicator: {
      dark: { color: dark-6 },
      light: { color: 'light-3' },
      border: { radius: '5px' }
    },
    disabled: {
      color: dark-4,
      opacity: '0.6',
    },
    border: {
      width: '1px',
      color: 'rgb(238,238,238)',
      radius: '4px' 
    },
    padding: 'none',
  },

  select: {
    background: 'dark-1',
    icons: {
      color: 'rgb(238,238,238)',
      margin: '0px 0px',
      down: <FormDown />,
    },
    control: {
      open: {
        color: 'rgb(238,238,0)'
      }
    },
    options: {
      container: {
        pad: 'xxsmall',
        background: 'dark-1'
      },
      text: {
        margin: 'none',
        size: 'small',
        color: 'light-1',
      },
    },
    container: {
      extend: () => `
        flex-grow: 1;
      `,
    }
  },

  textArea: {
    // not working: background: ${ localTheme.global.colors[dark-2] }; // dark-2
    extend: () => `
      background: ${ '#333333' }; // dark-1
      margin: 2px 0px;
      height: 100px;

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

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

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

  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;
      }
    `,
  },
};

export default recipesTheme

Notice that some of the lines are failed experiments trying to overcome the flaky docs.
This exports a recipesTheme module to be used in the render method of App or whatever:

<Grommet full = { true } theme = { recipesTheme }>

There is this tool https://grommet-theme-builder.netlify.com/ that you can use to somehow see the effect of your changes.