问题
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".
回答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.
回答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.
来源:https://stackoverflow.com/questions/38272509/grommet-ui-custom-color-schemes