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

# Settings globais

> settings.schema.json — cores, fontes e tokens do painel Tema no editor.

Arquivo: **`config/settings.schema.json`**. O validador exige esse caminho. Não coloque o arquivo na raiz do tema.

Define o painel **Tema** no editor (sidebar). Ao instalar o tema, os `defaults` viram `settingsData` da loja.

***

## Estrutura

```json theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  "groups": [
    {
      "name": "Cores",
      "settings": [
        {
          "id": "color_primary",
          "type": "color",
          "label": "Cor primária",
          "default": "#7c3aed"
        }
      ]
    }
  ],
  "defaults": {
    "color_primary": "#7c3aed"
  }
}
```

***

## Tipos de campo

| type | Uso |
| - | - |
| `color` | Cor hex |
| `select` | Lista de opções |
| `range` | Slider numérico (`min`, `max`, `step`, `unit`) |
| `text` | String curta |
| `textarea` | Texto longo |
| `image` | URL de imagem |
| `checkbox` | Boolean |
| `url` | Link |
| `header` | Separador visual (`content`) |

***

## Aplicação no runtime

O `ThemeSettingsProvider` lê `settingsData` do servidor e aplica CSS variables **no escopo do canvas/preview** (`.cx-theme-scope` / `ThemePreviewScope`), **não** no chrome do editor (topbar, sidebars, inspetor).

Isso evita que a cor primária da loja pinte botões como Salvar e Publicar. A plataforma isola o tema; **o CSS do seu tema também deve isolar** — nunca use `:root` ou `document.documentElement` para tokens do tema.

Guia completo: **[Escopo CSS — tema vs editor](https://docs-loja.usecorvex.com.br/themes/css-scoping.md)**.

Variáveis comuns:

| Setting id | CSS var |
| - | - |
| `color_primary` | `--brand-primary` |
| `color_secondary` | `--accent-primary` |
| `color_text` | `--text-primary` |
| `color_background` | `--surface-app` |

***

## Usar globals dentro de sections

Para campos como “Cor de fundo = Usar global: Destaque”, veja **[Settings globais nas sections](https://docs-loja.usecorvex.com.br/sections/theme-global-settings.md)**.

Resumo:

1. Defina `color_secondary` (ou outro id) em `config/settings.schema.json`
2. Na section: `"themeLink": "color_secondary"` + default `"@theme.color_secondary"`
3. No JSX: `const bg = useThemeSetting(backgroundColor, '#8758F0')`

***

## Onde seguir

* [Campo de produto](https://docs-loja.usecorvex.com.br/schema/fields/product.md) — o editor guarda o id; [Product](https://docs-loja.usecorvex.com.br/data/resources/product.md) é o objeto de `get`
* [Lista de coleções](https://docs-loja.usecorvex.com.br/schema/fields/collection-list.md) — ids de categoria; `categories` e `collections` são o mesmo cliente
* [Esquema de cores](https://docs-loja.usecorvex.com.br/schema/fields/color-scheme.md)
* [Settings globais nas sections](https://docs-loja.usecorvex.com.br/sections/theme-global-settings.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.