CSS-variabler för temaväxling

CSS-anpassade egenskaper (variabler) som definieras på :root är globalt tillgängliga i hela stilmallen. Definiera en komplett färgpalett en gång — bakgrunder, textfärger, ytor och kantlinjer — och referera till den överallt. Denna enda sanningskälla gör det enkelt att byta tema.

När attributet data-theme="dark" har angetts på document.documentElement skriver en CSS-selektor som [data-theme='dark'] över rotvariablerna med mörka värden. Komponenter refererar till var(--color-bg) och hämtar automatiskt de nya värdena utan några kodändringar.

Definiera åtminstone följande: --color-bg (sidbakgrund), --color-text (primärtext), --color-primary (varumärkesfärg), --color-surface (bakgrund för kort/paneler) och --color-border (avdelare). En konsekvent uppsättning tokens hindrar tillfälliga färgvärden från att dyka upp i komponenter.

Referera till variabler i komponentens CSS, till exempel background: var(--color-bg) och color: var(--color-text). Ni kan också ange ett reservvärde: var(--color-bg, #ffffff). Webbläsaren löser variabeln vid målning, så en enda klass fungerar för både ljusa och mörka teman.

Lägg till transition: background-color 200ms, color 200ms i selektorn :root. När attributet data-theme ändras animeras alla element som använder CSS-variabler samtidigt till sina nya värden. Det ger ett genomarbetat intryck utan någon JS-kod för animering.

Att hantera temat med CSS-variabler är bättre än att ange inline-stilar från JavaScript. Webbläsaren hanterar alla omberäkningar av stilar inbyggt, inga extra React-omrenderingar utlöses för varje tematiserad underordnad komponent och CSS-cascaden hanterar arv automatiskt. JavaScript behöver bara växla ett attribut på rotelementet.

Ni kan kombinera CSS-variabler med frågan @media (prefers-color-scheme: dark) som en reservlösning enbart med CSS. Definiera Era mörka överskridningar i mediefrågan utöver (eller i stället för) selektorn data-theme. Då fungerar mörkerläget även om JavaScript ännu inte har körts.

Det mest robusta tillvägagångssättet kombinerar båda mekanismerna: @media-frågan tillhandahåller operativsystemets standard, medan ett data-theme-attribut gör det möjligt för användaren att skriva över temat via JavaScript. När attributet finns vinner det tack vare specificiteten; när det saknas används mediefrågan.

För bilder som ser dåliga ut mot mörka bakgrunder kan Ni använda HTML-elementet picture med ett underordnat source media="(prefers-color-scheme: dark)". Webbläsaren väljer automatiskt den mörka varianten. För SVG-ikoner i CSS kan Ni använda filter: invert(1) som en snabb approximation.

CSS-variabler kan också begränsas till enskilda komponenter genom att definiera dem på komponentens rotelement i stället för på :root. Det möjliggör tematisering per komponent, till exempel ett sidofält med en egen bakgrundstoken som skiljer sig från sidans bakgrund, samtidigt som allt fortfarande växlar korrekt med den globala temaväxlingen.

Chrome DevTools visar beräknade CSS-variabelvärden i panelen Styles. Klicka på variabelreferensen för att hoppa till dess definition. Då blir det enkelt att kontrollera att rätt mörka eller ljusa token tillämpas på ett element. Ni kan också redigera variabelvärden direkt i panelen.

CSS-anpassade egenskaper på :root tillhandahåller ett centraliserat tokensystem för teman. Växla ett data-theme-attribut på html-elementet för att byta tema direkt. Lägg till CSS-övergångar för mjuk animering, använd mediefrågan prefers-color-scheme som en reservlösning enbart med CSS och undvik JS-överskrivningar av stilar per komponent.