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

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

Пример кода:

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

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

Пример кода:

// Check for saved mode preference in local storage
const savedMode = localStorage.getItem('mode');
// Apply the saved mode or default to system preference
if (savedMode === 'dark') {
  document.body.classList.add('dark-mode');
} else if (savedMode === 'light') {
  document.body.classList.add('light-mode');
} else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.body.classList.add('dark-mode');
} else {
  document.body.classList.add('light-mode');
}
// Toggle mode and save preference in local storage
function toggleMode() {
  const currentMode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
  document.body.classList.toggle('dark-mode');
  document.body.classList.toggle('light-mode');
  localStorage.setItem('mode', currentMode);
}

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

Пример использования Bootstrap:

<!-- Toggle switch -->
<input type="checkbox" id="modeToggle" class="form-check-input">
<label for="modeToggle" class="form-check-label">Toggle Light/Dark Mode</label>
<!-- Apply dark mode class to the body -->
<script>
  const modeToggle = document.getElementById('modeToggle');
  modeToggle.addEventListener('change', () => {
    document.body.classList.toggle('dark');
  });
</script>

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