Tailwind CSS Academy · leksjon

Tematisering basert på CSS-variabler

Lagre designtokens som egendefinerte CSS-egenskaper, og referer til dem i Tailwind-konfigurasjonen for å muliggjøre bytte av tema under kjøring uten rekompilering.

Leksjon 2 av 413 trinn

Tematisering basert på CSS-variabler er en gratis leksjon i Tailwind 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 Tailwind CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.

Hvorfor bruke CSS-variabler til tematisering?

Egendefinerte CSS-egenskaper (CSS-variabler) er nøkkelen til tematisering ved kjøring med Tailwind. I motsetning til statiske verdier som er bakt inn i den kompilerte CSS-en, kan CSS-variabler endres av JavaScript når som helst uten at siden lastes inn på nytt. Dette gjør dem ideelle for å implementere bytte mellom lys og mørk modus, temaer som brukeren kan velge, eller merkevarebygging for flere leietakere, der den samme applikasjonen må se forskjellig ut for ulike kunder.

Definere CSS-variabler i :root

CSS-variabler defineres på selektoren :root, slik at de er globalt tilgjengelige på hele siden. Syntaksen er --variable-name: value. De refereres til med var(--variable-name). Plasser disse definisjonene i den globale CSS-filen — vanligvis globals.css eller index.css — slik at de er tilgjengelige før komponentstilene brukes.

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-primary: #3b82f6;
    --color-primary-hover: #1d4ed8;
    --color-surface: #ffffff;
    --color-surface-alt: #f8fafc;
    --color-text: #111827;
    --color-text-muted: #6b7280;
    --color-border: #e5e7eb;
  }
}

Koble CSS-variabler til Tailwind-konfigurasjonen

Når CSS-variablene er definert, refererer De til dem i tailwind.config.js ved å bruke syntaksen var(--variable-name). Tailwind genererer utility-klasser som bruker disse variablene som verdier. Når variabelen endres ved kjøring, oppdateres alle genererte klasser som refererer til den, automatisk — uten behov for ny kompilering.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: 'var(--color-primary)',
        'primary-hover': 'var(--color-primary-hover)',
        surface: 'var(--color-surface)',
        'surface-alt': 'var(--color-surface-alt)',
        'text-base': 'var(--color-text)',
        'text-muted': 'var(--color-text-muted)',
        border: 'var(--color-border)'
      }
    }
  }
}

Bruke klasser støttet av variabler i HTML

Etter at variablene er koblet til Tailwind, fungerer utility-klassene akkurat som før — den eneste forskjellen er at den underliggende verdien nå er dynamisk. Når De skriver bg-surface, brukes background-color: var(--color-surface) på elementet. Bytt variabelverdien i CSS, så oppdateres alle elementer som bruker bg-surface, uten endringer i HTML eller JavaScript.

<div class="bg-surface text-text-base border border-border rounded-xl p-6">
  <h2 class="text-xl font-semibold text-primary mb-2">Card Title</h2>
  <p class="text-text-muted text-sm">This card adapts to any theme.</p>
  <button class="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-lg mt-4">
    Action
  </button>
</div>

Mørk modus med CSS-variabler

For å implementere mørk modus overskriver De CSS-variabelverdiene under en .dark-klasse på rotelementet. Når JavaScript slår dark-klassen av eller på på html, byttes alle variabelverdiene samtidig, og alle komponenter oppdateres umiddelbart. Denne fremgangsmåten krever ingen ekstra Tailwind-utilities utover de opprinnelige variabelbaserte klassene De allerede har.

@layer base {
  :root {
    --color-primary: #3b82f6;
    --color-surface: #ffffff;
    --color-text: #111827;
  }

  .dark {
    --color-primary: #60a5fa;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
  }
}

Støtte for gjennomsiktighet med CSS-variabler

Det finnes en detalj ved CSS-variabelfarger og Tailwinds syntaks for gjennomsiktighetsmodifikatorer. Utilities som bg-primary/50 krever at fargen er angitt i RGB-kanalformat, slik at Tailwind kan sette inn alfaverdien. For å støtte gjennomsiktighetsmodifikatorer definerer De variablene som RGB-tripletter uten rgb()-omslutningen, og bruker mønsteret rgb(var() / alpha) i konfigurasjonen.

/* globals.css — RGB triplet format */
:root {
  --color-primary-rgb: 59 130 246;
}

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: ({
          opacityValue
        }) => opacityValue
          ? 'rgb(var(--color-primary-rgb) / ' + opacityValue + ')'
          : 'rgb(var(--color-primary-rgb))'
      }
    }
  }
}

Flere temavarianter

CSS-variabler gjør det mulig å definere flere komplette temaer, ikke bare lyse og mørke temaer. Ved å bruke data-theme-attributter kan De avgrense ulike variabelsett til forskjellige deler av siden eller bytte tema for hele applikasjonen. Dette er spesielt nyttig for multi-tenant SaaS-applikasjoner, der hver kunde trenger sitt eget fargevalg fra en delt kodebase.

