Чтобы реализовать смену на тёмную тему на веб-странице при помощи JavaScript, можно использовать следующий подход:
- Создание тем: сперва необходимо определить два набора стилей для светлой и тёмной тем. Обычно для тёмной темы используют тёмные цвета для фона и шрифта, чтобы достичь хорошей читаемости и визуального эффекта.
- Переключение темы: создайте функцию, которая будет переключать тему. Для этого необходимо изменить класс или стили элементов на странице в зависимости от выбранной темы. Это можно сделать, например, путем добавления или удаления определенных классов у элементов.
- Сохранение выбора пользователя: для того чтобы сохранить выбор темы пользователя при перезагрузке страницы, можно использовать localStorage или cookies. При изменении темы записывайте выбор пользователя и при следующей загрузке страницы применяйте сохраненную тему.
Пример кода для переключения темы:
const toggleTheme = () => {
const body = document.body;
body.classList.toggle('dark-theme'); // добавляем или удаляем класс для темной темы
};
const themeButton = document.getElementById('themeButton');
themeButton.addEventListener('click', toggleTheme);
- Адаптивность: убедитесь, что все элементы на странице хорошо видны и доступны как в светлой, так и тёмной темах. Например, цвета ссылок или кнопок должны быть выбраны так, чтобы они были хорошо видны как на светлом, так и на тёмном фоне.
- Тестирование: перед тем, как разворачивать эту функциональность на продакшене, протестируйте её на различных браузерах и устройствах, чтобы убедиться, что всё работает корректно.
Удачи вам с реализацией тёмной темы на вашем веб-сайте!