Tasaiset vaalean ja tumman tilan siirtymät: Tokens, CSS ja Motion
Kuinka rakentaa vaalea/tumma teemakytkin, joka kunnioittaa järjestelmän asetuksia, välttää salaman latauksen aikana, muotoilee alkuperäisiä säätimiä ja animoi esteettömyyttä vahingoittamatta.
Core Takeaway
Rakenna teemoja semanttisille tunnuksille, seuraa järjestelmän asetuksia oletuksena prefers-color-schemella, anna ihmisten ohittaa se ja aseta väriteeman ominaisuus niin, että lomakeohjaimet ja vierityspalkit täsmäävät. Käytä tallennettua teemaa ennen sivun hahmontamista välttyäksesi välähdyksestä. Pidä kytkinanimaatio lyhyenä, kuten nopea ristihäivytys tai View Transition, ja ohita se, kun alennettu liike on käytössä.
Aloita järjestelmäasetuksista
Prefers-color-scheme mediaominaisuus kertoo, onko käyttäjä pyytänyt käyttöjärjestelmästään vaaleaa vai tummaa teemaa. Käytä sitä oletusasetuksena ja lisää sovelluksen sisäinen kytkin, joka ohittaa sen ja jää muistiin.
Teema tunnuksilla, ei ohituksilla
Määritä värit semanttisiksi tunnisteiksi (pinta, teksti, reuna, korostus) ja anna kullekin teemalle omat arvonsa, yleensä juurielementin mukautetuina CSS-ominaisuuksina. Tällöin komponentit eivät koskaan vaihda teemojen välillä; vain token-arvot tekevät. Tämä on sama kolmikerroksinen token-lähestymistapa, jota käytetään usean tuotemerkin suunnittelujärjestelmissä.
Älä unohda alkuperäisiä ohjaimia
MDN selittää, että värimalli-ominaisuus kertoo selaimelle, mitä skeemoja elementti tukee, mikä muuttaa lomakesäätimien, vierityspalkkien ja muiden sisäänrakennettujen käyttöliittymien oletusvärejä. Ilman sitä tumma sivu voi näyttää kirkkaan valkoisia syötteitä ja vierityspalkkeja.
Vältä salamaa kuormituksen aikana
Jos JavaScript käyttää tallennettua teemaa sivun renderöinnin jälkeen, ihmiset näkevät välähdyksen väärästä teemasta. Ota se käyttöön mahdollisimman varhaisessa vaiheessa pienellä rivillä olevalla komentosarjalla asiakirjan yläosassa tai palvelimen hahmontamalla attribuutilla, ennen kuin tyylisivu maalataan.
Animoi kytkin huolellisesti
Lyhyt, noin 150–250 millisekunnin ristihäivytys saa muutoksen tuntumaan tahalliselta. Vältä kaikkien väriominaisuuksien siirtämistä jokaisessa elementissä, mikä voi olla hidasta suurilla sivuilla. Yksi View Transition -tilannekuva on usein pehmeämpi. Tee itse kytkimestä selkeä, etiketillä tai työkaluvihjeellä, ja poista animaatio, kun vähennetty liike on käytössä.
Tuotannon toteutuskatkelma
/* Tokens per theme */
:root { color-scheme: light dark; --surface: #ffffff; --text: #121212; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) { --surface: #121212; --text: #f2f2f2; }
}
:root[data-theme="dark"] { color-scheme: dark; --surface: #121212; --text: #f2f2f2; }
:root[data-theme="light"] { color-scheme: light; }
body { background: var(--surface); color: var(--text); }
// Switch with a View Transition where supported, instantly otherwise
function setTheme(theme) {
const apply = () => { document.documentElement.dataset.theme = theme; localStorage.setItem('theme', theme); };
const reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!document.startViewTransition || reduce) return apply();
document.startViewTransition(apply);
}Avain Principles muistettavat
- Oletuksena prefers-color-scheme; anna ihmisten ohittaa ja muistaa se
- Teema semanttisilla tunnuksilla, ei komponenttikohtaisilla ohituksilla
- Aseta väriteema niin, että alkuperäiset säätimet sopivat yhteen
- Käytä tallennettua teemaa ennen ensimmäistä maalausta
- Pidä kytkimen animaatio lyhyt ja kunnioita alennettua liikettä
Usein kysytyt kysymykset
Lähteet
- prefers-color-scheme — MDN Web Docs
- color-scheme — MDN Web Docs
- View Transition API — MDN Web Docs