Как добавить смену темы (светлая/темная) на сайте

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

Станьте веб-разработчиком с нуля за 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;
}

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

Не забудьте продолжать изучать веб-разработку и углублять свои знания! Вам может быть полезна наша школа по веб-разработке. Удачи!