# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.create-scandipwa-app.com/themes/extensions-and-themes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.