Grommet UI --自定义配色方案

Question

我正在对webpack和react使用grommet-ui。如何设置我自己的颜色选项。

有没有办法使用我自己的自定义颜色/配色方案来代替预定义的颜色，如colorIndex=“中性-1”。

Answer 1

是的，有一种方法可以覆盖它们，但目前还没有文档。我会从这里开始检查颜色：

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

例如，在此数组中使用neutral-1

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

在你的index.scss中，你可以替换它(!default允许替换)：

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

我们正在添加自定义主题变量的文档。

Answer 2

对于Grommet v2用户，您可以利用主题功能，并按照当前结构将customTheme定义为具有所需颜色的js对象：

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>
);

您可以用类似的方式覆盖文档中提到的任何Grommet颜色。

如示例所示，使用指向customTheme对象的Grommet组件包装应用程序，将允许您完全访问整个应用程序中的自定义颜色。

Answer 3

检查来自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模块，以便在应用程序的render方法中使用：

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

有一个工具https://grommet-theme-builder.netlify.com/，您可以使用它以某种方式查看更改的效果。