# Themes

{% hint style="info" %}
This guide is an entry point for working with themes
{% endhint %}

## Concept

**To shadow** (**override**) - to create a file which will be used in the application instead of some other file. You can shadow files of any extension and any parent theme.

## Set up a parent theme

First of all, you will need to create a parent theme. A parent theme is a project that will be used as a base for a child theme, which will modify some of its functionality.

Let's have a parent theme configured as follows.

{% code title="./packages/@example/parent-theme/package.json" %}

```javascript
{
    "name": "@example/parent-theme",
    "mosaic": {
        "type": "theme",
        "themeAlias": "Parent"
    }
}
```

{% endcode %}

And let's put the following file there. This file we are going to override a bit later.

{% code title="./packages/@example/parent-theme/src/data-source.js" %}

```javascript
export const SOME_VALUE = 42;

export class DataSource {
    getData() {
        return ['Source data'];
    }
    
    run() {
        const data = this.getData();
        console.log(data);
    }
};

export default DataSource;
```

{% endcode %}

Also, let's use the functionality from above in that parent theme!

{% code title="./packages/@example/parent-theme/src/index.js" %}

```javascript
import DataSource from './data-source';

const dataSource = new DataSource();

dataSource.run()
```

{% endcode %}

The this parent theme will output the following logging. This will change when we introduce a child theme!

```javascript
['Source data']
```

## Set up a child theme

Then, let's create a **child theme**. A child theme will extend the parent theme's functionality and modify it.

We will configure the child theme as follows. We set the **parent theme** to the theme we have created above. It is important to [install](/install-an-extension/use-a-local-extension.md) the parent theme into this project!

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

```javascript
{
    "mosaic": {
        "type": "theme",
        "parentTheme": "@example/parent-theme"
    },
    "dependencies": {
        "@example/parent-theme": "file:./packages/child-theme"
    },
    "scripts": {
        "postinstall": "...-scripts link",
        "postupdate": "...-scripts link"
    }
}
```

{% endcode %}

## Shadow

In the child theme, we will create a file with the same path as above, and modify some functionality. 

{% code title="./src/data-source.js" %}

```javascript
import { 
    DataSource as BaseDataSource,
    SOME_VALUE
} from '@example/parent-theme';

export { SOME_VALUE };

export class DataSource extends BaseDataSource {
    getData() {
        return ['Data from the override'];
    }
};

export default DataSource;
```

{% endcode %}

We are not going to create any additional files in our child theme. We wanted to change a single thing and we did it! 

## Ensure all exports

Remember to re-export all of the initial file's exports, which you are not overriding. This way we ensure nothing will get lost after the modifications. This is done to the `SOME_VALUE` in the example above.

If you forget to re-export something, the application will lose any access to these values.

## Review project structure

See the full project structure below.

```bash
.
├── 📁 packages/
│   └── 📁 @example/
│       └── 📁 parent-theme/
│           ├── 📁 src/
│           │   ├── 📄 data-source.js
│           │   └── 📄 index.js
│           └── 📄 package.json
├── 📁 src/
│   └── 📄 data-source.js
└── 📄 package.json
```

## Demonstration

Let's now see what happens when we run the project. We are going to see the logging from the `run` method, which was kept intact. But the value of this logging is absolutely different!

```bash
['Data from the override']
```

As you see, during the project build resolution of all of the files fell back to the parent theme, except one file we have overridden. Our override changed the part of functionality we were willing to change and now the theme works differently. 

How cool is that! Find out more in the guide above.

{% content-ref url="/pages/-MXlBPSFH8ruPNSxxpzy" %}
[File shadowing](/themes/parent-themes.md)
{% endcontent-ref %}


---

# 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.mosaic.js.org/hands-on-guides/quick-start-1.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.