# Create a Theme Package

As stated previously, rather than using the default starter theme that we selected during the setup process (i.e. `@frontity/mars-theme`) we are instead going to develop a custom theme from scratch. To do this we need to create a new package for our theme's code. As it's our first ever theme let's call our theme "my-first-theme".

> **NOTE:** Before continuing you may need to stop the dev server process that we ran previously with *CONTROL+C*.

To create a package run the following command in the terminal:

```bash
> npx frontity create-package my-first-theme
```

You will be prompted to specify the namespace to use. Since you are creating a theme you can use the default `theme`, so you can just press *Enter* at this point.

![Creating a package](https://frontity.org/wp-content/uploads/2021/04/frontity-tutorial-part1img2.png)

When the process is complete you will have a new directory called `/packages/my-first-theme`. This is where we will be doing most of our work to build the theme.

![Structure of a newly created package](https://frontity.org/wp-content/uploads/2021/04/frontity-tutorial-part1img3.png)

The first thing we'll do is to remove `@frontity/mars-theme` from our settings and replace it with `my-first-theme`.

Remove the following from the file `frontity.settings.js`:

```javascript
// File: /frontity.settings.js

{
  name: "@frontity/mars-theme",
  state: {
    theme: {
      menu: [
        ["Home", "/"],
        ["Nature", "/category/nature/"],
        ["Travel", "/category/travel/"],
        ["Japan", "/tag/japan/"],
        ["About Us", "/about-us/"]
      ],
      featured: {
        showOnList: false,
        showOnPost: false
      }
    }
  }
},
```

And replace it with:

```javascript
// File: /frontity.settings.js

{
  name: "my-first-theme"
},
```

We've now told Frontity to use our new theme rather than "mars-theme". Save the file and then run this command again:

```bash
> npx frontity dev
```

If you see this in your browser then everything is working. Hooray! 🙌

![Frontity in the browser](https://frontity.org/wp-content/uploads/2021/04/frontity-tutorial-part1img4.png)

{% hint style="success" %}
**Check you're on the right track** by comparing your changes with [the ones in this commit](https://github.com/frontity-demos/tutorial-hello-frontity/commit/7733a6c3d9886cf4a86397e8ba1a668fcd3cb928).
{% endhint %}


---

# 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://tutorial.frontity.org/part1-creating-a-custom-theme/create-a-theme-package.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.