02 Июн 2023
3 мин
75

Как создать сайт с поддержкой темной и светлой темы

Узнайте, как создать сайт с поддержкой темной и светлой темы, используя CSS и JavaScript, в этой практической статье для новичков.

Содержание

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

Содержание

  1. Создание основной структуры сайта
  2. Настройка CSS переменных для тем
  3. Создание переключателя тем
  4. Использование JavaScript для переключения тем

1. Создание основной структуры сайта

Для начала создадим простую HTML-структуру сайта:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <script src="theme-switcher.js" defer></script>
    <title>Темная и светлая тема</title>
</head>
<body>
    <header>
        <h1>Мой сайт</h1>
        <button id="theme-switcher">Переключить тему</button>
    </header>
    <main>
        <p>Здесь будет основной контент сайта.</p>
    </main>
</body>
</html>

2. Настройка CSS переменных для тем

Теперь создадим файл styles.css и зададим переменные для светлой и темной тем:

:root {
  --primary-bg-color: #ffffff;
  --secondary-bg-color: #f0f0f0;
  --primary-text-color: #000000;
  --secondary-text-color: #333333;
}

[data-theme="dark"] {
  --primary-bg-color: #1a1a1a;
  --secondary-bg-color: #333333;
  --primary-text-color: #ffffff;
  --secondary-text-color: #cccccc;
}

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

header {
  background-color: var(--secondary-bg-color);
  color: var(--secondary-text-color);
}

Здесь мы используем CSS-переменные для определения цветовых схем для светлой и темной тем. Это позволяет нам легко изменять цвета элементов при переключении темы.

3. Создание переключателя тем

Теперь добавим кнопку для переключения темы на наш сайт. Мы уже добавили кнопку с id="theme-switcher" в наш HTML-файл. Теперь стилизуем ее в styles.css:

button#theme-switcher {
  background-color: var(--secondary-bg-color);
  color: var(--secondary-text-color);
  border: none;
  padding: 8px 16px;
  cursor: pointer;
}

button#theme-switcher:hover {
  background-color: var(--primary-text-color);
  color: var(--primary-bg-color);
}

4. Использование JavaScript для переключения тем

Теперь создадим файл theme-switcher.js для обработки переключения тем при клике на кнопку:

const themeSwitcher = document.getElementById("theme-switcher");

themeSwitcher.addEventListener("click", () =&gt; {
  const currentTheme = document.documentElement.getAttribute("data-theme");
  const newTheme = currentTheme === "dark" ? "light" : "dark";
  document.documentElement.setAttribute("data-theme", newTheme);
});

Здесь мы прослушиваем событие клика на кнопке переключателя темы и при клике меняем атрибут data-theme у элемента <html>. Это приводит к обновлению CSS-переменных, и сайт изменяет свою тему.

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

Добавить комментарий