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

Теперь, когда к body добавляется класс dark-mode, переменные CSS обновляются, и стили применяются автоматически.

Заключение

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

Не забывайте уделять приоритетное внимание доступности и тщательно тестировать вашу реализацию, чтобы ваш сайт оставался удобным для всех пользователей, независимо от их предпочтений или зрительных способностей.

Продуманно внедряя тёмный режим, вы не просто следуете тренду, но и создаёте более инклюзивный и дружелюбный веб-опыт для глобальной аудитории. Такая преданность пользовательскому опыту может значительно повысить общую производительность и привлекательность вашего сайта.