# Theme Color Presets

A color preset is what identifies a website or a group or content-related websites.

A preset usually includes a:

- **primary color**: the color that visually identifies the website. It will be applied to heading H1 elements and the website title in the left navigation.
- **hero banner**: a background image with certain visual patterns to be used in the website's landing page. The banner should have the same or similar colors to the primary color.

Here is the list of the available presets:

- `base`
- `merchantCenterDeveloperDocs`
- `merchantCenterUserDocs`
- `platformDeveloperDocs`

## Usage

In your `gatsby-config.js`:

```js
const colorPresets = require('@commercetools-docs/gatsby-theme-docs/color-presets');

module.exports = {
  // ... other site config
  plugins: [
    ...configureThemeWithAddOns({
      // ... other theme config
      colorPreset: colorPresets.platformDeveloperDocs.key,
    }),
  ],
};
```
