Как создать сайт с использованием темной и светлой темы по умолчанию

Сегодня мы поговорим о том, как создать сайт с возможностью выбора светлой и темной темы по умолчанию. Это становится все более популярным, так как пользователи могут выбирать тему, которая им наиболее комфортна для их глаз.

Основы создания темной и светлой темы

Для создания двух тем на вашем сайте, вам потребуется использовать CSS-переменные и JavaScript. CSS-переменные позволят вам легко управлять значениями цвета и другими стилевыми параметрами, которые будут изменяться при смене темы.

Создание CSS-переменных

Для начала, определите основные цвета и стили для светлой и темной темы, используя CSS-переменные. Например:

:root {
  --background-color: #ffffff;
  --text-color: #000000;
  --link-color: #007bff;
}

[data-theme="dark"] {
  --background-color: #000000;
  --text-color: #ffffff;
  --link-color: #00b0ff;
}

Теперь вы можете использовать эти переменные в вашем CSS:

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

Использование JavaScript для смены темы

Чтобы пользователь мог переключаться между темами, вам нужно использовать JavaScript. Создайте функцию для смены темы и добавьте обработчик событий для кнопки переключения:

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute("data-theme");
  const newTheme = currentTheme === "dark" ? "light" : "dark";
  document.documentElement.setAttribute("data-theme", newTheme);
}

document.getElementById("theme-switcher").addEventListener("click", toggleTheme);

Установка темы по умолчанию

Чтобы определить тему по умолчанию, вы можете использовать предпочтения пользователя по осветлению системы. Воспользуйтесь функцией window.matchMedia для определения предпочтений пользователя и установки соответствующей темы:

function setDefaultTheme() {
  const userPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
  document.documentElement.setAttribute("data-theme", userPrefersDark ? "dark" : "light");
}

setDefaultTheme();

Теперь ваш сайт будет автоматически определять предпочтения пользователя и устанавливать соответствующую тему.

Заключение

Создание сайта с возможностью выбора светлой и темной темы по умолчанию — это отличный способ улучшить пользовательский опыт и предоставить пользователям больше контроля над тем, как они видят ваш контент. В этой статье мы рассмотрели, как использовать CSS-переменные и JavaScript для создания переключателя тем и установки темы по умолчанию на основе предпочтений пользователя.