> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Tema

> Expõe as configurações e parâmetros do tema ativo, incluindo seções e estilo visual configurado no Editor de Código.

Módulo Vuex inicializado a partir de `window.themeConfig` no carregamento da página. Disponibiliza os parâmetros do tema para todos os componentes via getter `themeStyle`, usado extensivamente pelos [mixins](/editor-codigo/mixins/product-card-theme) e componentes da vitrine.

## Getters

| Getter       |   Tipo   | Descrição                                                                                                          |
| :----------- | :------: | :----------------------------------------------------------------------------------------------------------------- |
| `themeStyle` | `Object` | Parâmetros visuais do tema (`window.themeConfig.theme.params`). Equivale a `pageConfig.data.theme.params` no Twig. |

## Principais propriedades de `themeStyle`

| Propriedade                |    Tipo   | Descrição                                                            |
| :------------------------- | :-------: | :------------------------------------------------------------------- |
| `color_general_primary`    |  `String` | Cor primária do tema.                                                |
| `color_general_secundary`  |  `String` | Cor secundária do tema.                                              |
| `color_general_background` |  `String` | Cor de fundo geral da loja.                                          |
| `fonts_texts_family`       |  `String` | Família de fonte para textos.                                        |
| `fonts_titles_family`      |  `String` | Família de fonte para títulos.                                       |
| `buttons_general_format`   |  `String` | Formato de borda dos botões (`'square'`, `'rounded'`, `'pill'`).     |
| `highlight_type_payment`   |  `String` | Método de pagamento destacado: `'promotional'`, `'pix'`, `'billet'`. |
| `show_add_to_cart_button`  | `Boolean` | Exibe botão de adicionar ao carrinho na vitrine.                     |
| `grids_product_name_size`  |  `String` | Tamanho da fonte do nome do produto na vitrine.                      |
| `grids_product_price_size` |  `String` | Tamanho da fonte do preço do produto na vitrine.                     |
| `show_review_average`      | `Boolean` | Exibe média de avaliações na vitrine.                                |
| `show_max_installment`     | `Boolean` | Exibe parcelamento máximo na vitrine.                                |

## Uso

```js theme={"system"}
import { mapGetters } from 'vuex';

export default {
    computed: {
        ...mapGetters('theme', ['themeStyle']),

        primaryColor() {
            return this.themeStyle?.color_general_primary;
        },

        isRoundedButtons() {
            return this.themeStyle?.buttons_general_format === 'rounded';
        },
    },
};
```

<Tip>
  Use o [mixin productCardTheme](/editor-codigo/mixins/product-card-theme) para acessar as configurações de vitrine já transformadas em computed properties prontas para uso.
</Tip>