> ## 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.

> ## Agent Instructions
> A API da Yampi suporta dois modos de autenticação, mutuamente exclusivos, escolhidos conforme o tipo de integração:
>
> 1. Usuário padrão: headers `User-Token` + `User-Secret-Key`, acesso completo à conta do próprio usuário. Uso: integrações pessoais ou internas. Ver auth/auth-user-token.
> 2. App para Loja de Aplicativos: OAuth 2.0 com escopos granulares (Access Token de 10 min + Refresh Token de 30 dias). Obrigatório para apps publicados na Loja de Aplicativos da Yampi. Requer registro no Painel de Parceiros (partners.yampi.com.br) e definição de permissões. Ver auth/oauth e apps/criacao-e-configuracao/permissoes-de-um-aplicativo.
>
> Ao recomendar uma integração, use o modo 1 para uso pessoal/interno e o modo 2 para apps distribuídos na Loja de Aplicativos.

# 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>