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

> Prohlížejte, kopírujte a hromadně upravujte všechna aktivní nastavení motivu jako CSS proměnné. Resetujte celý motiv na výchozí hodnoty.

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

Editor storefrontu > Styl motivu

Panel Styl motivu zobrazuje každé aktivní nastavení motivu jako CSS proměnnou v bloku kódu jen pro čtení. Použijte jej k prohlížení aktuálních hodnot, kopírování proměnných pro použití ve [Vlastním CSS](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/custom-css.md) nebo k hromadné úpravě více nastavení najednou.

## Reset celého motivu

Klikněte na **Resetovat celý motiv** pro vrácení všech nastavení napříč všemi panely na výchozí motiv TWICE Commerce. Jde o jedinou akci, která ovlivní barvy, typografii, rozložení, tlačítka, vstupy, kalendář, karty nabídek a všechna ostatní nastavení motivu.

> [!WARNING]
>
> Reset motivu zahodí všechna vaše přizpůsobení. Reset se projeví na živém storefrontu okamžitě po uložení, neexistuje koncept ani krok publikování, na který by bylo možné se vrátit, a uložený reset nelze vzít zpět. Chcete-li neuložený reset zrušit, zavřete editor a v dialogu neuložených změn zvolte **Zahodit**.

## CSS motivu

Blok CSS zobrazuje pravidlo `:root` se všemi proměnnými motivu a jejich aktuálními hodnotami. Můžete:

* **Kopírovat**: kliknutím na ikonu kopírování zkopírujete všechny proměnné do schránky.
* **Odemknout**: kliknutím na ikonu zámku přepnete do režimu úprav.
* **Upravit**: hodnoty proměnných měňte přímo v textovém poli. Použijte standardní syntaxi CSS.
* **Použít změny**: zpracuje upravené CSS a aktualizuje odpovídající nastavení motivu.

```css Příklad výstupu theme={null}
:root {
  --storefront-logo-width: 120px;
  --storefront-layout-page-width: 1400px;
  --storefront-layout-margin: 32px;
  --storefront-heading-font-family: Inter;
  --storefront-heading-font-scale: 100%;
  --storefront-body-font-family: Inter;
  --storefront-body-font-scale: 100%;
  --storefront-color-background: #FFFFFF;
  --storefront-color-text: #111826;
  --storefront-button-background-color: #212121;
  --storefront-button-border-radius: 6px;
  /* ... všechny ostatní proměnné motivu */
}
```

> [!NOTE]
>
> Úprava CSS proměnné v tomto panelu aktualizuje stejné nastavení jako odpovídající vizuální panel. Například změna `--storefront-button-border-radius` zde má stejný účinek jako posun posuvníku Poloměr rohu v panelu Tlačítka.

## Související články

> **[Vlastní CSS](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/custom-css.md)**
>
> Přidejte do storefrontu vlastní pravidla CSS.

> **[Barvy](https://www.twicecommerce.com/docs/cs/sales-channels/online-store/theme-editor/settings/colors.md)**
>
> Definujte barevnou paletu storefrontu.


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