@layer base {
  [data-theme='ocean'] {
    --color-primary: #0ea5e9;
    --color-surface: #0c4a6e;
    --color-text: #e0f2fe;
  }

  [data-theme='forest'] {
    --color-primary: #16a34a;
    --color-surface: '#dcfce7';
    --color-text: #14532d;
  }
}

<!-- Switch theme with JS -->
document.documentElement.setAttribute('data-theme', 'ocean');

Animere temabytter

Ved bytte av tema kan en plutselig fargeendring føles brå. Hvis De legger til en CSS-overgang for alle egenskaper på rotelementet, får De en jevn fargeovergang når variablene endres. Vær selektiv — overganger på for mange egenskaper eller lange varigheter kan få brukergrensesnittet til å virke tregt. En overgang på 150–300 ms for fargerelaterte egenskaper er vanligvis ideell.

/* globals.css */
*, *::before, *::after {
  transition-property: color, background-color, border-color;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

/* Exclude transitions from elements that should be instant */
.no-theme-transition,
.no-theme-transition * {
  transition: none !important;
}

Bevare temainnstillingen

Et temabytte er ubrukelig hvis det tilbakestilles når siden lastes inn på nytt. Bruk localStorage til å lagre brukerens innstilling og gjenopprette den ved neste besøk. Gjenopprettingsskriptet må kjøres før siden gjengis, slik at De unngår et kort glimt av feil tema. Plasser et innebygd skript øverst i HTML-ens head — ikke i en modul som lastes inn etter at siden er tegnet.

<!-- In <head> before any CSS -->
<script>
  (function() {
    var theme = localStorage.getItem('theme') ||
      (window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', theme);
    if (theme === 'dark') {
      document.documentElement.classList.add('dark');
    }
  })();
</script>

Mønstre for semantiske variabelnavn

Bruk et konsekvent navnemønster for CSS-variablene, slik at de blir forutsigbare og selvforklarende. Et tredelt mønster som --category-role-state fungerer godt. Eksempler er --color-action-default, --color-action-hover, --color-surface-raised og --color-feedback-error. Unngå vage navn som --color1 eller altfor spesifikke navn som --signup-button-blue.

:root {
  /* Action colors */
  --color-action-default: #3b82f6;
  --color-action-hover: #1d4ed8;
  --color-action-disabled: #93c5fd;

  /* Surface colors */
  --color-surface-base: #ffffff;
  --color-surface-raised: #f8fafc;
  --color-surface-overlay: #f1f5f9;

  /* Feedback colors */
  --color-feedback-success: #16a34a;
  --color-feedback-error: #dc2626;
  --color-feedback-warning: #d97706;
}

Feilsøke temaer med CSS-variabler

Når en temafarge ikke vises riktig, er nettleserens DevTools Deres beste hjelpemiddel. Panelet for beregnede stiler viser den oppløste verdien til enhver CSS-variabel på ethvert element. De kan også inspisere :root direkte for å se alle variabelverdiene. Hvis De ser den rå strengen var(--name) i stedet for en farge, er variabelen ikke definert i det gjeldende området — se etter skrivefeil eller manglende :root-blokker.

/* Quick debug: visualize all theme colors */
.theme-debug {
  background-color: var(--color-surface-base);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
}

/* In DevTools console: */
/* getComputedStyle(document.documentElement)
   .getPropertyValue('--color-primary') */

Kort kontroll

Test forståelsen Deres av konseptene fra Tailwind CSS Mastery i denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen har De lært at egendefinerte CSS-egenskaper definert på :root fungerer som dynamiske designtokens, at Tailwind-konfigurasjonen kan referere til dem med var(--name), slik at genererte klasser kan endres ved kjøring, og at flere temaer implementeres ved å bytte variabelverdier under ulike klasse- eller dataattributtselektorer. Deretter utforsker vi strategier for tematisering av flere merkevarer i produktteam.

Gratis å komme i gang

Lær deg HTML 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: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Tematisering basert på CSS-variabler» gratis?

Ja – hele teksten i «Tematisering basert på 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 Tailwind CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Tailwind CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Tematisering basert på CSS-variabler»?

Lagre designtokens som egendefinerte CSS-egenskaper, og referer til dem i Tailwind-konfigurasjonen for å muliggjøre bytte av tema under kjøring uten rekompilering. Du øver på Tailwind 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 Tailwind CSS Academy?

Ingen tidligere erfaring er nødvendig. Tailwind 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 «Tematisering basert på 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 Tailwind CSS Academy-leksjonen?

Ja. Alle Tailwind 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

Primitive kontra semantiske tokens
Tematisering basert på CSS-variabler
Strategi for tematisering av flere merkevarer
Dokumentasjon og styring av tokens

← Tilbake til Tailwind CSS Academy