M

MLOG

Русский

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

Функция light-dark в CSS: автоматическая адаптация темы для глобального веба

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

Зачем внедрять автоматические светлую и тёмную темы?

Существует несколько веских причин для включения автоматической адаптации темы в ваши веб-проекты:

Как реализовать автоматическую адаптацию темы с помощью CSS

В основе автоматической адаптации темы лежит медиазапрос prefers-color-scheme. Этот медиазапрос CSS позволяет определить предпочитаемую пользователем цветовую схему (светлую или тёмную) и применить соответствующие стили.

Шаг 1: Определите пользовательские свойства (переменные CSS)

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


:root {
  --background-color: #ffffff; /* Фон светлой темы */
  --text-color: #000000; /* Текст светлой темы */
  --link-color: #007bff; /* Ссылка светлой темы */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* Фон тёмной темы */
    --text-color: #ffffff; /* Текст тёмной темы */
    --link-color: #66b3ff; /* Ссылка тёмной темы */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

В этом примере мы определяем переменные для цвета фона, текста, ссылок и кнопок. Селектор :root применяет эти переменные ко всему документу. Затем медиазапрос @media (prefers-color-scheme: dark) переопределяет эти переменные значениями для тёмной темы, когда пользователь установил в своей системе тёмный режим.

Шаг 2: Примените пользовательские свойства к вашим стилям

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


body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* Плавный переход */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

Здесь мы используем функцию var() для доступа к значениям наших пользовательских свойств. Мы также добавили свойство transition к элементу body для создания плавного перехода между темами.

Шаг 3: Тестирование и доработка

Тщательно протестируйте вашу реализацию в разных браузерах и операционных системах. Современные браузеры, такие как Chrome, Firefox, Safari и Edge, полностью поддерживают медиазапрос prefers-color-scheme. Вы можете переключаться между светлым и тёмным режимами в настройках вашей операционной системы, чтобы увидеть изменения на вашем сайте.

Продвинутые техники и соображения

Предоставление ручного переключателя тем

Хотя автоматическая адаптация темы — это отличная отправная точка, некоторые пользователи могут предпочесть вручную переопределить системные настройки. Вы можете предоставить ручной переключатель тем с помощью JavaScript и локального хранилища (local storage).

HTML:

JavaScript:


const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // По умолчанию auto

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// Применяем начальную тему при загрузке страницы
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // Если установлено auto, позволяем prefers-color-scheme решать
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: Добавьте следующий CSS вместе с предыдущим. Обратите внимание на ручное переопределение:


body.light-theme {
  --background-color: #ffffff; /* Фон светлой темы */
  --text-color: #000000; /* Текст светлой темы */
  --link-color: #007bff; /* Ссылка светлой темы */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* Фон тёмной темы */
  --text-color: #ffffff; /* Текст тёмной темы */
  --link-color: #66b3ff; /* Ссылка тёмной темы */
  --button-background-color: #333;
  --button-text-color: #fff;
}

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

Обработка изображений и SVG

Некоторые изображения и SVG могут плохо выглядеть как в светлой, так и в тёмной теме. Вы можете использовать медиазапросы CSS для условного отображения различных версий этих ресурсов.


img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

Этот фрагмент кода показывает одно изображение (с классом light-mode) в светлом режиме и другое изображение (с классом dark-mode) в тёмном режиме.

Рекомендации по цветовой палитре для международной аудитории

При выборе цветовых палитр для светлой и тёмной тем учитывайте культурные ассоциации и соображения доступности. Вот несколько общих рекомендаций:

Вопросы производительности

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

Вот несколько лучших практик для оптимизации производительности:

Лучшие практики доступности

Убедитесь, что ваши светлая и тёмная темы соответствуют рекомендациям по доступности, таким как WCAG (Web Content Accessibility Guidelines). Это включает в себя обеспечение достаточного цветового контраста, использование семантического HTML и обеспечение доступности всех интерактивных элементов с клавиатуры.

Вот несколько конкретных лучших практик доступности, которым следует придерживаться:

Примеры для разных регионов

Рассмотрим эти примеры того, как светлые и тёмные темы могут быть адаптированы для разнообразной глобальной аудитории:

Заключение

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

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