# @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](https://api.frontity.org/frontity-packages/features-packages/html2react), so all the `<img>` tags are converted into the [`<Image />` component](https://api.frontity.org/collections-packages/components#image) and the \<iframe> tags into the [`<Iframe />` component](https://api.frontity.org/collections-packages/components#iframe).