# @frontity/mars-theme

Mars theme is meant to be considered a starter theme or a theme to show people how to use some of Frontity functionalities. You can check out its **code** and structure on this [GitHub repository](https://github.com/frontity/frontity/tree/dev/packages/mars-theme) and find it on [npm](https://www.npmjs.com/package/@frontity/mars-theme).

You can also find a detailed guide to learn how both Frontity and `mars-theme` work on "[Understanding Mars Theme](https://docs.frontity.org/guides/understanding-mars-theme-1)".

{% hint style="info" %}
Have a look at this episode of Frontity Talks where we talk about the `mars-theme`: 📺 [Frontity Talks 2020-04 - mars-theme \[27:52\]](https://www.youtube.com/watch?v=e6n1j4gwFjQ\&t=1672s).
{% endhint %}

## Demo

![](https://frontity.org/wp-content/uploads/2021/04/screenshot-mars-theme-demo.png)

You can check out all the features in this [**theme demo**](https://mars.frontity.org/)**.**

## Settings

You can configured it via the `frontity.settings.js` file. The theme options can be specified in the `state.theme` property.

Here you have an example of a possible configuration (each setting is explained later in detail):

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

All the settings that can be set under `state.theme` and their description:

| Key                      | Description                                 | Default value |
| ------------------------ | ------------------------------------------- | ------------- |
| menu                     | Menu links to display in the header         | \[]           |
| featuredMedia.showOnList | Whether to show featured image on list view | true          |
| featuredMedia.showOnPost | Whether to show featured media on post view | true          |

## API Reference

### Actions

There are some actions used along the theme that you may need useful:

#### actions.theme.toggleMobileMenu

It changes the status of `state.theme.isMobileMenuOpen` , which lets you open/close the mobile menu.

#### actions.theme.closeMobileMenu

It changes `state.theme.isMobileMenuOpen` to `false`, so it closes the mobile menu.

### Libraries

This theme doesn't have its own libraries, but it includes the image and iframe processor of [@frontity/html2react](/frontity-packages/features-packages/html2react.md), so all the `<img>` tags are converted into the [`<Image />` component](/frontity-packages/collections-packages/components.md#image) and the \<iframe> tags into the [`<Iframe />` component](/frontity-packages/collections-packages/components.md#iframe).


---

# 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://api.frontity.org/frontity-packages/themes-packages/frontity-mars-theme.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.