<header>
  <h2 class="title">Збереження налаштувань теми</h2>
  <p class="description">Виберіть тему для сайту і вона буде збережена.</p>
</header>
<main>
  <div class="result">
    <div class="theme-toggle">
      <label for="themeSwitch">Темна тема:</label>
      <input type="checkbox" id="themeSwitch" />
    </div>
    <button id="applyButton">Застосувати налаштування</button>
    <div id="message" class="message"></div>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
  transition: background-color 0.3s, color 0.3s;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.theme-toggle {
  margin-bottom: 15px;
}

.message {
  font-style: italic;
  color: green;
}

// Отримуємо елементи з DOM
const themeSwitch = document.getElementById("themeSwitch");
const applyButton = document.getElementById("applyButton");
const message = document.getElementById("message");

// Перевіряємо наявність збереженої теми в локальному сховищі
if (localStorage.getItem("darkTheme") === "true") {
  document.body.style.backgroundColor = "#333";
  document.body.style.color = "#fff";
  themeSwitch.checked = true;
} else {
  document.body.style.backgroundColor = "#fff";
  document.body.style.color = "#000";
  themeSwitch.checked = false;
}

// Функція для збереження налаштувань у локальному сховищі
function saveThemeSetting() {
  const isDarkTheme = themeSwitch.checked;
  localStorage.setItem("darkTheme", isDarkTheme);
  
  // Оновлюємо стиль на сторінці
  if (isDarkTheme) {
    document.body.style.backgroundColor = "#333";
    document.body.style.color = "#fff";
    message.textContent = "Темна тема застосована!";
  } else {
    document.body.style.backgroundColor = "#fff";
    document.body.style.color = "#000";
    message.textContent = "Світла тема застосована!";
  }
}

// Прив'язуємо подію до кнопки
applyButton.addEventListener("click", saveThemeSetting);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.