M

MLOG

Română

Implementează modul întunecat pe site-ul tău cu acest ghid cuprinzător. Află despre interogările media CSS, comutatoarele JavaScript, considerațiile de accesibilitate și cele mai bune practici.

Implementarea Modului Întunecat: Un Ghid Cuprinzător cu CSS și JavaScript

Modul întunecat a devenit din ce în ce mai popular, oferind o experiență de vizionare mai confortabilă, mai ales în medii slab iluminate. Acest ghid oferă o imagine de ansamblu cuprinzătoare asupra modului de implementare a modului întunecat pe site-ul dvs. web utilizând CSS și JavaScript, asigurând o experiență de utilizator perfectă și accesibilă pentru un public global.

De ce să implementezi modul întunecat?

Există mai multe motive convingătoare pentru a lua în considerare implementarea modului întunecat:

Metode de implementare a modului întunecat

Există mai multe abordări pentru implementarea modului întunecat, fiecare cu propriile avantaje și dezavantaje. Vom explora cele mai comune metode:

1. Implementarea modului întunecat cu interogări media CSS

Interogarea media CSS prefers-color-scheme vă permite să detectați schema de culori preferată a utilizatorului și să aplicați stiluri diferite în consecință. Aceasta este cea mai simplă și eficientă modalitate de a implementa modul întunecat pentru utilizatorii care și-au setat deja preferințele de sistem.

Exemplu de cod

Adăugați următorul CSS la foaia de stil:

/* Temă implicită (luminoasă) */
body {
  background-color: #fff;
  color: #000;
}

/* Temă întunecată */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Ajustați alte elemente după cum este necesar */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Explicație:

Avantaje

Dezavantaje

2. Implementarea modului întunecat cu un comutator JavaScript

Utilizarea unui comutator JavaScript oferă utilizatorilor un comutator manual pentru a controla tema site-ului web. Acest lucru oferă utilizatorilor mai mult control și le permite să anuleze preferințele sistemului. Această abordare este esențială pentru a se adresa utilizatorilor de pe diverse dispozitive și platforme care este posibil să nu suporte sau să nu expună în mod constant setările de mod întunecat la nivel de sistem.

Structura HTML

Mai întâi, adăugați un element de comutare la HTML:

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

Aceasta creează un comutator simplu folosind o casetă de selectare și un stil CSS personalizat.

Stilizare CSS (opțional)

Puteți stiliza comutatorul folosind CSS. Iată un exemplu:

.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);
}

/* Glisoare rotunjite */
.slider.round {
  border-radius: 34px;
}

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

Cod JavaScript

Acum, adăugați următorul cod JavaScript pentru a gestiona funcționalitatea de comutare:

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

// Funcție pentru a comuta modul întunecat
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Stocați preferința utilizatorului în localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Verificați localStorage pentru preferința salvată
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Adăugați ascultător de evenimente la comutator
darkModeToggle.addEventListener('change', toggleDarkMode);

Explicație:

Stilizare CSS pentru modul întunecat (folosind clasa)

Actualizați-vă CSS-ul pentru a utiliza clasa dark-mode pentru a aplica stilurile temei întunecate:

/* Temă implicită (luminoasă) */
body {
  background-color: #fff;
  color: #000;
}

/* Temă întunecată */
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;
}

Avantaje

Dezavantaje

3. Combinarea interogărilor media și a JavaScript

Cea mai bună abordare este adesea combinarea interogărilor media CSS și a unui comutator JavaScript. Acest lucru oferă ce este mai bun din ambele lumi: detectarea automată a schemei de culori preferate a utilizatorului, permițând în același timp utilizatorilor să anuleze manual preferința sistemului. Acest lucru se adresează unui public mai larg, inclusiv celor care ar putea să nu fie conștienți de setările de temă la nivel de sistem sau să nu le poată schimba.

Exemplu de cod

Utilizați același HTML și CSS din exemplul JavaScript Toggle. Modificați JavaScript pentru a verifica preferința sistemului:

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

// Funcție pentru a comuta modul întunecat
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Stocați preferința utilizatorului în localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Verificați localStorage pentru preferința salvată, apoi preferința sistemului
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;
}

// Adăugați ascultător de evenimente la comutator
darkModeToggle.addEventListener('change', toggleDarkMode);

Explicație:

Avantaje

Dezavantaje

Considerații de accesibilitate

Când implementați modul întunecat, este esențial să luați în considerare accesibilitatea pentru a vă asigura că site-ul dvs. web rămâne utilizabil pentru toți utilizatorii. Amintiți-vă că simpla inversare a culorilor nu garantează automat accesibilitatea. Iată câteva considerații cheie:

Cele mai bune practici pentru implementarea modului întunecat

Iată câteva dintre cele mai bune practici de urmat atunci când implementați modul întunecat pe site-ul dvs. web:

Exemplu: Variabile CSS pentru tematizare

Variabilele CSS facilitează comutarea între temele de mod luminos și întunecat. Definiți variabilele în pseudo-clasa :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;
}

Acum, când clasa dark-mode este adăugată corpului, variabilele CSS sunt actualizate, iar stilurile sunt aplicate automat.

Concluzie

Implementarea modului întunecat poate îmbunătăți semnificativ experiența utilizatorului pe site-ul dvs. web, poate îmbunătăți accesibilitatea și chiar poate economisi durata de viață a bateriei. Urmând tehnicile și cele mai bune practici prezentate în acest ghid, puteți crea o experiență de mod întunecat perfectă și plăcută pentru utilizatorii dvs. din întreaga lume.

Nu uitați să acordați prioritate accesibilității și să vă testați temeinic implementarea pentru a vă asigura că site-ul dvs. web rămâne utilizabil pentru toți utilizatorii, indiferent de preferințele sau abilitățile lor vizuale.

Prin implementarea atentă a modului întunecat, nu doar că urmați o tendință, ci și creați o experiență web mai incluzivă și mai ușor de utilizat pentru un public global. Această dedicare pentru experiența utilizatorului poate beneficia foarte mult performanța și atractivitatea generală a site-ului dvs. web.