# Themes

The project introduces the concept of "themes".

{% 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 `scandipwa.type` equal to `theme`. For example:

```javascript
{
    "scandipwa": {
        "type": "theme"
    }
    ...
}
```

The theme is what you compile into running website, therefore it also contains `start` and `build` scripts. You can read more about them in the "[Getting started](https://docs.create-scandipwa-app.com/getting-started/getting-started#scripts)" section.

## Parent theme

Themes can stack on top of each another. A theme which another theme is based on is called a **parent theme**. To specify a parent theme, set the `package.json` field `scandipwa.parentTheme` equal to intended parent theme package name.

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

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

```javascript
{
    "dependencies": {
        "@scandipwa/scandipwa": "1.0.1",
        ...
    },
    "scandipwa": {
        "type": "theme",
        "parentTheme": "@scandipwa/scandipwa",
        ...
    },
    ...
}
```

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

## Theme Webpack alias

In previous versions of ScandiPWA, the import from parent theme looked the following way:

```javascript
import { AddToCart } from 'SourceComponent/AddToCart/AddToCart.component';
```

You may have noticed the `SourceComponent` alias appearing in the begging of the import. This allows to define shorter import paths. This alias is composed from a folder inside of the `src` and the prefix of the theme. The `@scandipwa/scandipwa` theme has a prefix `Source` . The `src` folders which support this mapping are:

| Folder alias | Path from theme root | Purpose                     |
| ------------ | -------------------- | --------------------------- |
| Style        | `./src/style`        | Global styles               |
| Component    | `./src/component`    | React component definitions |
| Route        | `./src/route`        | Router pages definitions    |
| Util         | `./src/util`         | Utility functions           |
| Query        | `./src/query`        | GraphQL query definitions   |
| Type         | `./src/type`         | React prop-type definitions |
| Store        | `./src/store`        | Redux store definitions     |

To define a Webpack alias for your theme, you are required to define the `scandipwa.themeAlias` field in `package.json`. The value you define in this field will be used as your theme prefix. You can do it like this:

```javascript
{
    "scandipwa": {
        "type": "theme",
        "themeAlias": "Source",
        ...
    }
    ...
}
```

{% hint style="info" %}
Setting the Webpack alias for a theme which is not used as a parent is not required. This field **only** comes into play, when a theme is selected as a parent theme for another one.
{% endhint %}

There is however, another way to import files from a parent theme. You can always import the file from the NPM package of your parent theme directly. Like so:

```javascript
import { AddToCart } from '@scandipwa/scandipwa/src/component/AddToCart/AddToCart.component'; 
```

Both of these approaches are valid, but for consistency, we recommend using Webpack aliases.