Использование темного режима: медиа-запросы и методы для потрясающего пользовательского опыта

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

Метод 1. Использование медиазапросов CSS

Медиа-запросы CSS позволяют применять различные стили в зависимости от настроек устройства пользователя. Чтобы реализовать темный режим с помощью медиа-запросов, вы можете настроить функцию предпочтения цветовой схемы.

@media (prefers-color-scheme: dark) {
  /* Dark mode styles */
  body {
    background-color: #222;
    color: #fff;
  }
}

В приведенном выше примере стили темного режима будут применяться, когда на устройстве пользователя установлен темный режим. Вы можете настроить стили в соответствии с дизайном вашего сайта.

Метод 2: подход на основе классов

Другой подход — переключение класса элемента HTML в зависимости от предпочтений пользователя. Этот метод позволяет пользователям вручную переключаться между светлым и темным режимами.

HTML:

<html class="light-mode">

CSS:

.light-mode {
  /* Light mode styles */
}
.dark-mode {
  /* Dark mode styles */
}

JavaScript:

const html = document.querySelector('html');
const toggleDarkMode = () => {
  html.classList.toggle('dark-mode');
};
/* Add event listener to a toggle button */
const toggleButton = document.querySelector('#toggle-dark-mode');
toggleButton.addEventListener('click', toggleDarkMode);

При таком подходе вы можете использовать JavaScript для переключения класса dark-modeв элементе HTML, когда пользователь нажимает кнопку переключения.

Метод 3. Хранение пользовательских настроек

Чтобы запомнить предпочтения пользователя в отношении темного режима между сеансами, вы можете сохранить его выбор в локальном хранилище или в файле cookie. Вот пример использования локального хранилища:

JavaScript:

const html = document.querySelector('html');
const toggleDarkMode = () => {
  html.classList.toggle('dark-mode');
  localStorage.setItem('darkModeEnabled', html.classList.contains('dark-mode'));
};
/* Check if dark mode preference exists in local storage */
const darkModeEnabled = localStorage.getItem('darkModeEnabled');
if (darkModeEnabled === 'true') {
  html.classList.add('dark-mode');
}

Сохраняя предпочтения пользователя в локальном хранилище, вы можете загрузить предпочтительный режим, когда пользователь вернется на ваш сайт.

Внедрение темного режима на вашем веб-сайте повышает удобство работы пользователей и обеспечивает визуально привлекательный дизайн. Используя медиа-запросы CSS, подходы на основе классов и хранилище пользовательских предпочтений, вы можете предложить своим пользователям беспроблемную работу в темном режиме. Поэкспериментируйте с этими методами и найдите тот, который лучше всего соответствует дизайну и функциональности вашего сайта.