<MyRusakov.ru />

Финансовая грамотность от А до Я

Финансовая грамотность от А до Я

Данный курс в кратчайшие сроки обучит Вас финансовой грамотности. Эти знания позволят Вам получить, как минимум, серьёзную финансовую стабильность, а, как максимум, финансовую независимость.

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

Помимо самого курса Вас ждёт ещё бесплатный ценный Бонус: «Ранний выход на пенсию». В рамках этого Бонуса Вы узнаете, какой должен быть капитал конкретно в Вашем случае, варианты его получения, а также какие есть стратегии вывода капитала на пенсии и где их можно протестировать.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Как добавить темную тему на сайт в Bootstrap 5?

Как добавить темную тему на сайт в Bootstrap 5?

Доброго времени суток! В данном примере я покажу Вам как просто можно добавить темную тему на сайте в Bootstrap 5. Для этого мы будем использовать немного JavaScript-кода, с помощью которого мы будем переключать тему и сохранять ее как настройки в локальном хранилище браузера , чтобы при следующем посещении сайта, у пользователя была бы установлена та тема, которую он выбрал ранее.

Итак, вот код:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap темная тема</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />

  </head>
  <body>
    <div class="container mt-5">
        <h1>Cмены темы</h1>
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="darkSwitch">
            <label class="form-check-label" for="darkSwitch">Темная тема</label>
        </div>
    </div>

    <div class="container mt-5">
      <div class="row">
        <div class="col-md-4 border bg-warning">Box 1</div>
        <div class="col-md-4 border bg-success">Box 2</div>
        <div class="col-md-4 border bg-danger">Box 3</div>
      </div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
    <script>
          document.addEventListener('DOMContentLoaded', function () {
          const darkSwitch = document.getElementById('darkSwitch');
          const currentTheme = localStorage.getItem('theme');

          if (currentTheme) {
              document.documentElement.setAttribute('data-bs-theme', currentTheme);

              if (currentTheme === 'dark') {
                  darkSwitch.checked = true;
              }
          }

          // меняем тему
          darkSwitch.addEventListener('change', function () {
              if (darkSwitch.checked) {
                  document.documentElement.setAttribute('data-bs-theme', 'dark');
                  localStorage.setItem('theme', 'dark');
              } else {
                  document.documentElement.setAttribute('data-bs-theme', 'light');
                  localStorage.setItem('theme', 'light');
              }
          });
      });
    </script>
  </body>
</html>


В примере выше мы используем атрибут data-bs-theme для применения стилей в зависимости от выбранной темы. При изменении темы также обновляется значение атрибута data-bs-theme у body.

Таким образом, стили, определенные в CSS Bootstrap для соответствующей темы, будут применяться автоматически для всего документа. Еще более интересные примеры есть в моем видеокурсе Программирование на JavaScript с Нуля до Гуру 2.0, который раскроет Вам большинство возможностей языка JavaScript в связке с HTML и CSS.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.