# Parent theme system

## Create a parent theme

{% hint style="info" %}
**Theme** is a collection of components, which implements a presentation layer that is unique to your application. It should not contain any business logic. It should simply adopt extensions functionality to intended design of your application.
{% endhint %}

For application to be considered a theme, it must have a `package.json` field `mosaic.type` equal to `theme`

{% code title="package.json" %}

```javascript
{
    "mosaic": {
        "type": "theme",
        "themeAlias": "Parent"
    }
}
```

{% endcode %}

## Use a parent theme

Themes can stack on top of each other. A theme, which another theme is based on, is called a **parent theme**. 

To specify a parent theme, set the `package.json` field `mosaic.parentTheme` equal to intended parent theme's package name.

{% hint style="warning" %}
If you are selecting a new parent theme, it is not enough to just set the value of `mosaic.parentTheme`in `package.json`. The parent theme package should be listed among of your package's `dependencies`
{% endhint %}

The properly installed parent theme could look like this in `package.json`:

```javascript
{
    "name": "@me/child-theme",
    "dependencies": {
        "@example/parent-theme": "1.0.1"
    },
    "mosaic": {
        "type": "theme",
        "parentTheme": "@example/parent-theme"
    }
}
```

A theme can override files of a parent theme. Learn more about overriding a parent theme in the [File overrides](https://docs.mosaic.js.org/parent-themes#to-override-a-file-of-a-parent-theme) guide.