reactjs - 索环 UI -- 自定义配色方案

Question

我正在使用带有 webpack 的 grommet-ui 并做出反应。如何设置自己的颜色选项。

有没有办法使用我自己的自定义颜色/配色方案来代替预定义的颜色，如 colorIndex="neutral-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你可以替换它（！默认允许替换）：

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

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

如示例所示，使用指向您的 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模块以用于 App 的渲染方法或其他任何内容：

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

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