Grommet Interface - Custom Color Schemes

Question

I use grommet-ui with webpack and react. How to set your own color options.

Is there a way to use my own color schemes / colors instead of predefined colors such as colorIndex = "neutral-1".

Answer 1

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

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

For example, neutral-1used from this array

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

In yours index.scssyou can replace this (! Default allows replacement):

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

.

Answer 2

https://github.com/grommet/grommet/tree/master/src/js/themes ,
, ,
, :

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

, - , .
recipesTheme - :

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