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 colo

Answer 1

For Grommet v2 users, you can leverage the theme capabilities and define a customTheme as a js object with your desired colors, following the current structure:

const customTheme = {
  global: {
    colors: {
      // Overriding existing grommet colors
      brand: "#4D4CDB",
      "accent-1": "#6FFFB0",
      "accent-2": "#7FFFB0",
      "accent-3": "#8FFFB0",
      "accent-4": "#9FFFB0",
      "neutral-1": "#10873D",
      "neutral-2": "#20873D",
      "neutral-3": "#30873D",
      "neutral-4": "#40873D",
      focus: "#000",
      // Setting new colors
      blue: "#00C8FF",
      green: "#17EBA0",
      teal: "#82FFF2",
      purple: "#F740FF",
      red: "#FC6161",
      orange: "#FFBC44",
      yellow: "#FFEB59",
      // you can also point to existing grommet colors
      brightGreen: "accent-1",
      deepGreen: "neutral-2"
    }
  }
};
...

export const Example = () => (
  <Grommet theme={customTheme}>
     <Box background="orange" >
       <Text color="deepGreen">Custom Color</Text>
     </Box>
  </Grommet>
);

You can override any Grommet color that is mentioned in the docs in a similar fashion.

Wrapping your application with the Grommet component that is pointing to your customTheme object as shown on the example, will allow you full access to your custom colors across your application.

Answer 2

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 3

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.