Hyvä-themakleuren aanpassen vanuit de admin, zonder code

Hyvä-thema's worden gebouwd met Tailwind CSS. Kleuren, lettertypes en witruimte zijn gedefinieerd als design tokens in de Tailwind-configuratie van het thema. Bij het bouwen van het thema schrijft Tailwind alleen de classes die de templates echt gebruiken naar één kleine stylesheet.

De header- en merkkleuren van onze Hyvä-demowebshop kun je aanpassen in Stores > Configuration.

Dat is geweldig voor de snelheid. Het betekent ook dat een kleurwijziging een codewijziging is. Iemand past de configuratie aan, bouwt de CSS opnieuw en deployt. Voor een marketingteam dat een donkerdere header wil voor een saleweekend is dat te traag.

Dit artikel laat zien hoe we dat hebben opgelost, en waar de grenzen liggen.

Waar Hyvä-kleuren normaal staan

In een Hyvä-child theme staat de Tailwind-configuratie in de map web/tailwind van het thema. Daarin staan benoemde kleuren zoals primary en secondary. Templates gebruiken dan classes zoals bg-primary of text-secondary.

De buildstap scant de templates, vindt de gebruikte classes en genereert de CSS. Deze pipeline leggen we uit in Tailwind in Hyvä: design tokens en de build-pipeline.

Omdat de kleurwaarden in de gegenereerde CSS worden geschreven, moet je de build opnieuw draaien om ze te wijzigen. In production mode betekent dat ook een deploy.

Het idee: tokens verwijzen naar CSS-variabelen

CSS custom properties, vaak CSS-variabelen genoemd, lossen dit netjes op. In plaats van een vaste hexwaarde verwijst een Tailwind-token naar een variabele. De stylesheet blijft hetzelfde; alleen de waarde van de variabele verandert.

De waarde van de variabele komt uit de Magento-configuratie. Een klein blok in de head van de pagina leest de ingestelde kleuren en geeft ze uit als variabelen.

<style>
:root {
  --brand-header-bg: <?= $escaper->escapeCss($headerBg) ?>;
  --brand-primary: <?= $escaper->escapeCss($primary) ?>;
}
</style>

Templates gebruiken de variabele via de tokens, of via de arbitrary value-syntax van Tailwind, bijvoorbeeld bg-[var(--brand-header-bg)]. Elk element dat het token gebruikt, volgt automatisch de nieuwe waarde.

De standaardwaarden staan nog steeds in de themabestanden. Als niemand een kleur in de admin instelt, ziet het thema er precies zo uit als ontworpen.

Wat het team in de admin ziet

We voegen een sectie toe onder Stores > Configuration met de kleuren die zinvol zijn om te wijzigen. In de meeste webshops is dat een korte lijst:

• Achtergrond en tekst van de header.
• Primaire merkkleur, gebruikt voor knoppen en links.
• Secundaire of accentkleur, gebruikt voor badges en highlights.
• Kleur van de topbalk of aankondigingsbalk.

Elk veld accepteert een hexkleur, en de waarde wordt gevalideerd voordat die wordt opgeslagen. Een tikfout mag de storefront nooit breken.

Omdat dit gewone Magento-configuratievelden zijn, werken ze per website en per store view. Een Duitse store view kan een andere headerkleur hebben dan de Engelse. Dat past goed bij de opzet die beschreven staat in meertalige Hyvä-webshops.

Na het opslaan leegt het team de full-page cache vanuit de admin, en de nieuwe kleuren staan live. Geen rebuild en geen deploy nodig.

Hoe we het bouwen, stap voor stap

1. Spreek met het team af welke kleuren ze echt moeten kunnen wijzigen.
2. Voeg die velden toe aan een configuratiesectie in een kleine module, met verstandige standaardwaarden.
3. Laat de bijbehorende Tailwind-tokens in het child theme verwijzen naar CSS-variabelen.
4. Voeg een head-blok toe dat de ingestelde waarden als variabelen uitgeeft, ge-escaped voor CSS.
5. Vervang hard-coded kleurclasses in de header en knoppen door de tokens.
6. Test elke store view met de standaardkleuren en met een gewijzigde set.

Het werk is klein, maar raakt de header, knoppen en links op elke pagina. Daarom testen we het op staging voordat het live gaat, net als elke andere themawijziging.

Wat bewust in de code blijft

Niet elke kleur moet aanpasbaar zijn. Een team twintig kleurkiezers geven is een snelle manier om het ontwerp kwijt te raken.

Deze houden we in de themabestanden:

• Neutrale grijstinten en randen. Ze houden de lay-out bij elkaar en hoeven zelden te veranderen.
• Statuskleuren. Fout-, waarschuwings- en succeskleuren hebben een betekenis in formulieren en de checkout.
• Lettertypes en witruimte. Die horen bij het designsysteem, niet bij een campagne.

Die tokens worden bij de deploy opnieuw gebouwd uit de themabestanden, net als elke andere codewijziging. De verdeling is simpel: merkmomenten in de admin, structuur in de code.

Contrast en toegankelijkheid

Een aanpasbare kleur kan ook een onleesbare kleur worden. Witte tekst op een lichtgele header ziet er prima uit voor wie hem op een groot scherm koos. Op een telefoon in de zon is het moeilijk te lezen.

Dit vangen we op twee manieren op. Elk achtergrondveld heeft een bijbehorend tekstkleurveld, zodat het team ze als paar kiest. We raden ook aan elk nieuw paar met een contrastchecker te controleren voordat je opslaat.

Meer hierover lees je in toegankelijkheid in Hyvä-thema’s.

Heeft dit invloed op de snelheid?

Nee, niet meetbaar. De variabelen voegen een paar regels inline CSS toe aan de head van de pagina. De hoofdstylesheet blijft één klein gecachet bestand.

De pagina is nog steeds volledig cachebaar. De kleurwaarden maken deel uit van de gecachete HTML per store view; daarom moet de full-page cache na een wijziging worden geleegd.

Deze aanpak hoort bij hoe we Hyvä-webshops na de lancering makkelijk beheerbaar houden. Onze demowebshop gebruikt het ook, samen met de snelheidsopzet in onze Hyvä vs Luma-benchmark.

Veelgestelde vragen

Kunnen we ook lettertypes vanuit de admin wijzigen?

Technisch kan dat met dezelfde aanpak met variabelen. Meestal houden we lettertypes in de code, omdat een andere font ook invloed heeft op regelhoogte, witruimte en laadsnelheid.

Overschrijft een Hyvä-update onze admin-kleuren?

Nee. De waarden worden opgeslagen in de Magento-configuratie en de logica zit in je child theme of een kleine module. Hyvä-updates raken geen van beide.

Kunnen we een kleurwijziging inplannen voor een campagne?

Standaard niet, want de Magento-configuratie kent geen planning. Als je vaak campagnes draait, kan het met een kleine module worden toegevoegd. Voor volledige campagnepagina's is onze Mage PageBuilder-blokbibliotheek meestal het betere hulpmiddel.

Wil je een Hyvä-thema dat je team zonder developer kan aanpassen? Bekijk onze Hyvä-themaontwikkeling en Mage PageBuilder, of neem contact met ons op om over je webshop te praten.