Editor storefrontu - Barvy

Panel nastavení barev v editoru storefrontu — 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:

: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í

Přizpůsobte barvy pozadí, textu, ikon a rámečku záhlaví.

Typografie

Nastavte rodiny písem a jejich velikost.

Vlastní CSS

Přepište libovolný styl vlastním CSS.

Vítejte v dokumentaci TWICE

Orientace v TWICE

Jak systém funguje

Editor storefrontu - Barvy

Pozadí

Text

Rámeček

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

Stav

CSS proměnné

Související články

Záhlaví

Typografie

Vlastní CSS

​Pozadí

​Text

​Rámeček

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

​Stav

​CSS proměnné

​Související články

Záhlaví

Typografie

Vlastní CSS

Pozadí

Text

Rámeček

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

Stav

CSS proměnné

Související články