Верстка Сайта

Дизайн сайта с использованием темного / светлого режима и переключателя цветов

8/26/2023 08:16:00 PM Просмотров: Загрузка...

Привет, друг, как у тебя дела, сегодня в этом блоге проекта HTML CSS и JavaScript мы собираемся создать веб-сайт с режимом день-ночь (темная / светлая тема) и настроить цветовую тему с помощью HTML CSS и JavaScript.

В этом шаблоне веб-сайта вы можете получить некоторые расширенные функции, такие как переключатель цветов и темный / светлый режим. Нажав на переключатель цветов, вы можете выбрать любой цвет, который вы хотите на своем веб-сайте. Также вы можете изменить тему этого веб-сайта на темный режим.

Дизайн сайта с использованием темного / светлого режима и переключателя цветов

Скачать

В Интернете есть множество веб-сайтов с множеством функций, и, конечно же, мы их создали. Все веб-сайты имеют разные функции и специализацию. Но многие веб-сайты имеют ограниченные цвета, поэтому людям всегда скучно из-за ограниченного цвета на веб-сайте, верно? вот почему в этом проекте HTML CSS и JavaScript мы добавим все функции настройки цветовой темы и, конечно, режим "день-ночь" (light-dark mode) на наш сегодняшний веб-сайт.

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

Весь дизайн пользовательского интерфейса этого веб-сайта выполнен с помощью HTML и CSS-кода, чтобы сделать веб-сайт темным и светлым (режим день-ночь) и переключить цветовую тему веб-сайта, я использовал некоторый JavaScript-код.


HTML КОД:

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Website with Customize Color Theme | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <nav>
    <div class="navbar">
      <div class="logo"><a href="#">CodingLab</a></div>
      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Skills</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="appearance">
        <div class="light-dark">
          <i class="btn fas fa-moon" data-color="#e4e6eb #e4e6eb #24292D #24292D #242526"></i>
        </div>
        <div class="color-icon">
          <div class="icons">
            <i class="fas fa-palette"></i>
            <i class="fas fa-sort-down arrow"></i>
          </div>
          <div class="color-box">
            <h3>Color Switcher</h3>
            <div class="color-switchers">
              <button class="btn blue active" data-color="#fff #24292d #4070f4 #0b3cc1 #F0F8FF"></button>
              <button class="btn orange" data-color="#fff #242526 #F79F1F #DD8808 #fef5e6"></button>
              <button class="btn purple" data-color="#fff #242526 #8e44ad #783993 #eadaf1"></button>
              <button class="btn green" data-color="#fff #242526 #3A9943 #2A6F31 #DAF1DC"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <section class="home-content">
    <div class="texts">
      <h2 class="text">Customize Your Website </h2>
      <h3 class="text">With a <span>Beautiful Colours...</span></h3>
      <p>Lorem ipsum dolor sited and ametvel, nobised, minimali! Quibusdam temporibus, placeate reessed veritatis optio aliquam illum debitis at, perspiciatis consequatur iure vel, quae ratione. Praesentium, at.</p>
      <div class="button">
      <a href="#">Explore Me
      <i class="fas fa-location-arrow"></i></a>
    </div>
  </section>

  <script>
  // Js code to make color box enable or disable
  let colorIcons = document.querySelector(".color-icon"),
  icons = document.querySelector(".color-icon .icons");

  icons.addEventListener("click" , ()=>{
    colorIcons.classList.toggle("open");
  })

  // getting all .btn elements
  let buttons = document.querySelectorAll(".btn");

  for (var button of buttons) {
    button.addEventListener("click", (e)=>{ //adding click event to each button
      let target = e.target;

      let open = document.querySelector(".open");
      if(open) open.classList.remove("open");

      document.querySelector(".active").classList.remove("active");
      target.classList.add("active");

      // js code to switch colors (also day night mode)
      let root = document.querySelector(":root");
      let dataColor = target.getAttribute("data-color"); //getting data-color values of clicked button
      let color = dataColor.split(" "); //splitting each color from space and make them array

      //passing particular value to a particular root variable
      root.style.setProperty("--white", color[0]);
      root.style.setProperty("--black", color[1]);
      root.style.setProperty("--nav-main", color[2]);
      root.style.setProperty("--switchers-main", color[3]);
      root.style.setProperty("--light-bg", color[4]);

      let iconName = target.className.split(" ")[2]; //getting the class name of icon

      let coloText = document.querySelector(".home-content span");

      if(target.classList.contains("fa-moon")){ //if icon name is moon
        target.classList.replace(iconName, "fa-sun") //replace it with the sun
        colorIcons.style.display = "none";
        coloText.classList.add("darkMode");
      }else if (target.classList.contains("fa-sun")) { //if icon name is sun
        target.classList.replace("fa-sun", "fa-moon"); //replace it with the sun
        colorIcons.style.display = "block";
        coloText.classList.remove("darkMode");
        document.querySelector(".btn.blue").click();
      }
    });
  }
 </script>
