Stylování obsahu
6. 4. 2026
Při ladění designu webu v šabloně WpKit a builderu Breakdance se většinou spoléháme na pohodlné „naklikávání“ barev přímo v grafickém rozhraní editoru. Je to rychlé, vizuální a intuitivní. Existují však situace – například když píšete vlastní CSS v Code Blocku nebo ladíte specifické interakce – kdy na barvy z editoru přímo nedosáhnete.
I v takovém případě je ale klíčové zachovat pevnou vazbu na váš barevný systém a primární brandovou barvu. K tomu vám poslouží CSS proměnné (CSS variables).
Breakdance builder totiž ukládá základní barvy přímo do systému jako proměnné, které můžete volat kdekoliv ve svých vlastních stylech nebo elementech.
Primární barva jako základ všeho
Hlavní barva vašeho webu (tzv. Brand Color) je v systému vždy dostupná pod jedním konkrétním názvem. Nemusíte si pamatovat HEX kód, stačí použít:
var(--bde-brand-primary-color);
Tento přístup má obrovskou výhodu: pokud se v budoucnu rozhodnete změnit odstín brand barvy, změníte ho na jednom místě v nastavení Breakdance a proměnná se automaticky aktualizuje na celém webu.
Tip pro profíky: Dynamické podbarvení pomocí color-mix
Chcete vytvořit jemné pozadí pod tlačítko nebo sekci, které bude vycházet z vaší brandové barvy? Nemusíte v paletě vytvářet desítky nových odstínů. Využijte moderní CSS funkci color-mix, která vezme vaši primární barvu a „namíchá“ ji s bílou:
/* Vytvoří jemný 10% nádech vaší primární barvy na bílém podkladu */
background-color: color-mix(in srgb, var(--bde-brand-primary-color) 10%, white);
Tímto způsobem zajistíte, že i doplňkové barvy budou vždy v dokonalé harmonii s vaším hlavním brandem.
Pozor na vlastní paletu
V rámci WpKit a Breakdance můžete narazit i na obecnou custom paletu, kde definujeme naše vlastní barvy (jako např. Border na obrázku). Zde je však potřeba trocha obezřetnosti.
Ačkoliv i tato barva má svou CSS proměnnou, její název je automaticky generovaný systémem. To znamená, že mezi různými instalacemi WordPressu se tento název může lišit (např. podle ID nebo pořadí vytvoření).
Doporučení: Na automaticky generované názvy proměnných u custom barev (jako je právě v ukázce Border) se v kódu nespoléhejte. Pro tyto účely je bezpečnější definovat si vlastní proměnnou v globálním nastavení nebo barvu v kritických částech CSS nastavit manuálně.
background-color: color-mix(in srgb, var(--bde-brand-primary-color) 10%, white);background-color: color-mix(in srgb, var(--bde-brand-primary-color) 20%, white);background-color: color-mix(in srgb, var(--bde-brand-primary-color) 30%, white);background-color: color-mix(in srgb, var(--bde-brand-primary-color) 40%, white);background-color: color-mix(in srgb, var(--bde-brand-primary-color) 50%, white);background-color: color-mix(in srgb, var(--bde-brand-primary-color) 60%, white);background-color: color-mix(in srgb, var(--bde-brand-primary-color) 70%, white);background-color: color-mix(in srgb, var(--bde-brand-primary-color) 80%, white);background-color: color-mix(in srgb, var(--bde-brand-primary-color) 90%, white);Mixovat můžete samozřejmě libovolné barvy, ne jen tu brand a bílou.
Zajímavost
Abychom stále drželi vazbu na náš barevný systém, i naše samotná custom barva Border je výsledkem color-mix definice s vazbou na brand barvu. Nejdříve mícháme primární barvu s černou, abychom dosáhli velmi tmavé černé s nádechem naší primární. Tuto barvu pak mícháme opět s bílou:
color-mix(in srgb, color-mix(in srgb, var(--bde-brand-primary-color) 15%, black) 10%, white)
Barva pro nadpisy pak např. není úplně černá, ale jedná se o černou barvu "napuštěnou" z 30% naší barvou primární. Jedná se o malý detail, ale mnoho malých detailů pak dotváří koherentní design:
color-mix(in srgb, var(--bde-brand-primary-color) 20%, black)