M

MLOG

Українська

Імплементуйте темний режим на своєму веб-сайті за допомогою цього вичерпного посібника. Дізнайтеся про медіа-запити CSS, перемикачі JavaScript, доступність та найкращі практики.

Імплементація темного режиму: повний посібник із CSS та JavaScript

Темний режим стає все більш популярним, пропонуючи більш комфортне сприйняття, особливо в умовах слабкого освітлення. Цей посібник надає вичерпний огляд того, як реалізувати темний режим на вашому веб-сайті за допомогою CSS та JavaScript, забезпечуючи плавний та доступний користувацький досвід для глобальної аудиторії.

Чому варто впроваджувати темний режим?

Існує кілька вагомих причин розглянути можливість впровадження темного режиму:

Методи впровадження темного режиму

Існує кілька підходів до впровадження темного режиму, кожен зі своїми перевагами та недоліками. Ми розглянемо найпоширеніші методи:

1. Впровадження темного режиму за допомогою медіа-запитів CSS

Медіа-запит CSS prefers-color-scheme дозволяє виявляти бажану схему кольорів користувача та відповідним чином застосовувати різні стилі. Це найпростіший та найефективніший спосіб реалізувати темний режим для користувачів, які вже встановили свої системні налаштування.

Приклад коду

Додайте наступний CSS до вашого файлу стилів:

/* Стандартна (світла) тема */
body {
  background-color: #fff;
  color: #000;
}

/* Темна тема */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
    color: #fff;
  }
  /* Налаштуйте інші елементи за потреби */
  h1, h2, h3 {
    color: #ddd;
  }
  a {
    color: #8ab4f8;
  }
}

Пояснення:

Переваги

Недоліки

2. Впровадження темного режиму за допомогою перемикача JavaScript

Використання перемикача JavaScript надає користувачам ручний перемикач для керування темою веб-сайту. Це дає користувачам більше контролю та дозволяє їм перевизначати системні налаштування. Цей підхід має вирішальне значення для обслуговування користувачів на різних пристроях та платформах, які можуть не послідовно підтримувати або надавати доступ до системних налаштувань темного режиму.

Структура HTML

Спочатку додайте елемент перемикача до свого HTML:

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

Це створює простий перемикач за допомогою прапорця та деяких користувацьких стилів CSS.

Стилізація CSS (Необов'язково)

Ви можете стилізувати перемикач за допомогою CSS. Ось приклад:


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

/* Круглі повзунки */
.slider.round {
  border-radius: 34px;
}

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

Код JavaScript

Тепер додайте наступний код JavaScript для обробки функціональності перемикача:


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

// Функція для перемикання темного режиму
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Зберегти переваги користувача в localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Перевірити localStorage на збережені переваги
if (localStorage.getItem('darkMode') === 'enabled') {
  body.classList.add('dark-mode');
  darkModeToggle.checked = true;
}

// Додати обробник подій до перемикача
darkModeToggle.addEventListener('change', toggleDarkMode);

Пояснення:

Стилізація CSS для темного режиму (з використанням класу)

Оновіть свій CSS, щоб використовувати клас dark-mode для застосування стилів темної теми:


/* Стандартна (світла) тема */
body {
  background-color: #fff;
  color: #000;
}

/* Темна тема */
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;
}

Переваги

Недоліки

3. Комбінування медіа-запитів та JavaScript

Найкращий підхід часто полягає в поєднанні медіа-запитів CSS та перемикача JavaScript. Це забезпечує найкраще з обох світів: автоматичне виявлення бажаної схеми кольорів користувача, а також дозволяє користувачам вручну перевизначати системні налаштування. Це задовольняє ширшу аудиторію, включаючи тих, хто може не знати про системні налаштування теми або не мати можливості їх змінити.

Приклад коду

Використовуйте той самий HTML та CSS з прикладу перемикача JavaScript. Змініть JavaScript, щоб перевірити системні налаштування:


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

// Функція для перемикання темного режиму
function toggleDarkMode() {
  body.classList.toggle('dark-mode');

  // Зберегти переваги користувача в localStorage
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
}

// Перевірити localStorage на збережені переваги, потім системні налаштування
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;
}

// Додати обробник подій до перемикача
darkModeToggle.addEventListener('change', toggleDarkMode);

Пояснення:

Переваги

Недоліки

Міркування щодо доступності

При впровадженні темного режиму надзвичайно важливо враховувати доступність, щоб ваш веб-сайт залишався придатним для всіх користувачів. Пам'ятайте, що просте інвертування кольорів не гарантує автоматичної доступності. Ось кілька ключових міркувань:

Найкращі практики для впровадження темного режиму

Ось кілька найкращих практик, яких слід дотримуватися при впровадженні темного режиму на вашому веб-сайті:

Приклад: CSS-змінні для тематизації

CSS-змінні полегшують перемикання між світлими та темними темами. Визначте змінні в псевдокласі :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;
}

Тепер, коли клас dark-mode додається до тіла, CSS-змінні оновлюються, і стилі застосовуються автоматично.

Висновок

Впровадження темного режиму може значно покращити користувацький досвід вашого веб-сайту, покращити доступність і навіть заощадити час роботи акумулятора. Дотримуючись методів та найкращих практик, викладених у цьому посібнику, ви можете створити плавний та приємний досвід темного режиму для своїх користувачів у всьому світі.

Пам'ятайте, що пріоритетом є доступність та ретельне тестування вашої реалізації, щоб гарантувати, що ваш веб-сайт залишається придатним для всіх користувачів, незалежно від їхніх переваг або візуальних можливостей.

Продумано впроваджуючи темний режим, ви не просто слідуєте тенденції, але й створюєте більш інклюзивний та зручний веб-досвід для глобальної аудиторії. Ця відданість користувацькому досвіду може значно покращити загальну продуктивність та привабливість вашого веб-сайту.