Tamsiojo režimo diegimas: išsamus vadovas su CSS ir „JavaScript“

Tamsusis režimas tampa vis populiaresnis, siūlydamas patogesnę žiūrėjimo patirtį, ypač esant prastam apšvietimui. Šis vadovas pateikia išsamią apžvalgą, kaip įdiegti tamsųjį režimą savo svetainėje naudojant CSS ir „JavaScript“, užtikrinant sklandžią ir prieinamą vartotojo patirtį pasaulinei auditorijai.

Kodėl verta diegti tamsųjį režimą?

Yra keletas svarių priežasčių, kodėl verta apsvarstyti tamsiojo režimo diegimą:

• Geresnė vartotojo patirtis: Daugeliui vartotojų tamsusis režimas yra malonesnis akims, mažinantis akių nuovargį, ypač naršant naktį ar prastai apšviestoje aplinkoje. Tai atitinka pasaulinės auditorijos, turinčios skirtingus ekrano naudojimo įpročius ir apšvietimo sąlygas, poreikius.
• Prieinamumas: Tamsusis režimas gali pagerinti prieinamumą vartotojams su regėjimo sutrikimais ar jautrumu šviesai. Suteikdami didelio kontrasto parinktį, savo svetainę padarote labiau įtraukią.
• Baterijos veikimo laikas: Įrenginiuose su OLED arba AMOLED ekranais tamsusis režimas gali sumažinti energijos suvartojimą ir pailginti baterijos veikimo laiką. Tai ypač aktualu mobiliųjų įrenginių vartotojams vietovėse su ribota prieiga prie įkrovimo infrastruktūros.
• Modernaus dizaino tendencija: Tamsusis režimas yra populiari dizaino tendencija, o jo įdiegimas gali padaryti jūsų svetainę modernesnę ir patrauklesnę. Tai pagerina prekės ženklo įvaizdį ir vartotojų įsitraukimą.

Tamsiojo režimo diegimo metodai

Yra keli tamsiojo režimo diegimo būdai, kurių kiekvienas turi savo privalumų ir trūkumų. Išnagrinėsime populiariausius metodus:

• CSS medijos užklausos (prefers-color-scheme): Šis metodas automatiškai aptinka vartotojo pageidaujamą spalvų schemą pagal jo operacinės sistemos nustatymus.
• „JavaScript“ perjungiklis: Šis metodas suteikia rankinį perjungiklį (pvz., jungiklį ar mygtuką), leidžiantį vartotojams perjungti tarp šviesaus ir tamsaus režimo.
• Medijos užklausų ir „JavaScript“ derinimas: Šis metodas apjungia abiejų metodų privalumus, suteikdamas automatinį aptikimą ir leisdamas vartotojams nepaisyti sistemos nuostatų.

1. Tamsiojo režimo diegimas su CSS medijos užklausomis

CSS medijos užklausa prefers-color-scheme leidžia jums aptikti vartotojo pageidaujamą spalvų schemą ir atitinkamai pritaikyti skirtingus stilius. Tai yra paprasčiausias ir efektyviausias būdas įdiegti tamsųjį režimą vartotojams, kurie jau yra nustatę savo sistemos nuostatas.

Kodo pavyzdys

Pridėkite šį CSS kodą į savo stilių failą:

/* Numatytasis (šviesus) stilius */
body {
  background-color: #fff;
  color: #000;
}

/* Tamsusis stilius */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Pritaikykite kitus elementus pagal poreikį */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Paaiškinimas:

• Pirmasis CSS blokas apibrėžia numatytuosius (šviesios) temos stilius.
• Blokas @media (prefers-color-scheme: dark) taiko stilius tik tada, kai vartotojo sistema yra nustatyta į tamsųjį režimą.
• @media bloko viduje galite apibrėžti tamsiojo režimo stilius įvairiems elementams, tokiems kaip pagrindinio fono ir teksto spalva, antraštės ir nuorodos.

Privalumai

• Automatinis aptikimas: Naršyklė automatiškai aptinka vartotojo nuostatas, suteikdama sklandžią patirtį.
• Paprastas įdiegimas: Šis metodas reikalauja minimalaus kodo ir yra lengvai įdiegiamas.
• Našumas: CSS medijos užklausas naršyklė apdoroja efektyviai.

Trūkumai

• Ribota kontrolė: Vartotojai negali rankiniu būdu perjungti tarp šviesaus ir tamsaus režimo jūsų svetainėje.
• Priklausomybė nuo sistemos nustatymų: Išvaizda visiškai priklauso nuo vartotojo sistemos nustatymų, apie kuriuos jis gali nežinoti arba negalėti jų pakeisti.

