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

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

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

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

body.dark-mode {
  /* Dark mode styles */
}

3. Переменные CSS. Переменные CSS позволяют определять повторно используемые значения, которые можно легко изменить. Определив цветовые переменные для светлого и темного режимов, вы можете динамически изменять значения в зависимости от предпочтений пользователя или взаимодействия с ним.

body {
  --background-color: white;
  --text-color: black;
}
body.dark-mode {
  --background-color: black;
  --text-color: white;
}
/* Use the variables in your styles */
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

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

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;
toggleButton.addEventListener('click', function() {
  body.classList.toggle('dark-mode');
  if (body.classList.contains('dark-mode')) {
    localStorage.setItem('darkMode', 'enabled');
  } else {
    localStorage.setItem('darkMode', 'disabled');
  }
});
// Check stored preference on page load
const storedPreference = localStorage.getItem('darkMode');
if (storedPreference === 'enabled') {
  body.classList.add('dark-mode');
}