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

Метод 1: медиа-запросы CSS

@media (prefers-color-scheme: dark) {
  /* Dark mode styles */
}

Метод 2: JavaScript и локальное хранилище

<!-- Add this script tag before the closing </body> tag -->
<script>
  // Check if dark mode is enabled and set the theme accordingly
  if (localStorage.getItem('darkModeEnabled') === 'true') {
    document.documentElement.classList.add('dark');
  }
</script>

Метод 3: кнопка переключения с помощью JavaScript

<!-- Add this HTML for the toggle button -->
<label class="switch">
  <input type="checkbox" id="darkModeToggle">
  <span class="slider round"></span>
</label>
<!-- Add this script tag before the closing </body> tag -->
<script>
  const toggleSwitch = document.querySelector('#darkModeToggle');
  toggleSwitch.addEventListener('change', function() {
    document.documentElement.classList.toggle('dark', this.checked);
    localStorage.setItem('darkModeEnabled', this.checked);
  });
</script>

Метод 4. Определение системных настроек

<!-- Add this script tag before the closing </body> tag -->
<script>
  // Detect system preferences and set the theme accordingly
  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.documentElement.classList.add('dark');
  }
</script>

Метод 5: переменные CSS

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}
.dark {
  --bg-color: #000000;
  --text-color: #ffffff;
}
body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

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