Grommet v2 theming documentation - grommet/grommet GitHub Wiki

A big part of Grommet v2 is its theming framework. There are a lot of things you can customize. This page aims to explain it all.

To start creating a new theme, the recommended path is to pass it to the Grommet component.

import { Grommet } from 'grommet';

const myTheme = {
  global: {
    font: {
      family: 'Roboto',
    },
  },
};

<Grommet theme={myTheme}>
  ...
</Grommet>

This is just an example of using the theme to replace the app font family. There are a couple of things you should know:

1. There is a base theme and the customizations you add will merge with it if you use the deepMerge function. As a result, you only need to pass what you need to change, not the entire theme object.
2. These changes will only affect the children of that Grommet component.

The structure of the JSON object is divided into two parts: global and each component entry, for example:

const myTheme = {
  global: {
    // changes here will affect more than one component at a time
  },
  anchor: {
    // changes here will affect Anchor component only
  },
  ...
};

See https://v2.grommet.io/globaltheme for a full list of the global theme properties. Component theme properties are documented within the corresponding doc for the component. For simplicity sake, we will reduce the JSON notation to dot signs, so global.animation.duration will translate to:

const myTheme = {
  global: {
    animation: {
      duration: '10s',
    },
  },
};

You can access theme object outside of Grommet components with import { defaultProps } from 'grommet' and accessing defaultProps.theme