CSS-variabler for tematisering
Opprett et tokenbasert temasystem ved hjelp av egendefinerte CSS-egenskaper som bytter mellom lyse og mørke verdier.
CSS-variabler for tematisering er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 2 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 temaaritektur
Egendefinerte CSS-egenskaper er grunnlaget for moderne tematisering i CSS. De fungerer som et dynamisk tokenlag som kan byttes ut under kjøring – og muliggjør mørk modus, white-labeling og personalisering styrt av brukeren.
Lag med designtokener
Et velstrukturert temasystem har tre lag:
- Primitive tokens: råverdier (
--blue-500: #3b82f6) - Semantiske tokener: basert på betydning (
--color-primary: var(--blue-500)) - Komponenttokener: spesifikke for komponenten (
--button-bg: var(--color-primary))
Definere det lyse temaet
Definer det komplette lyse temaet på :root:
<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>
Overstyring av mørkt tema
Overstyr tokenene i et mørkt område (media query eller klasse):
<div class="demo">Adapts to dark mode automatically</div>
Bruke tokener i komponenter
Komponenter bruker semantiske tokener, aldri hardkodede verdier:
<div class="card">Card using theme tokens</div>
Klassebasert overstyring
Tillat manuell overstyring med en klasse på <html>:
<div data-theme="dark" class="demo">Dark theme via data-theme</div>
<div data-theme="light" class="demo">Light theme via data-theme</div>
Tematisering på komponentnivå
En komponent kan definere sitt eget tokenlag for mer detaljert tilpasning:
<div class="card">Component-level theming</div>
White-label-tematisering
CSS-variabler muliggjør white-label-produkter der hver kunde får et forskjellig tema ved å overstyre et lite sett med merkevaretokener:
<div data-brand="client-a" class="brand-demo">Client A brand color</div>
<div data-brand="client-b" class="brand-demo">Client B brand color</div>
Animerte temaendringer
Jevne temaoverganger kan oppnås med en CSS-overgang på fargerelaterte egenskaper:
<div class="demo" id="theme-demo">Themed content</div>
<button onclick="document.documentElement.classList.toggle('theme-transitioning'); const d=document.getElementById('theme-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff';">Toggle Theme (transitions smoothly)</button>
Dokumentasjon av tokener
Dokumenter designtokenene slik at alle utviklere vet hvilke variabler de skal bruke. En komponent for stilveiledning (for eksempel Storybook) som viser alle tokenene med verdiene for lyst og mørkt tema, er uvurderlig for store team.
Verktøy for tokener: Style Dictionary
Style Dictionary (fra Amazon) omformer designtokener definert i JSON automatisk til egendefinerte CSS-egenskaper, JavaScript-konstanter og andre plattformformater – slik at tokenene holdes synkronisert mellom design og kode.
Hurtigsjekk
I en to-lags tokenarkitektur, hvilken type token bør en .button-komponent referere til for bakgrunnsfargen?
Oppsummering
CSS-variabler danner grunnlaget for robuste temasystemer. Bygg tre lag: primitive tokener, semantiske tokener og komponenttokener. Definer temaer som tokenoverstyringer på :root via en media query eller attributtvelger. Bruk semantiske tokener i komponenter for automatisk nedarving av temaet. Verktøy som Style Dictionary automatiserer distribusjon av tokener på tvers av plattformer.
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 «CSS-variabler for tematisering» gratis?
Ja – hele teksten i «CSS-variabler for tematisering» 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 «CSS-variabler for tematisering»?
Opprett et tokenbasert temasystem ved hjelp av egendefinerte CSS-egenskaper som bytter mellom lyse og mørke verdier. 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 2 av 4.
Hvor lang tid tar leksjonen «CSS-variabler for tematisering»?
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
- Mediespørringen prefers-color-scheme
- CSS-variabler for tematisering
- Egenskapen color-scheme
- Automatisk og manuell bryter for mørk modus