Implementacija temnega načina: celovit vodnik s CSS in JavaScriptom

Temni način je postal vse bolj priljubljen, saj ponuja udobnejšo izkušnjo gledanja, zlasti v okoljih s šibko svetlobo. Ta vodnik ponuja celovit pregled, kako implementirati temni način na vaši spletni strani z uporabo CSS in JavaScripta, ter zagotoviti brezhibno in dostopno uporabniško izkušnjo za globalno občinstvo.

Zakaj implementirati temni način?

Obstaja več prepričljivih razlogov za razmislek o implementaciji temnega načina:

• Izboljšana uporabniška izkušnja: Mnogim uporabnikom se zdi temni način lažji za oči, saj zmanjšuje napetost oči, zlasti pri brskanju ponoči ali v slabo osvetljenih okoljih. To ustreza globalnemu občinstvu z različnimi navadami uporabe zaslona in svetlobnimi pogoji.
• Dostopnost: Temni način lahko izboljša dostopnost za uporabnike z okvarami vida ali občutljivostjo na svetlobo. Z zagotavljanjem možnosti visokega kontrasta naredite svojo spletno stran bolj vključujočo.
• Življenjska doba baterije: Na napravah z zasloni OLED ali AMOLED lahko temni način zmanjša porabo energije in podaljša življenjsko dobo baterije. To je še posebej pomembno za mobilne uporabnike na območjih z omejenim dostopom do polnilne infrastrukture.
• Sodoben oblikovalski trend: Temni način je priljubljen oblikovalski trend in njegova implementacija lahko vaši spletni strani da sodobnejši in privlačnejši videz. To izboljša zaznavanje blagovne znamke in vključenost uporabnikov.

Metode za implementacijo temnega načina

Obstaja več pristopov k implementaciji temnega načina, vsak s svojimi prednostmi in slabostmi. Raziskali bomo najpogostejše metode:

• Medijske poizvedbe CSS (prefers-color-scheme): Ta metoda samodejno zazna uporabnikovo želeno barvno shemo na podlagi nastavitev operacijskega sistema.
• Preklopnik v JavaScriptu: Ta metoda ponuja ročni preklopnik (npr. stikalo ali gumb), ki uporabnikom omogoča preklapljanje med svetlim in temnim načinom.
• Kombiniranje medijskih poizvedb in JavaScripta: Ta pristop združuje prednosti obeh metod, saj zagotavlja samodejno zaznavanje in hkrati omogoča uporabnikom, da preglasijo sistemske nastavitve.

1. Implementacija temnega načina z medijskimi poizvedbami CSS

Medijska poizvedba CSS prefers-color-scheme omogoča zaznavanje uporabnikove želene barvne sheme in ustrezno uporabo različnih stilov. To je najpreprostejši in najučinkovitejši način za implementacijo temnega načina za uporabnike, ki so že nastavili svoje sistemske preference.

Primer kode

V svojo slogovno datoteko dodajte naslednji CSS:

/* Privzeta (svetla) tema */
body {
  background-color: #fff;
  color: #000;
}

/* Temna tema */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Po potrebi prilagodite druge elemente */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Pojasnilo:

• Prvi blok CSS definira stile privzete (svetle) teme.
• Blok @media (prefers-color-scheme: dark) uporabi stile samo takrat, ko je uporabnikov sistem nastavljen na temni način.
• Znotraj bloka @media lahko definirate stile temnega načina za različne elemente, kot so ozadje telesa in barva besedila, naslovi in povezave.

Prednosti

• Samodejno zaznavanje: Brskalnik samodejno zazna uporabnikove preference in zagotavlja brezhibno izkušnjo.
• Enostavna implementacija: Ta metoda zahteva minimalno količino kode in je enostavna za implementacijo.
• Zmogljivost: Medijske poizvedbe CSS brskalnik obravnava učinkovito.

Slabosti

• Omejen nadzor: Uporabniki ne morejo ročno preklapljati med svetlim in temnim načinom znotraj vaše spletne strani.
• Odvisnost od sistemskih nastavitev: Videz je v celoti odvisen od uporabnikovih sistemskih nastavitev, ki se jih morda ne zaveda ali jih ne more spremeniti.

2. Implementacija temnega načina s preklopnikom v JavaScriptu