</body>
</html>
CSS КОД:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
  transition: all 0.3s ease;
}
:root{
  --white: #fff;
  --black: #24292d;
  --nav-main: #4070f4;
  --switchers-main: #0b3cc1;
  --light-bg: #F0F8FF;
}
nav{
  position: fixed;
  height: 70px;
  width: 100%;
  background: var(--nav-main);
  box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
nav .navbar{
  display: flex;
  align-items: center;
  height: 100%;
  max-width: 1300px;
  margin: auto;
  padding: 0 30px;
  justify-content: space-between;
}
nav .navbar a{
  font-size: 30px;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
}
 .navbar .nav-links{
   display: flex;
 }
 .navbar .nav-links li{
   margin: 0 8px;
   list-style: none;
   display: flex;
 }
 .navbar .nav-links a{
   font-size: 18px;
   font-weight: 400;
   opacity: 1;
 }
  .navbar .nav-links a:hover{
    opacity: 1;
  }
 .navbar .appearance{
   display: flex;
   align-items: center;
 }
 .appearance .light-dark,
 .appearance .icons{
  height: 50px;
  width: 50px;
  border-radius: 6px;
  line-height: 50px;
  text-align: center;
  color: var(--white);
  font-size: 20px;
  background: var(--switchers-main);
  cursor: pointer;
}
.appearance .light-dark i,
.appearance .icons i{
  opacity: 1;
}
.appearance .light-dark:hover i,
.appearance .icons:hover i{
  opacity: 1;
}
.appearance .light-dark:hover{
  box-shadow: 0 5px 10px rgba(0,0,0,0.1)
}
.appearance .light-dark i{
  height: 100%;
  width: 100%;
}
 .appearance .color-icon{
   position: relative;
 }
 .appearance .icons{
   width: 70px;
   height: 50px;
   margin-left: 14px;
 }
 .appearance .color-box{
   position: absolute;
   bottom: -133px;
   right: 0;
   min-height: 100px;
   background: var(--white);
   padding: 16px 20px 20px 20px;
   border-radius: 6px;
   box-shadow: 0 5px 10px rgba(0,0,0,0.2);
   opacity: 0;
   pointer-events: none;
 }
 .color-box::before{
   content: '';
   position: absolute;
   top: -10px;
   right: 20px;
   height: 30px;
   width: 30px;
   border-radius: 50%;
   background: var(--white);
   transform: rotate(45deg);
 }
 .color-icon.open .color-box{
   opacity: 1;
   pointer-events: auto;
 }
  .color-icon.open .arrow{
    transform: rotate(-180deg);
  }
 .appearance .color-box h3{
   font-size: 16px;
   font-weight: 600;
   display: block;
   color: var(--nav-main);
   text-align: left;
   white-space: nowrap;
   margin-bottom: 10px;
 }
.appearance .color-box .color-switchers{
   display: flex;
}
.color-box .color-switchers .btn{
  display: inline-block;
  height: 40px;
  width: 40px;
  border: none;
  outline: none;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  background: #4070F4;

}
.color-switchers .btn.blue.active{
  box-shadow: 0 0 0 2px #fff,
              0 0 0 4px #4070F4;
}
.color-switchers .btn.orange{
  background: #F79F1F;
}
.color-switchers .btn.orange.active{
  box-shadow: 0 0 0 2px #fff,
              0 0 0 4px #F79F1F;
}
.color-switchers .btn.purple{
  background: #8e44ad;
}
.color-switchers .btn.purple.active{
  box-shadow: 0 0 0 2px #fff,
              0 0 0 4px #8e44Ad;
}
.color-switchers .btn.green{
  background: #3A9943;
}
.color-switchers .btn.green.active{
  box-shadow: 0 0 0 2px #fff,
              0 0 0 4px #3A9943;
}
.home-content{
  height: 100vh;
  width: 100%;
  background: var(--light-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 60px;
}
.home-content h2{
  color: var(--black);
  font-size: 50px;
}
.home-content h3{
  color: var(--black);
  font-size: 42px;
  margin-top: -8px;
}
.home-content h3 span{
  color: var(--nav-main);
}
.home-content h3 span.darkMode{
  color: var(--black);
}
.home-content p{
  color: var(--black);
  font-size: 16px;
  width: 45%;
  text-align: justify;
  margin: 4px 0 30px 0;
}
.home-content a{
  color: #fff;
  font-size: 20px;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--nav-main);
}
.home-content a i{
  transform: rotate(45deg);
  font-size: 16px;
}
.home-content a:hover{
  background: var(--switchers-main);
}
@media (max-width: 1050px) {
  .home-content p{
    width: 70%;
  }
}
JAVASCRIPT КОД:

<script>
  // Js code to make color box enable or disable
  let colorIcons = document.querySelector(".color-icon"),
  icons = document.querySelector(".color-icon .icons");
  icons.addEventListener("click" , ()=>{
    colorIcons.classList.toggle("open");
  })
  // getting all .btn elements
  let buttons = document.querySelectorAll(".btn");
  for (var button of buttons) {
    button.addEventListener("click", (e)=>{ //adding click event to each button
      let target = e.target;
      let open = document.querySelector(".open");
      if(open) open.classList.remove("open");
      document.querySelector(".active").classList.remove("active");
      target.classList.add("active");
      // js code to switch colors (also day night mode)
      let root = document.querySelector(":root");
      let dataColor = target.getAttribute("data-color"); //getting data-color values of clicked button
      let color = dataColor.split(" "); //splitting each color from space and make them array
      //passing particular value to a particular root variable
      root.style.setProperty("--white", color[0]);
      root.style.setProperty("--black", color[1]);
      root.style.setProperty("--nav-main", color[2]);
      root.style.setProperty("--switchers-main", color[3]);
      root.style.setProperty("--light-bg", color[4]);
      let iconName = target.className.split(" ")[2]; //getting the class name of icon
      let coloText = document.querySelector(".home-content span");
      if(target.classList.contains("fa-moon")){ //if icon name is moon
        target.classList.replace(iconName, "fa-sun") //replace it with the sun
        colorIcons.style.display = "none";
        coloText.classList.add("darkMode");
      }else if (target.classList.contains("fa-sun")) { //if icon name is sun
        target.classList.replace("fa-sun", "fa-moon"); //replace it with the sun
        colorIcons.style.display = "block";
        coloText.classList.remove("darkMode");
        document.querySelector(".btn.blue").click();
      }
    });
  }
 </script>


Tags:
Как создать красивый слайдер для галереи изображений с помощью HTML CSS и JavaScript
Кликандер (clickunder). Рабочий скрипт кликандера
Адаптивный слайдер карточек с использованием HTML, CSS и JavaScript | Swiper Js
Создать простой веб-сайт с использованием HTML и CSS | Бесплатный исходный код
Как создать красивый и адаптивный слайдер изображений с помощью HTML CSS и JavaScript
Как создать адаптивный сайт с фоновым видеослайдом используя HTML CSS и JavaScript
Как создать анимированные вкладки используя HTML CSS и JavaScript
Адаптивный слайдер карточек с дополнительными функциями в HTML CSS и JavaScript
Адаптивные карточки с анимацией наложения
Как создать боковую панель в HTML CSS JavaScript

0 Комментарии

Отправить комментарий