1

What variable do I have to set in my theme to change the base font color? Something like:

const theme = deepMerge(base, {
  global: {
    font: {
      family: 'sans-serif',
    },
    color: '#eeeeee',
  },
});

or

const theme = deepMerge(base, {
  global: {
    font: {
      family: 'sans-serif',
      color: '#eeeeee',
    },
  },
});
grabury
  • 4,797
  • 14
  • 67
  • 125

3 Answers3

0

I will start using Grommet soon and am researching about it.

Maybe have a look here, this might be helpful: https://github.com/atanasster/grommet-nextjs/issues/1

<Button theme={{ global: { colors: { darkBackground: { text: 'red' } } } }} primary={true} label='Submit' onClick={() => {}} />
xti
  • 1
  • Please be mindful you are not sharing the Grommet Button API, the project you shared isn't grommet-core. Grommet Button, doesn't accept a prop of `theme`. – Shimi Jan 07 '21 at 19:47
0

The basic text color would be set on global.colors.text on your customTheme object as follows:

const customTheme = {
  global: {
    colors: {
      // all colors could be either a string or a dark and light object
      text: {
        dark: 'teal',
        light: 'purple',
      },
      // or simply as a string:
      // text: "#456789",
    },
  },
};

const Example = () => (
  <Grommet theme={customTheme}>
    <Box gap="medium" pad="small">
      <Text>
         Custom text color according to how it is defined on 
         global.colors.text
      </Text>
    </Box>
  </Grommet>
);

For more extensive color settings, you can also define your own custom colors on global.colors or override any color that is mentioned on the grommet documentations.

Shimi
  • 1,178
  • 8
  • 18
0

Also make sure to set global.colors.background. If not set, global.colors.text will have no effect.

Anatoly
  • 20,799
  • 3
  • 28
  • 42
Stefan
  • 1