Uporaba preklopnika v JavaScriptu uporabnikom omogoča ročno stikalo za nadzor teme spletne strani. To daje uporabnikom več nadzora in jim omogoča, da preglasijo svoje sistemske nastavitve. Ta pristop je ključnega pomena za uporabnike na različnih napravah in platformah, ki morda ne podpirajo ali ne izpostavljajo dosledno sistemskih nastavitev temnega načina.

Struktura HTML

Najprej v svoj HTML dodajte element za preklop:

<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>

To ustvari preprosto preklopno stikalo z uporabo potrditvenega polja in nekaj prilagojenega sloga CSS.

Oblikovanje s CSS (izbirno)

Preklopno stikalo lahko oblikujete z uporabo CSS. Tukaj je primer:

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Zaobljeni drsniki */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

Koda JavaScript

Sedaj dodajte naslednjo kodo JavaScript za upravljanje funkcionalnosti preklopa:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funkcija za preklop temnega načina
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Shrani uporabnikovo izbiro v localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Preveri localStorage za shranjeno izbiro
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Dodaj poslušalca dogodkov na preklopnik
darkModeToggle.addEventListener('change', toggleDarkMode);

Pojasnilo:

• Koda pridobi element preklopnika in element telesa (body).
• Funkcija toggleDarkMode preklopi razred dark-mode na elementu telesa.
• Koda uporablja localStorage za shranjevanje uporabnikove izbire, tako da ta ostane ohranjena med sejami.
• Koda ob nalaganju strani preveri localStorage, da uporabi shranjeno izbiro.
• Na preklopnik je dodan poslušalec dogodkov, tako da se funkcija toggleDarkMode pokliče ob kliku na preklopnik.

Oblikovanje s CSS za temni način (z uporabo razreda)

Posodobite svoj CSS tako, da boste za uporabo stilov temne teme uporabljali razred dark-mode:

/* Privzeta (svetla) tema */
body {
  background-color: #fff;
  color: #000;
}

/* Temna tema */
body.dark-mode {
  background-color: #222;
  color: #fff;
}

body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
  color: #ddd;
}

body.dark-mode a {
  color: #8ab4f8;
}

Prednosti

• Uporabniški nadzor: Uporabniki lahko ročno preklapljajo med svetlim in temnim načinom znotraj vaše spletne strani.
• Vztrajnost: Uporabnikova izbira je shranjena z uporabo localStorage, tako da ostane ohranjena med sejami.

Slabosti

• Bolj zapletena implementacija: Ta metoda zahteva več kode kot zgolj uporaba medijskih poizvedb CSS.
• Odvisnost od JavaScripta: Funkcionalnost preklopa je odvisna od tega, ali je v uporabnikovem brskalniku omogočen JavaScript.

3. Kombiniranje medijskih poizvedb in JavaScripta

Najboljši pristop je pogosto kombinacija medijskih poizvedb CSS in preklopnika v JavaScriptu. To zagotavlja najboljše iz obeh svetov: samodejno zaznavanje uporabnikove želene barvne sheme, hkrati pa uporabnikom omogoča ročno preglasitev sistemskih nastavitev. To ustreza širšemu občinstvu, vključno s tistimi, ki se morda ne zavedajo ali ne morejo spremeniti svojih sistemskih nastavitev teme.

Primer kode

Uporabite isti HTML in CSS iz primera s preklopnikom v JavaScriptu. Spremenite JavaScript tako, da preverja sistemske nastavitve:

const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;

// Funkcija za preklop temnega načina
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Shrani uporabnikovo izbiro v localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Preveri localStorage za shranjeno izbiro, nato sistemsko nastavitev
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Dodaj poslušalca dogodkov na preklopnik
darkModeToggle.addEventListener('change', toggleDarkMode);

Pojasnilo:

• Koda najprej preveri localStorage za shranjeno izbiro.
• Če v localStorage ni najdene izbire, preveri, ali uporabnikov sistem preferira temni način z uporabo window.matchMedia.
• Če sistem preferira temni način, se telesu doda razred dark-mode in preklopnik se označi kot vklopljen.

Prednosti

• Samodejno zaznavanje in uporabniški nadzor: Zagotavlja tako samodejno zaznavanje kot ročni nadzor.
• Vztrajnost: Uporabnikova izbira je shranjena z uporabo localStorage.

