Automatisk og manuel skift af mørk tilstand
Byg en temaskifter, der som standard respekterer systemindstillingen og lader brugerne tilsidesætte den manuelt.
Automatisk og manuel skift af mørk tilstand er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Målet
En ideel implementering af mørk tilstand registrerer automatisk operativsystemets præference som standard og viser en skifteknap, der lader brugerne tilsidesætte den uafhængigt, samtidig med at præferencen gemmes mellem sideindlæsninger.
Oversigt over arkitekturen
Der er tre tilstande, der skal håndteres:
- Systempræference: brug
prefers-color-schemesammen med CSS-variabler - Brugerens tilsidesættelse: mørk: sæt en klasse eller dataattribut på
<html> - Brugerens tilsidesættelse: lys: sæt en anden klasse for at forhindre automatisk mørk tilstand
Opsætning af CSS-tokens
Definér CSS-variabler, der nedarves korrekt i alle tilstande:
<div class="demo" data-theme="dark">Dark token demo</div>
<div class="demo" data-theme="light">Light token demo</div>
Logikken bag JavaScript-skifteknappen
Læs den gemte præference, anvend den, og opdatér den, når der skiftes:
<div class="demo" id="theme-demo">Toggle my theme</div>
<div class="demo" data-theme="dark">Dark override example</div>
<button id="toggle-btn">Toggle Theme</button>
<script>
function toggleTheme() {
const current = document.getElementById('theme-demo').dataset.theme;
const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
if (!current) {
const next = system === 'dark' ? 'light' : 'dark';
document.getElementById('theme-demo').dataset.theme = next;
} else {
delete document.getElementById('theme-demo').dataset.theme;
}
}
document.getElementById('toggle-btn').addEventListener('click', toggleTheme);
</script>
Skifteknap med tre tilstande
En mere raffineret skifteknap med tre tilstande: Lys | System | Mørk:
<div class="demo" id="theme-demo">Cycles: light → system → dark</div>
<div class="demo" data-theme="dark">Dark state example</div>
<p id="state-label">system</p>
<button id="cycle-btn">Cycle Theme</button>
<script>
const states = ['light', 'system', 'dark'];
let current = 'system';
const demo = document.getElementById('theme-demo');
const label = document.getElementById('state-label');
document.getElementById('cycle-btn').addEventListener('click', () => {
current = states[(states.indexOf(current) + 1) % states.length];
label.textContent = current;
if (current === 'system') { delete demo.dataset.theme; } else { demo.dataset.theme = current; }
});
</script>
Undgå blink med forkert tema
Anvend det gemte tema synkront, før siden vises:
<pre class="code-sample"><!-- In <head>, before any styles -->
<script>
const t = localStorage.getItem("theme");
if (t) document.documentElement.dataset.theme = t;
</script></pre>
Tilgængelighed for skifteknappen
Skifteknappen skal kommunikere den aktuelle tilstand til skærmlæsere. Opdatér den tilgængelige etiket, når der skiftes:
<button id="theme-toggle" aria-label="Switch to dark mode">🌙</button>
Animeret temaovergang
Jævne farveovergange, når temaet ændres:
<div class="demo" id="at-demo">Smooth theme transition</div>
<button onclick="document.documentElement.classList.add('theme-transitioning'); const d=document.getElementById('at-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff'; setTimeout(()=>document.documentElement.classList.remove('theme-transitioning'),250);">Toggle</button>
Reaktion på systemændringer
Reagér også, hvis brugeren ændrer sin operativsystempræference, mens siden er åben:
<p id="status">Listening for system theme changes…</p>
<script>
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
document.getElementById('status').textContent = 'System changed to ' + (e.matches ? 'dark' : 'light');
});
</script>
Ikoner til mørk tilstand
Skift ikoner for hver tilstand. Brug elementet picture til temabevidste billeder, eller brug CSS til at vise og skjule forskellige ikoner:
<div>Light: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>
<div data-theme="dark">Dark: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>
Opsummering: Tjekliste til implementering
Tjekliste til mørk tilstand:
- CSS-variabler til alle farvetokens
- Media query'en prefers-color-scheme til automatisk registrering
- Attributten data-theme til manuel tilsidesættelse
- localStorage til at gemme præferencen
- Et inline-script i head for at forhindre blink
- En tilgængelig skifteknap med dynamisk aria-label
Hurtigt tjek
Hvilken teknik forhindrer et «blink med forkert tema», når siden indlæses?
Opsummering
En komplet skiftefunktion til mørk tilstand bruger CSS-variabler til temats tokens, en prefers-color-scheme-forespørgsel til automatisk registrering, attributten data-theme til manuel tilsidesættelse, localStorage til at gemme præferencen og et synkront script i head for at forhindre blink. Giv brugerne en tilgængelig skifteknap med tre tilstande (lys/system/mørk) for at sikre den bedste brugeroplevelse.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Automatisk og manuel skift af mørk tilstand” gratis?
Ja — hele teksten til “Automatisk og manuel skift af mørk tilstand” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Automatisk og manuel skift af mørk tilstand”?
Byg en temaskifter, der som standard respekterer systemindstillingen og lader brugerne tilsidesætte den manuelt. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “Automatisk og manuel skift af mørk tilstand”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Medieforespørgsel med prefers-color-scheme
- CSS-variabler til tematisering
- Egenskaben color-scheme
- Automatisk og manuel skift af mørk tilstand