M

MLOG

Latviešu

Ieviesiet tumšo režīmu savā vietnē ar šo visaptverošo ceļvedi. Uzziniet par CSS media vaicājumiem, JavaScript pārslēgiem, pieejamības apsvērumiem un labākajiem paņēmieniem vienmērīgai lietotāja pieredzei.

Tumšā Režīma Ieviešana: Visaptverošs Ceļvedis ar CSS un JavaScript

Tumšais režīms kļūst arvien populārāks, piedāvājot ērtāku skatīšanās pieredzi, īpaši vājā apgaismojumā. Šis ceļvedis sniedz visaptverošu pārskatu par to, kā ieviest tumšo režīmu savā vietnē, izmantojot CSS un JavaScript, nodrošinot vienmērīgu un pieejamu lietotāja pieredzi globālai auditorijai.

Kāpēc Ieviest Tumšo Režīmu?

Ir vairāki pārliecinoši iemesli apsvērt tumšā režīma ieviešanu:

Metodes Tumšā Režīma Ieviešanai

Ir vairākas pieejas tumšā režīma ieviešanai, katrai no tām ir savas priekšrocības un trūkumi. Mēs izpētīsim visbiežāk izmantotās metodes:

1. Tumšā Režīma Ieviešana ar CSS Media Vaicājumiem

CSS media vaicājums prefers-color-scheme ļauj noteikt lietotāja vēlamo krāsu shēmu un attiecīgi piemērot dažādus stilus. Šis ir vienkāršākais un efektīvākais veids, kā ieviest tumšo režīmu lietotājiem, kuri jau ir iestatījuši savas sistēmas preferences.

Koda Piemērs

Pievienojiet savai stila lapai šādu CSS:

/* Noklusējuma (Gaišā) Tēma */
body {
  background-color: #fff;
  color: #000;
}

/* Tumšā Tēma */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Pielāgojiet citus elementus pēc vajadzības */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Skaidrojums:

Priekšrocības

Trūkumi

2. Tumšā Režīma Ieviešana ar JavaScript Pārslēgu

Izmantojot JavaScript pārslēgu, lietotājiem tiek nodrošināts manuāls slēdzis, lai kontrolētu vietnes tēmu. Tas lietotājiem nodrošina lielāku kontroli un ļauj viņiem ignorēt savas sistēmas preferences. Šī pieeja ir ļoti svarīga, lai apkalpotu lietotājus dažādās ierīcēs un platformās, kas var konsekventi neatbalstīt vai neatklāt sistēmas mēroga tumšā režīma iestatījumus.

HTML Struktūra

Vispirms pievienojiet savam HTML pārslēgšanas elementu:

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

Tas izveido vienkāršu pārslēgšanas slēdzi, izmantojot izvēles rūtiņu un dažus pielāgotus CSS stilus.

CSS Stili (Pēc Izvēles)

Jūs varat veidot pārslēgšanas slēdzi, izmantojot CSS. Šeit ir piemērs:

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

/* Noapaļoti slīdņi */
.slider.round {
  border-radius: 34px;
}

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

JavaScript Kods

Tagad pievienojiet šādu JavaScript kodu, lai apstrādātu pārslēgšanas funkcionalitāti:

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

// Funkcija tumšā režīma pārslēgšanai
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Saglabājiet lietotāja preferences localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Pārbaudiet localStorage, vai nav saglabātu preferences
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Pievienojiet notikumu klausītāju pārslēgšanai
darkModeToggle.addEventListener('change', toggleDarkMode);

Skaidrojums:

CSS Stili Tumšajam Režīmam (izmantojot klasi)

Atjauniniet savu CSS, lai izmantotu klasi dark-mode, lai piemērotu tumšās tēmas stilus:

/* Noklusējuma (Gaišā) Tēma */
body {
  background-color: #fff;
  color: #000;
}

/* Tumšā Tēma */
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;
}

Priekšrocības

Trūkumi

3. Media Vaicājumu un JavaScript Apvienošana

Vislabākā pieeja bieži ir CSS media vaicājumu un JavaScript pārslēgšanas apvienošana. Tas nodrošina labāko no abām pasaulēm: automātisku lietotāja vēlamās krāsu shēmas noteikšanu, vienlaikus ļaujot lietotājiem manuāli ignorēt sistēmas preferences. Tas apmierina plašāku auditoriju, tostarp tos, kuri, iespējams, nezina vai nespēj mainīt savus sistēmas mēroga tēmas iestatījumus.

Koda Piemērs

Izmantojiet to pašu HTML un CSS no JavaScript Pārslēgšanas piemēra. Modificējiet JavaScript, lai pārbaudītu sistēmas preferences:

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

// Funkcija tumšā režīma pārslēgšanai
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Saglabājiet lietotāja preferences localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Pārbaudiet localStorage, vai nav saglabātu preferences, pēc tam sistēmas preferences
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;
}

// Pievienojiet notikumu klausītāju pārslēgšanai
darkModeToggle.addEventListener('change', toggleDarkMode);

Skaidrojums:

Priekšrocības

Trūkumi

Pieejamības Apsvērumi

Ieviešot tumšo režīmu, ir ļoti svarīgi ņemt vērā pieejamību, lai nodrošinātu, ka jūsu vietne paliek lietojama visiem lietotājiem. Atcerieties, ka vienkārša krāsu invertēšana automātiski negarantē pieejamību. Šeit ir daži galvenie apsvērumi:

Labākā Prakse Tumšā Režīma Ieviešanai

Šeit ir daži labākie paņēmieni, kas jāievēro, ieviešot tumšo režīmu savā vietnē:

Piemērs: CSS Mainīgie Tēmu Veidošanai

CSS mainīgie ļauj ērti pārslēgties starp gaišām un tumšām tēmām. Definējiet mainīgos pseido-klasē :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;
}

Tagad, kad ķermenim tiek pievienota klase dark-mode, CSS mainīgie tiek atjaunināti un stili tiek automātiski piemēroti.

Secinājums

Tumšā režīma ieviešana var ievērojami uzlabot jūsu vietnes lietotāja pieredzi, uzlabot pieejamību un pat ietaupīt akumulatora darbības laiku. Ievērojot šajā ceļvedī izklāstītās metodes un labāko praksi, varat izveidot vienmērīgu un patīkamu tumšā režīma pieredzi saviem lietotājiem visā pasaulē.

Atcerieties piešķirt prioritāti pieejamībai un rūpīgi pārbaudiet savu ieviešanu, lai nodrošinātu, ka jūsu vietne joprojām ir lietojama visiem lietotājiem neatkarīgi no viņu vēlmēm vai redzes spējām.

Pārdomāti ieviešot tumšo režīmu, jūs ne tikai sekojat tendencei, bet arī veidojat iekļaujošāku un lietotājam draudzīgāku tīmekļa pieredzi globālai auditorijai. Šī apņemšanās nodrošināt lietotāja pieredzi var ievērojami uzlabot jūsu vietnes vispārējo veiktspēju un pievilcību.

Tumšā Režīma Ieviešana: Visaptverošs Ceļvedis ar CSS un JavaScript | MLOG