SV

Teman med CSS anpassade egenskaper — och inget mer

Design FrontEnd

#Català #css #css3 #design #Design Systems Architecture #design-systems #FrontEnd

Teman med CSS anpassade egenskaper — och inget mer

Det moderna standardsättet att göra teman på webben är med CSS custom properties (CSS-variabler). Ingen Sass behövs, ingen JavaScript behövs, ingen runtime behövs. Det är allt som xarop.com gör för att ha sex smaker.

Den grundläggande idén

:root {
  --color-accent: #ff0000;
}

:root[data-flavor="menta"] {
  --color-accent: #00a878;
}

a { color: var(--color-accent); }

Att ändra data-flavor på <html> ändrar omedelbar alla referenser. Ingen omläsning, ingen JavaScript-omritning.

Ljus / Mörkt automatiskt

:root {
  --bg: white;
  --text: black;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111;
    --text: #eee;
  }
}

Respekterar systemets inställningar. Användarna har redan en åsikt; vi behöver inte tvinga vår på dem.

Manuell åsidosättning

:root[data-theme="dark"] {
  --bg: #111;
  --text: #eee;
}

Med data-theme="dark" tvingar vi läget. En <button> med tre rader JavaScript kan ändra attributet. Valfritt — webben fungerar utan det.

accent-color och color-scheme

Två moderna egenskaper som vi använder sällan:

:root {
  accent-color: var(--color-accent);
  color-scheme: light dark;
}

accent-color färgar checkboxes, radioknappar och några inbyggda kontroller. color-scheme säger till webbläsaren vilka UI-färger (scrollbar, formulärkontroller) den ska använda.

Kombinera tema + smak

:root[data-theme="dark"][data-flavor="menta"] {
  --color-accent: #00a878;
  --bg: #111;
}

Attributväljare kan kombineras. Det kartesiska kan växa men vanligtvis påverkar smaken endast --color-accent och varianter, medan temat påverkar bakgrund/text. De förblir ortogonala.

Slutsats

CSS custom properties är kraftfulla. I 90% av fallen för "temasystem" är de allt du behöver. JavaScript för persistens (localStorage) är valfritt — en progressiv förbättring.