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

# Editor storefrontu - Barvy

> Definujte barevnou paletu použitou napříč storefrontem: barvy pozadí, textu, rámečků, ovládacích prvků a stavů.

![Panel nastavení barev v editoru storefrontu](https://mintcdn.com/twicecommerce/lZhc_tO8u1u_bL0Q/images/theme-editor-colors.webp?fit=max\&auto=format\&n=lZhc_tO8u1u_bL0Q\&q=85\&s=bf23603adca78060887ae25a26283796)

Editor storefrontu > Barvy

Panel Barvy definuje barevnou paletu použitou na každé stránce vašeho storefrontu. Změny se projeví globálně, úprava barvy zde aktualizuje každý prvek, který na ni odkazuje.

Každá barva přijímá hexadecimální hodnotu (např. `#111826`). Kliknutím na vzorek otevřete výběr barvy, nebo zadejte hex kód přímo.

## Pozadí

| Nastavení | Výchozí | Popis |
| - | - | - |
| Hlavní | `#FFFFFF` | Pozadí hlavní stránky. |
| Sekundární | `#F7F9FA` | Alternativní plochy, například karty a boční panely. |
| Kontrast | `#111826` | Vysoce kontrastní plochy, jako je záhlaví nebo tmavé sekce. |

## Text

| Nastavení | Výchozí | Popis |
| - | - | - |
| Hlavní | `#111826` | Nadpisy a hlavní text. |
| Sekundární | `#374152` | Podpůrný text, popisky a popisy. |
| Kontrast | `#FFFFFF` | Text na kontrastně zbarveném pozadí. |

## Rámeček

| Nastavení | Výchozí | Popis |
| - | - | - |
| Hlavní | `#E4E6EB` | Oddělovače, rámečky karet a oddělovače sekcí. |
| Sekundární | `#F2F3F5` | Jemné oddělovače a vedlejší dělicí čáry. |

## Zaškrtávací políčka a rádiové tlačítka

| Nastavení | Výchozí | Popis |
| - | - | - |
| Barva | `#374152` | Výchozí (nevybraná) barva zaškrtávacích políček a rádiových tlačítek. |
| Vybraná barva | `#111826` | Barva, když je zaškrtávací políčko nebo rádiové tlačítko vybrané. |

## Stav

| Nastavení | Výchozí | Popis |
| - | - | - |
| Chyba | `#D92D20` | Chyby validace, indikátory vyprodaných položek a další chybové stavy. |

## CSS proměnné

Každá barva odpovídá CSS proměnné, na kterou se můžete odkázat v části [Vlastní CSS](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/custom-css.md):

```css CSS proměnné theme={null}
:root {
  --storefront-color-background: #FFFFFF;
  --storefront-color-background-secondary: #F7F9FA;
  --storefront-color-background-contrast: #111826;
  --storefront-color-text: #111826;
  --storefront-color-text-secondary: #374152;
  --storefront-color-text-contrast: #FFFFFF;
  --storefront-color-border: #E4E6EB;
  --storefront-color-border-secondary: #F2F3F5;
  --storefront-selection-control-color: #374152;
  --storefront-selection-control-selected-color: #111826;
  --storefront-color-error: #D92D20;
}
```

## Související články

> **[Záhlaví](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/header-bar.md)**
>
> Přizpůsobte barvy pozadí, textu, ikon a rámečku záhlaví.

> **[Typografie](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/typography.md)**
>
> Nastavte rodiny písem a jejich velikost.

> **[Vlastní CSS](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/custom-css.md)**
>
> Přepište libovolný styl vlastním CSS.


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