Смена темы на сайте становится все более популярным трендом, особенно с учетом того, что большинство операционных систем и браузеров уже поддерживает темную тему. В этой статье мы рассмотрим, как добавить смену темы (светлая/темная) на ваш сайт.
Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.
1. Создание CSS переменных
Для начала, нам нужно определить основные цвета нашего сайта с использованием CSS переменных. Это позволит нам легко переключаться между светлой и темной темами, меняя только значения переменных.
:root {
--background-color: #ffffff;
--text-color: #000000;
--accent-color: #007bff;
}
body {
background-color: var(--background-color);
color: var(--text-color);
}
a {
color: var(--accent-color);
}
2. Создание темной темы
Теперь создадим темную тему, изменив значения переменных. Для этого используем медиа-запрос prefers-color-scheme, который позволяет определить предпочтения пользователя относительно темы.
@media (prefers-color-scheme: dark) {
:root {
--background-color: #222222;
--text-color: #ffffff;
--accent-color: #00a7ff;
}
}
На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.
3. Добавление переключателя темы
Добавим переключатель темы на наш сайт, чтобы пользователи могли самостоятельно выбирать между светлой и темной темами. Создадим кнопку и добавим обработчик события для переключения темы.
<button id="theme-toggle">Сменить тему</button>
document.getElementById('theme-toggle').addEventListener('click', function () {
document.body.classList.toggle('dark-theme');
});
Теперь добавим CSS для переключения темы с использованием класса dark-theme, который мы добавляем к body.
body.dark-theme {
--background-color: #222222;
--text-color: #ffffff;
--accent-color: #00a7ff;
}
🎉 Теперь у вас есть сайт с поддержкой смены темы! Пользователи могут выбирать между светлой и темной темами, а также сайт будет автоматически переключаться на темную тему, если это предпочтение установлено в настройках операционной системы.
Не забудьте продолжать изучать веб-разработку и углублять свои знания! Вам может быть полезна наша школа по веб-разработке. Удачи!
Добавить комментарий