Implementere tematisering for flere merkevarer med CSS-variabler
Bytt mellom flere merkevaretemaer under kjøring ved å bytte verdiene til egendefinerte CSS-egenskaper.
Implementere tematisering for flere merkevarer med CSS-variabler er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Oversikt over temaarkitektur
Tematisering for flere merkevarer knytter ett enkelt sett med alias-token for komponenter til forskjellige globale tokenverdier for hver merkevare. Komponenter refererer til aliastoken, mens temafiler for merkevarer knytter aliasene til merkevarespesifikke globale token på nytt.
Basislaget for token
Definer globale token i :root: alle rå fargeverdier, avstandsverdier og typografiverdier. Dette er standardmerkevaren. Komponenter refererer aldri direkte til globale token – alltid via aliaser.
<span class="swatch swatch-primary"></span>
<span class="swatch swatch-secondary"></span>Aliaslaget for token
Aliastoken refererer til globale token ved hjelp av var(): --color-action: var(--color-brand-primary). Komponenter bruker --color-action. Når betydningen til --color-brand-primary endres, endres hele systemet.
Temaklasser for merkevarer
Bruk temaer for merkevarer med en klasse på html eller et containerelement. Hver temaklasse overstyrer de globale tokenene for det aktuelle merkevareområdet. Komponenter i containeren arver automatisk verdiene til merkevaren.
<span class="swatch"></span>
<span class="theme-brand-a swatch"></span>
<span class="theme-brand-b swatch"></span>Mørk modus som tema
Mørk modus er en temavariant – en klasse eller mediespørring som overstyrer fargetoken. Bruk prefers-color-scheme for operativsystemets standardvalg og en .dark-klasse for brukerens overstyring. Begge endrer de samme aliastokenene.
<div class="surface">Themed surface</div>Tokenarv
CSS-egendefinerte egenskaper følger kaskaden og arves. Et tema som brukes på et containerelement, påvirker alle etterkommere. Nøstede temaer overstyrer ytre temaer på containernivå – nyttig når en widget på en side skal ha et eget tema.
Unngå tokenlekkasje
Sørg for at aliastoken alltid er definert. Hvis en temaklasse mangler, bør aliaset falle tilbake til en standardverdi på en kontrollert måte. Bruk reserveverdisyntaksen for CSS var(): var(--color-action, #3b82f6) for å unngå usynlig tekst eller manglende bakgrunner.
Generere temafiler
Style Dictionary kan generere separate CSS-filer for temaer fra én token-JSON-fil. Byggesteget genererer theme-brand-a.css og theme-brand-b.css. Last inn riktig fil ved kjøring, eller kompiler den inn i separate pakker for hver merkevare.
Teste temaer
Skriv visuelle regresjonstester som gjengir hver komponent i hvert tema. Percy og Chromatic tar skjermbilder for hver temavariant. Automatisert visuell testing oppdager regresjoner når globale tokenverdier endres uventet.
Temabytte ved kjøring
Bytt temaklasser med JavaScript: document.documentElement.classList.replace("theme-a", "theme-b"). CSS-variablene oppdateres umiddelbart uten at komponentene må gjengis på nytt – det kreves verken ny React-gjengivelse eller ny stilberegning av statiske verdier.
Ytelsesbetraktninger
CSS-variabler løses ved paint – når en rotvariabel endres, må alle elementer som bruker den, males på nytt. Begrens endringer av globale variabler til brukerinteraksjoner, for eksempel temabytte, og ikke til animasjonsløkker. Bruk overganger på individuelle egenskaper for animerte temaeffekter.
Kunnskapssjekk
Hvordan gjør CSS-egendefinerte egenskapstemaer det mulig å bytte merkevare uten å endre CSS-en til komponentene?
Sammendrag
Tematisering for flere merkevarer skiller globale rå tokenverdier fra semantiske aliastoken. Temaklasser overstyrer globale token innenfor et containerområde. Komponenter som refererer til aliaser, gjenspeiler automatisk det aktive merkevaretemaet, slik at temaet kan byttes ved kjøring uten endringer i komponentkoden.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Implementere tematisering for flere merkevarer med CSS-variabler» gratis?
Ja – hele teksten i «Implementere tematisering for flere merkevarer med CSS-variabler» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Implementere tematisering for flere merkevarer med CSS-variabler»?
Bytt mellom flere merkevaretemaer under kjøring ved å bytte verdiene til egendefinerte CSS-egenskaper. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Implementere tematisering for flere merkevarer med CSS-variabler»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Hva er designtokens
- Navnekonvensjoner for tokens
- Implementere tematisering for flere merkevarer med CSS-variabler
- Verktøy for tokens: Style Dictionary