2. Tamsiojo režimo diegimas su „JavaScript“ perjungikliu

Naudojant „JavaScript“ perjungiklį suteikiama vartotojams galimybė rankiniu būdu valdyti svetainės temą. Tai suteikia vartotojams daugiau kontrolės ir leidžia jiems nepaisyti savo sistemos nuostatų. Šis metodas yra itin svarbus, norint prisitaikyti prie vartotojų, naudojančių įvairius įrenginius ir platformas, kurios gali nenuosekliai palaikyti ar rodyti visos sistemos tamsiojo režimo nustatymus.

HTML struktūra

Pirmiausia, pridėkite perjungiklio elementą į savo HTML:

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

Tai sukuria paprastą perjungiklį, naudojant žymimąjį langelį ir šiek tiek pritaikyto CSS stiliaus.

CSS stiliai (nebūtina)

Perjungiklį galite stilizuoti naudodami CSS. Štai pavyzdys:

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

/* Apvalūs slankikliai */
.slider.round {
  border-radius: 34px;
}

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

„JavaScript“ kodas

Dabar pridėkite šį „JavaScript“ kodą, kad valdytumėte perjungiklio funkcionalumą:

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

// Funkcija tamsiajam režimui perjungti
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Išsaugoti vartotojo pasirinkimą „localStorage“
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Patikrinti „localStorage“, ar yra išsaugotas pasirinkimas
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Pridėti įvykio klausytoją prie perjungiklio
darkModeToggle.addEventListener('change', toggleDarkMode);

Paaiškinimas:

• Kodas paima perjungiklio ir „body“ elementus.
• Funkcija toggleDarkMode perjungia klasę dark-mode ant „body“ elemento.
• Kodas naudoja localStorage, kad išsaugotų vartotojo pasirinkimą, todėl jis išlieka tarp seansų.
• Kodas tikrina localStorage puslapio įkėlimo metu, kad pritaikytų išsaugotą pasirinkimą.
• Prie perjungiklio pridedamas įvykio klausytojas, todėl paspaudus perjungiklį, iškviečiama funkcija toggleDarkMode.

Tamsiojo režimo CSS stiliai (naudojant klasę)

Atnaujinkite savo CSS, kad naudotumėte klasę dark-mode tamsiosios temos stiliams pritaikyti:

/* Numatytasis (šviesus) stilius */
body {
  background-color: #fff;
  color: #000;
}

/* Tamsusis stilius */
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;
}

Privalumai

• Vartotojo kontrolė: Vartotojai gali rankiniu būdu perjungti tarp šviesaus ir tamsaus režimo jūsų svetainėje.
• Išliekamumas: Vartotojo pasirinkimas išsaugomas naudojant localStorage, todėl jis išlieka tarp seansų.

Trūkumai

• Sudėtingesnis įdiegimas: Šis metodas reikalauja daugiau kodo nei naudojant tik CSS medijos užklausas.
• Priklausomybė nuo „JavaScript“: Perjungiklio funkcionalumas priklauso nuo to, ar vartotojo naršyklėje įjungtas „JavaScript“.

3. Medijos užklausų ir „JavaScript“ derinimas

Geriausias būdas dažnai yra derinti CSS medijos užklausas ir „JavaScript“ perjungiklį. Tai suteikia geriausius abiejų pasaulių aspektus: automatinį vartotojo pageidaujamos spalvų schemos aptikimą, kartu leidžiant vartotojams rankiniu būdu nepaisyti sistemos nuostatų. Tai pritaikyta platesnei auditorijai, įskaitant tuos, kurie gali nežinoti ar negalėti pakeisti savo visos sistemos temos nustatymų.

Kodo pavyzdys

Naudokite tą patį HTML ir CSS iš „JavaScript“ perjungiklio pavyzdžio. Pakeiskite „JavaScript“ kodą, kad patikrintumėte sistemos nuostatas:

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

// Funkcija tamsiajam režimui perjungti
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Išsaugoti vartotojo pasirinkimą „localStorage“
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Patikrinti „localStorage“ dėl išsaugoto pasirinkimo, tada sistemos nuostatas
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;
}

// Pridėti įvykio klausytoją prie perjungiklio
darkModeToggle.addEventListener('change', toggleDarkMode);

Paaiškinimas:

• Kodas pirmiausia patikrina localStorage, ar yra išsaugotas pasirinkimas.
• Jei localStorage nerandama jokio pasirinkimo, kodas patikrina, ar vartotojo sistema pageidauja tamsaus režimo, naudojant window.matchMedia.
• Jei sistema pageidauja tamsaus režimo, klasė dark-mode pridedama prie „body“ elemento, o perjungiklis pažymimas.

