Tematisering baserad på CSS-variabler

Anpassade CSS-egenskaper (CSS-variabler) är nyckeln till temahantering under körning med Tailwind. Till skillnad från statiska värden som byggs in i den kompilerade CSS-koden kan CSS-variabler ändras av JavaScript när som helst utan att sidan behöver laddas om. Det gör dem idealiska för att implementera växling mellan ljust och mörkt läge, teman som användaren kan välja eller varumärkesanpassning för flera klienter, där samma applikation behöver se olika ut för olika kunder.

CSS-variabler definieras på selektorn :root så att de är globalt tillgängliga på hela sidan. Syntaxen är --variable-name: value. Ni refererar till dem med var(--variable-name). Placera dessa definitioner i er globala CSS-fil — vanligtvis globals.css eller index.css — så att de finns tillgängliga innan några komponentstilar tillämpas.

När CSS-variablerna har definierats refererar ni till dem i tailwind.config.js med syntaxen var(--variable-name). Tailwind genererar utility-klasser som använder dessa variabler som värden. När variabeln ändras under körning uppdateras automatiskt alla genererade klasser som refererar till den — ingen omkompilering behövs.

När variablerna har kopplats till Tailwind fungerar era utility-klasser precis som tidigare — den enda skillnaden är att det underliggande värdet nu är dynamiskt. Om ni skriver bg-surface tillämpas background-color: var(--color-surface) på elementet. Ändra variabelns värde i CSS så uppdateras alla element som använder bg-surface utan några ändringar i HTML eller JavaScript.

För att implementera mörkt läge skriver ni över CSS-variablernas värden under en .dark-klass på rotelementet. När JavaScript växlar dark-klassen på html ändras alla variabelvärden samtidigt, vilket omedelbart uppdaterar varje komponent. Detta tillvägagångssätt kräver inga ytterligare Tailwind-utilities utöver de inledande variabelbaserade klasser ni redan har.

Det finns en detalj att tänka på när CSS-variabelfärger används tillsammans med Tailwinds syntax för opacitetsmodifierare. Utilities som bg-primary/50 kräver att färgen anges i RGB-kanalformat så att Tailwind kan infoga alfavärdet. För att stödja opacitetsmodifierare definierar ni variablerna som RGB-tripletter utan omslutningen rgb() och använder mönstret rgb(var() / alpha) i konfigurationen.

Med CSS-variabler kan ni definiera flera fullständiga teman, inte bara ljust och mörkt. Med attributet data-theme kan ni begränsa olika uppsättningar variabler till olika delar av sidan eller växla hela applikationens tema. Detta är särskilt användbart i multi-tenant SaaS-applikationer där varje kunds varumärke behöver ett eget färgschema från en gemensam kodbas.

Vid temaväxling kan en plötslig färgförändring kännas ryckig. Om ni lägger till en CSS-övergång för alla egenskaper på rotelementet skapas en mjuk färgövergång när variablerna ändras. Var selektiv — om för många egenskaper animeras eller om animeringarna har lång varaktighet kan gränssnittet kännas trögt. En övergång på 150–300 ms för färgrelaterade egenskaper är vanligtvis idealisk.

En temaväxling är meningslös om den återställs när sidan laddas om. Använd localStorage för att spara användarens inställning och återställa den vid nästa besök. Skriptet som återställer inställningen måste köras innan sidan renderas för att undvika att fel tema visas tillfälligt. Placera ett inline-skript högst upp i HTML-koden head — inte i en modul som laddas efter att sidan har målats upp.

Använd ett konsekvent namngivningsmönster för era CSS-variabler så att de blir förutsägbara och självförklarande. Ett tredelat mönster med --category-role-state fungerar bra. Exempel: --color-action-default, --color-action-hover, --color-surface-raised, --color-feedback-error. Undvik vaga namn som --color1 eller alltför specifika namn som --signup-button-blue.

När en temafärg inte visas korrekt är webbläsarens DevTools ert bästa hjälpmedel. Panelen för beräknade stilar visar det slutliga värdet för alla CSS-variabler på valfritt element. Ni kan också inspektera :root direkt för att se alla variabelvärden. Om ni ser den råa strängen var(--name) i stället för en färg är variabeln inte definierad i det aktuella omfånget — kontrollera om det finns stavfel eller saknade block med :root.

I den här lektionen har ni lärt er att anpassade CSS-egenskaper som definieras på :root fungerar som dynamiska designtokens, att Tailwinds konfiguration kan referera till dem med var(--name) så att genererade klasser kan ändras under körning och att flera teman implementeras genom att variabelvärden byts ut under olika klass- eller dataattributselektorer. Nästa steg är att utforska strategier för temahantering med flera varumärken för produktteam.