Переключение темного/светлого режима с помощью CSS и JavaScript

В этом посте я покажу вам, как можно легко создать переключатель темного/светлого режимов с помощью CSS, JavaScript и немного Bootstrap 5.
Я покажу вам все по шагам, чтобы вы могли легко понять.

Шаг 1 — (HTML-код)

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css' integrity='sha512-XWTTruHZEYJsxV3W/lSXG1n3Q39YIWOstqvmFsdNEEQfHoZ6vm6E9GK2OrF6DSJSpIbRbi+Nn0WDPID9O7xB2Q==' crossorigin='anonymous' />
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="container">
      <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-lg-6">
          <div class="form-switch text-center my-5">
            <input type="checkbox" id="mode" class="form-check-input">
            <label for="mode" class="form-check-label"></label>
          </div>
          <div class="card shadow">
            <div class="card-header">
              <div class="fs-4 fw-bold">Dark Mode</div>
            </div>
            <div class="card-body">
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Vitae, dolorum. Nostrum, quisquam? Sit assumenda incidunt asperiores facere voluptatem nemo consectetur. Atque, expedita. Perferendis placeat officia iusto! In repellendus esse laboriosam?</p>
            </div>
            <div class="card-footer d-flex justify-content-evenly">
              <button class="btn btn-primary">Primary Button</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>

</html>
Вход в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше HTML-коде вы можете видеть, что я использую Bootstrap 5 для оформления карточки в центре страницы. Также я подключил файл style.css в теге head и файл script.js в конце закрывающего тега body. В последующих шагах мы увидим коды обоих файлов.

Шаг 2 — (Код CSS)

:root,
:root.light {
    --color-bg: #ffffff;
    --color-fg: #000000;
    --card-bg-color: #fafafa;
}
Вход в полноэкранный режим Выход из полноэкранного режима

В приведенных выше кодах вы можете видеть, что я использую селектор :root и :root.light для хранения светлого фона и темного цвета переднего плана. Селектор :root используется по умолчанию, поэтому, когда JavaScript ничего не устанавливает, светлый режим будет применен ко всем элементам. Аналогично я буду использовать селектор :root.dark для хранения темного фона и светлого цвета переднего плана, как показано ниже:

:root.dark {
    --color-bg: #263238;
    --color-fg: #ffffff;
    --card-bg-color: #607d8b;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Далее мы применим переменные CSS к элементу, в котором мы хотим применить цвета, для этого мы используем функцию CSS var, как показано ниже:

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

.card {
    background-color: var(--card-bg-color) !important;
}
Вход в полноэкранный режим Выйти из полноэкранного режима

В приведенных выше кодах видно, что я использовал функцию var CSS для задания фонового и переднего цветов элементам.

Таким образом, окончательные коды файла style.css следующие:

:root,
:root.light {
    --color-bg: #ffffff;
    --color-fg: #000000;
    --card-bg-color: #fafafa;
}
:root.dark {
    --color-bg: #263238;
    --color-fg: #ffffff;
    --card-bg-color: #607d8b;
}

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

.card {
    background-color: var(--card-bg-color) !important;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Шаг 3 — (Код JavaScript)

В script.js сначала мы установим флажок переключателя, используя приведенный ниже код:

const modeBtn = document.getElementById('mode');
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь используем событие onchange на кнопке переключения:

modeBtn.onchange = (e) => {
  if (modeBtn.checked === true) {
    document.documentElement.classList.remove("light")
    document.documentElement.classList.add("dark")
    window.localStorage.setItem('mode', 'dark');
  } else {
    document.documentElement.classList.remove("dark")
    document.documentElement.classList.add("light")
    window.localStorage.setItem('mode', 'light');
  }
}
Войти в полноэкранный режим Выход из полноэкранного режима

В приведенном выше коде вы можете видеть, что я проверяю, если флажок checked === true, то я сначала удаляю класс *light * из тега html с помощью documentElement, а затем добавляю класс *dark *, также я использую localStorage для хранения типа *mode * для *персистенции * режима в браузере. Аналогично, когда флажок снят, я удаляю класс *dark * из тега html и добавляю класс *light *, а также изменяю значение localStorage *mode * на light.
Теперь, если вы нажмете кнопку переключения, вы увидите, что к вашей веб-странице применяется темный режим, а если вы снова нажмете кнопку переключения, то к вашей веб-странице будет применен светлый режим.
Все работает нормально, но это происходит до тех пор, пока вы не обновите/перезагрузите страницу. Когда вы перезагружаете страницу, она снова возвращается к теме по умолчанию, т.е. к светлому режиму, теперь как сохранить это, поэтому в приведенном выше коде вы можете видеть, что я использовал localStorage для хранения значения типа режима в локальном хранилище броузера. Далее мы рассмотрим, как использовать значение localStorage для сохранения любой примененной темы.

const mode = window.localStorage.getItem('mode');
Вход в полноэкранный режим Выход из полноэкранного режима

Сначала мы получим значение режима из localStorage, используя приведенный выше код.

if (mode == 'dark') {
  modeBtn.checked = true;
  document.documentElement.classList.remove("light")
  document.documentElement.classList.add("dark")
}

if (mode == 'light') {
  modeBtn.checked = false;
  document.documentElement.classList.remove("dark")
  document.documentElement.classList.add("light")
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь в приведенных выше кодах вы можете видеть, что я проверяю условие, что если mode == 'dark', то добавьте светлый класс в тег html и удалите темный класс. А также переводим флажок в состояние checked. Аналогично мы сделаем и для светлого режима.

Ниже приведен окончательный код файла script.js:

const modeBtn = document.getElementById('mode');
modeBtn.onchange = (e) => {
  if (modeBtn.checked === true) {
    document.documentElement.classList.remove("light")
    document.documentElement.classList.add("dark")
    window.localStorage.setItem('mode', 'dark');
  } else {
    document.documentElement.classList.remove("dark")
    document.documentElement.classList.add("light")
    window.localStorage.setItem('mode', 'light');
  }
}

const mode = window.localStorage.getItem('mode');
if (mode == 'dark') {
  modeBtn.checked = true;
  document.documentElement.classList.remove("light")
  document.documentElement.classList.add("dark")
}

if (mode == 'light') {
  modeBtn.checked = false;
  document.documentElement.classList.remove("dark")
  document.documentElement.classList.add("light")
}
Вход в полноэкранный режим Выход из полноэкранного режима

Ниже приведены скриншоты:

Оцените статью
devanswers.ru
Добавить комментарий