Sima világos és sötét mód átmenetek: tokenek, CSS és mozgás
Hogyan készítsünk világos/sötét témakapcsolót, amely tiszteletben tartja a rendszerbeállításokat, elkerüli a villanást terheléskor, stílusos natív vezérlőket és animációkat készít anélkül, hogy a hozzáférhetőség sérülne.
Core Takeaway
Építsen témákat szemantikus tokenekre, kövesse a rendszerbeállításokat a prefers-color-scheme beállítással alapértelmezés szerint, hagyja, hogy az emberek felülírják, és állítsa be a színséma tulajdonságot, hogy az űrlapvezérlők és a görgetősávok illeszkedjenek. Alkalmazza a mentett témát az oldal megjelenítése előtt, hogy elkerülje a felvillanást. Tartsa röviden a kapcsolóanimációt, például gyors kereszteltolást vagy Átmenet nézetet, és hagyja ki, ha a csökkentett mozgás be van kapcsolva.
Kezdje a rendszer beállításától
A prefers-color-scheme media funkció megmondja, hogy a felhasználó világos vagy sötét témát kért-e az operációs rendszerétől. Használja alapértelmezettként, és adjon hozzá egy alkalmazáson belüli kapcsolót, amely felülírja és megjegyzi.
Téma tokenekkel, nem felülírásokkal
Határozza meg a színeket szemantikai tokenként (felület, szöveg, szegély, ékezet), és adja meg minden témának saját értékét, általában CSS egyéni tulajdonságokként a gyökérelemen. Az összetevők ezután soha nem változnak a témák között; csak a token értékek teszik ezt. Ez ugyanaz a háromszintű token-megközelítés, amelyet a többmárkás tervezési rendszerekben is használnak.
Ne felejtse el a natív vezérlőket
A MDN elmagyarázza, hogy a színséma tulajdonság közli a böngészővel, hogy egy elem mely sémákat támogatja, ami megváltoztatja az űrlapvezérlők, görgetősávok és más beépített felhasználói felület alapértelmezett színeit. Enélkül a sötét oldalon világos fehér bemenetek és görgetősávok jelenhetnek meg.
Kerülje a vakut terheléskor
Ha a mentett témát a JavaScript alkalmazza az oldal megjelenítése után, az emberek rossz témát látnak. Alkalmazza a lehető legkorábban, egy kis soron belüli szkripttel a dokumentumfejben vagy egy szerver által megjelenített attribútummal, még mielőtt a stíluslap festene.
Óvatosan animálja a kapcsolót
Egy rövid, 150-250 milliszekundum közötti áthalványulás szándékossá teszi a változtatást. Kerülje el az összes színtulajdonság átmenetét minden elemen, ami nagy oldalakon lassú lehet; egyetlen View Transition pillanatkép gyakran simább. Tegye egyértelművé magát a kapcsolót címkével vagy eszköztippel, és távolítsa el az animációt, ha a csökkentett mozgás be van kapcsolva.
Gyártási megvalósítási részlet
/* 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);
}Kulcs Principle, amit meg kell jegyezni
- Alapértelmezés szerint prefers-color-scheme; hagyja, hogy az emberek felülírják és emlékezzenek rá
- Téma szemantikai tokenekkel, nem komponensenkénti felülírásokkal
- Állítsa be a színsémát úgy, hogy a natív vezérlők illeszkedjenek
- Alkalmazza a mentett témát az első festés előtt
- A kapcsoló animációja legyen rövid, és tartsa tiszteletben a csökkentett mozgást
Gyakran Ismételt Kérdések
Források
- prefers-color-scheme — MDN webdokumentumok
- color-scheme — MDN webdokumentumok
- View Transition API — MDN webdokumentumok