Automaattinen ja manuaalinen tumman tilan vaihto
Rakenna teeman vaihtokytkin, joka noudattaa oletuksena järjestelmän asetusta ja antaa käyttäjän ohittaa sen manuaalisesti.
Automaattinen ja manuaalinen tumman tilan vaihto on ilmainen CSS Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu CSS Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Tavoite
Ihanteellinen tumman tilan toteutus tunnistaa oletusarvoisesti käyttöjärjestelmän asetuksen ja tarjoaa vaihtopainikkeen, jolla käyttäjä voi ohittaa asetuksen itsenäisesti. Käyttäjän valinta säilyy myös sivun latausten välillä.
Arkkitehtuurin yleiskatsaus
Käsiteltävänä on kolme tilaa:
- Järjestelmän asetus: käyttäkää
prefers-color-scheme-ominaisuutta yhdessä CSS-muuttujien kanssa - Käyttäjän ohitus: dark: asettakaa luokka tai data-attribuutti
<html>-elementtiin - Käyttäjän ohitus: light: asettakaa eri luokka, joka estää automaattisen tumman tilan
CSS-tokenien määritys
Määritelkää CSS-muuttujat niin, että niiden periytyminen toimii oikein kaikissa tiloissa:
<div class="demo" data-theme="dark">Dark token demo</div>
<div class="demo" data-theme="light">Light token demo</div>
JavaScript-vaihtologiikka
Lukekaa tallennettu asetus, ottakaa se käyttöön ja päivittäkää asetus vaihtamisen yhteydessä:
<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>
Kolmitilainen vaihtopainike
Hienostuneempi kolmitilainen vaihtopainike: Vaalea | Järjestelmä | Tumma:
<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>
Väärän teeman välähtämisen estäminen
Ottakaa tallennettu teema käyttöön synkronisesti ennen sivun renderöintiä:
<pre class="code-sample"><!-- In <head>, before any styles -->
<script>
const t = localStorage.getItem("theme");
if (t) document.documentElement.dataset.theme = t;
</script></pre>
Vaihtopainikkeen esteettömyys
Vaihtopainikkeen tulee ilmoittaa nykyinen tila ruudunlukijoille. Päivittäkää saavutettavuusnimi, kun tilaa vaihdetaan:
<button id="theme-toggle" aria-label="Switch to dark mode">🌙</button>
Animoitu teemanvaihto
Sujuvat värisiirtymät teeman vaihtuessa:
<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>
Järjestelmämuutosten kuuntelu
Reagoikaa myös siihen, jos käyttäjä muuttaa käyttöjärjestelmän asetusta sivun ollessa avoinna:
<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>
Tumman tilan kuvakkeet
Vaihtakaa kuvakkeet tilan mukaan. Käyttäkää picture-elementtiä teemaan mukautuville kuville tai CSS:ää eri kuvakkeiden näyttämiseen ja piilottamiseen:
<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>
Yhteenveto: toteutuksen tarkistuslista
Tumman tilan tarkistuslista:
- CSS-muuttujat kaikille väritokeneille
- prefers-color-scheme-media query automaattista tunnistamista varten
- data-theme-attribuutti manuaalista ohitusta varten
- localStorage asetuksen säilyttämistä varten
- head-elementin sisäinen komentosarja välähtelyn estämistä varten
- saavutettava vaihtopainike, jonka aria-label päivittyy dynaamisesti
Pikatarkistus
Mikä tekniikka estää väärän teeman välähtämisen sivun latautuessa?
Kertaus
Täydellinen tumman tilan vaihtopainike käyttää teematokeneihin CSS-muuttujia, automaattiseen tunnistamiseen prefers-color-scheme-kyselyä, manuaaliseen ohitukseen data-theme-attribuuttia, asetuksen säilyttämiseen localStoragea ja välähtelyn estämiseen synkronista head-elementin komentosarjaa. Tarjotkaa saavutettava kolmitilainen vaihtopainike (vaalea/järjestelmä/tumma), jotta käyttökokemus olisi mahdollisimman hyvä.
Opi CSS tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Automaattinen ja manuaalinen tumman tilan vaihto” ilmainen?
Kyllä – oppitunnin ”Automaattinen ja manuaalinen tumman tilan vaihto” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko CSS Academy-kurssin, päivitä CoddyKit PROhon. CSS Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Automaattinen ja manuaalinen tumman tilan vaihto”?
Rakenna teeman vaihtokytkin, joka noudattaa oletuksena järjestelmän asetusta ja antaa käyttäjän ohittaa sen manuaalisesti. Harjoittelet CSS Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni CSS Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin CSS Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.
Kuinka kauan ”Automaattinen ja manuaalinen tumman tilan vaihto”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä CSS Academy-oppitunnilla?
Kyllä. Jokainen CSS Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- prefers-color-scheme-mediakysely
- CSS-muuttujat teemoitusta varten
- color-scheme-ominaisuus
- Automaattinen ja manuaalinen tumman tilan vaihto