Slabosti

• Nekoliko bolj zapleteno: Ta metoda je nekoliko bolj zapletena kot uporaba katere koli metode same zase.
• Odvisnost od JavaScripta: Odvisno od tega, ali je JavaScript omogočen.

Vidiki dostopnosti

Pri implementaciji temnega načina je ključno upoštevati dostopnost, da zagotovite, da vaša spletna stran ostane uporabna za vse uporabnike. Ne pozabite, da zgolj invertiranje barv ne zagotavlja samodejno dostopnosti. Tukaj je nekaj ključnih premislekov:

• Barvni kontrast: Zagotovite zadosten barvni kontrast med besedilom in ozadjem tako v svetlem kot v temnem načinu. Uporabite orodja, kot je WebAIM-ov Contrast Checker (webaim.org/resources/contrastchecker/), da preverite, ali vaše barvne kombinacije ustrezajo standardom dostopnosti. To je še posebej pomembno za uporabnike s slabšim vidom.
• Indikatorji fokusa: Poskrbite, da so indikatorji fokusa jasno vidni tako v svetlem kot v temnem načinu, da lahko uporabniki, ki se pomikajo s tipkovnico, enostavno vidijo, kateri element je trenutno v fokusu.
• Slike in ikone: Razmislite, kako bodo slike in ikone videti v temnem načinu. Morda boste morali zagotoviti alternativne različice ali uporabiti filtre CSS za prilagoditev njihovih barv za optimalno vidljivost.
• Testiranje z uporabniki: Testirajte svojo implementacijo temnega načina z uporabniki z različnimi okvarami vida, da prepoznate in odpravite morebitne težave z dostopnostjo.

Najboljše prakse za implementacijo temnega načina

Tukaj je nekaj najboljših praks, ki jih je treba upoštevati pri implementaciji temnega načina na vaši spletni strani:

• Uporaba spremenljivk CSS (lastnosti po meri): Spremenljivke CSS vam omogočajo, da definirate barve in druge stile na osrednji lokaciji, kar olajša upravljanje in posodabljanje vaše teme.
• Temeljito testiranje: Testirajte svojo implementacijo temnega načina na različnih napravah in brskalnikih, da zagotovite doslednost.
• Zagotovite jasen preklopnik: Poskrbite, da bo preklopno stikalo enostavno najti in uporabljati. Uporabite jasno in intuitivno ikono, ki označuje njegovo funkcijo.
• Upoštevajte preference uporabnikov: Spoštujte preference uporabnikov in jih shranite z uporabo localStorage ali piškotkov.
• Ohranjajte doslednost: Poskrbite, da bo vaša implementacija temnega načina dosledna po celotni spletni strani.

Primer: Spremenljivke CSS za teme

Spremenljivke CSS olajšajo preklapljanje med svetlo in temno temo. Definirajte spremenljivke v psevdo-razredu :root:

:root {
  --bg-color: #fff;
  --text-color: #000;
  --link-color: #007bff;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

body.dark-mode {
  --bg-color: #222;
  --text-color: #fff;
  --link-color: #8ab4f8;
}

Sedaj, ko se telesu doda razred dark-mode, se spremenljivke CSS posodobijo in stili se samodejno uporabijo.

Zaključek

Implementacija temnega načina lahko znatno izboljša uporabniško izkušnjo vaše spletne strani, poveča dostopnost in celo prihrani življenjsko dobo baterije. Z upoštevanjem tehnik in najboljših praks, opisanih v tem vodniku, lahko ustvarite brezhibno in prijetno izkušnjo temnega načina za svoje uporabnike po vsem svetu.

Ne pozabite dati prednosti dostopnosti in temeljito testirati svoje implementacije, da zagotovite, da vaša spletna stran ostane uporabna za vse uporabnike, ne glede na njihove preference ali vizualne sposobnosti.

S premišljeno implementacijo temnega načina ne sledite le trendu, temveč ustvarjate tudi bolj vključujočo in uporabniku prijazno spletno izkušnjo za globalno občinstvo. Ta predanost uporabniški izkušnji lahko močno koristi splošni uspešnosti in privlačnosti vaše spletne strani.