CSS-variabler för tematisering
Skapa ett tokenbaserat temasystem med CSS-egenskaper som växlar mellan ljusa och mörka värden.
CSS-variabler för tematisering är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Översikt över temats arkitektur
CSS-anpassade egenskaper utgör grunden för modern temahantering i CSS. De fungerar som ett dynamiskt tokenlager som kan bytas under körning, vilket möjliggör mörkt läge, white-labeling och personalisering som styrs av användaren.
Lager för design tokens
Ett välstrukturerat temasystem har tre lager:
- Primitiva tokens: råvärden (
--blue-500: #3b82f6) - Semantiska tokens: baserade på betydelse (
--color-primary: var(--blue-500)) - Komponenttokens: specifika för komponenter (
--button-bg: var(--color-primary))
Definiera det ljusa temat
Definiera hela det ljusa temat på :root:
<div class="demo">Themed surface<br/><button class="btn">Primary Button</button></div>
Åsidosättning av mörkt tema
Åsidosätt tokens i en mörk kontext, till exempel en media query eller klass:
<div class="demo">Adapts to dark mode automatically</div>
Använda tokens i komponenter
Komponenter använder semantiska tokens, aldrig hårdkodade värden:
<div class="card">Card using theme tokens</div>
Klassbaserad åsidosättning
Tillåt manuell åsidosättning med en klass 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>
Temahantering på komponentnivå
En komponent kan definiera sitt eget tokenlager för mer detaljerad anpassning:
<div class="card">Component-level theming</div>
White-label-temahantering
CSS-variabler möjliggör white-label-produkter där varje kund får ett eget tema genom att åsidosätta en liten uppsättning varumärkestokens:
<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>
Animerade temabyten
Mjuka temabyten kan åstadkommas med en CSS-transition på färgrelaterade 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>
Dokumentera tokens
Dokumentera era design tokens så att alla utvecklare vet vilka variabler de ska använda. En komponent för en stilguide, som Storybook, som visar alla tokens med deras ljusa och mörka värden är ovärderlig för stora team.
Tokenverktyg: Style Dictionary
Style Dictionary (från Amazon) omvandlar design tokens som definierats i JSON till CSS-anpassade egenskaper, JavaScript-konstanter och andra plattformsformat automatiskt — så att tokens hålls synkroniserade mellan design och kod.
Snabbkontroll
I en tokenarkitektur med två nivåer, vilken typ av token ska en .button-komponent referera till för sin bakgrundsfärg?
Sammanfattning
CSS-variabler möjliggör robusta temasystem. Bygg tre lager: primitiva tokens, semantiska tokens och komponenttokens. Definiera teman som tokenöverskrivningar på :root via en media query eller attributväljare. Använd semantiska tokens i komponenter så att temat ärvs automatiskt. Verktyg som Style Dictionary automatiserar distributionen av tokens mellan plattformar.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”CSS-variabler för tematisering” gratis?
Ja – hela texten till ”CSS-variabler för tematisering” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”CSS-variabler för tematisering”?
Skapa ett tokenbaserat temasystem med CSS-egenskaper som växlar mellan ljusa och mörka värden. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”CSS-variabler för tematisering”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Mediefrågan prefers-color-scheme
- CSS-variabler för tematisering
- Egenskapen color-scheme
- Automatisk och manuell växling av mörkt läge