Privalumai

• Automatinis aptikimas ir vartotojo kontrolė: Suteikia tiek automatinį aptikimą, tiek rankinį valdymą.
• Išliekamumas: Vartotojo pasirinkimas išsaugomas naudojant localStorage.

Trūkumai

• Šiek tiek sudėtingesnis: Šis metodas yra šiek tiek sudėtingesnis nei naudojant bet kurį metodą atskirai.
• Priklausomybė nuo „JavaScript“: Priklauso nuo įjungto „JavaScript“.

Prieinamumo aspektai

Diegiant tamsųjį režimą, labai svarbu atsižvelgti į prieinamumą, kad jūsų svetainė liktų naudojama visiems vartotojams. Atminkite, kad paprastas spalvų inversavimas automatiškai neužtikrina prieinamumo. Štai keletas pagrindinių aspektų:

• Spalvų kontrastas: Užtikrinkite pakankamą spalvų kontrastą tarp teksto ir fono tiek šviesiame, tiek tamsiame režime. Naudokite įrankius, tokius kaip WebAIM kontrasto tikrintuvas (webaim.org/resources/contrastchecker/), kad patikrintumėte, ar jūsų spalvų deriniai atitinka prieinamumo standartus. Tai ypač svarbu silpnaregiams.
• Fokusavimo indikatoriai: Įsitikinkite, kad fokusavimo indikatoriai yra aiškiai matomi tiek šviesiame, tiek tamsiame režime, kad vartotojai, naviguojantys klaviatūra, galėtų lengvai matyti, kuris elementas yra sufokusuotas.
• Paveikslėliai ir piktogramos: Apsvarstykite, kaip paveikslėliai ir piktogramos atrodys tamsiame režime. Gali prireikti pateikti alternatyvias versijas arba naudoti CSS filtrus, kad pritaikytumėte jų spalvas optimaliam matomumui.
• Testavimas su vartotojais: Išbandykite savo tamsiojo režimo diegimą su vartotojais, turinčiais įvairių regos sutrikimų, kad nustatytumėte ir išspręstumėte bet kokias prieinamumo problemas.

Tamsiojo režimo diegimo geriausios praktikos

Štai keletas geriausių praktikų, kurių reikėtų laikytis diegiant tamsųjį režimą savo svetainėje:

• Naudokite CSS kintamuosius (Custom Properties): CSS kintamieji leidžia apibrėžti spalvas ir kitus stilius vienoje centrinėje vietoje, todėl lengviau valdyti ir atnaujinti temą.
• Kruopščiai testuokite: Išbandykite savo tamsiojo režimo diegimą skirtinguose įrenginiuose ir naršyklėse, kad užtikrintumėte nuoseklumą.
• Pateikite aiškų perjungiklį: Padarykite perjungiklį lengvai randamą ir naudojamą. Naudokite aiškią ir intuityvią piktogramą jo funkcijai nurodyti.
• Atsižvelkite į vartotojo nuostatas: Gerbkite vartotojo nuostatas ir išsaugokite jas naudodami localStorage ar slapukus.
• Išlaikykite nuoseklumą: Užtikrinkite, kad tamsiojo režimo diegimas būtų nuoseklus visoje jūsų svetainėje.

Pavyzdys: CSS kintamieji temų kūrimui

CSS kintamieji palengvina perjungimą tarp šviesios ir tamsios temos. Apibrėžkite kintamuosius pseudo-klasėje :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;
}

Dabar, kai klasė dark-mode pridedama prie „body“, CSS kintamieji atnaujinami, ir stiliai pritaikomi automatiškai.

Išvada

Tamsiojo režimo įdiegimas gali žymiai pagerinti jūsų svetainės vartotojo patirtį, prieinamumą ir netgi taupyti baterijos energiją. Laikydamiesi šiame vadove aprašytų metodų ir geriausių praktikų, galite sukurti sklandžią ir malonią tamsiojo režimo patirtį savo vartotojams visame pasaulyje.

Nepamirškite teikti pirmenybę prieinamumui ir kruopščiai išbandykite savo diegimą, kad užtikrintumėte, jog jūsų svetainė išliks naudojama visiems vartotojams, nepriklausomai nuo jų pageidavimų ar regėjimo galimybių.

Apgalvotai įdiegdami tamsųjį režimą, jūs ne tik sekate tendenciją, bet ir kuriate įtraukesnę bei patogesnę interneto patirtį pasaulinei auditorijai. Šis atsidavimas vartotojo patirčiai gali labai pagerinti jūsų svetainės bendrą našumą ir patrauklumą.