Có gì mới?

Diễn Đàn Cú Đêm

  • Bạn có những câu chuyện thầm kín nhưng không biết kể với ai, bạn buồn phiền vì chuyện tình cảm, gia đình, cuộc sống. Hãy chia sẻ tâm sự của bạn với cộng đồng cú đêm nhé. NGHIÊM CẤM SPAM QUẢNG CÁO.

Hướng dẫn Dark mode every where - Cách thêm dark mode cho website của bạn

zedcoder

Cú Đêm Member
Tham gia
28/8/21
Bài viết
9
Lượt thích
3
Điểm
3
Adu dark quá :3
Chào anh em :cu:
Có rất nhiều cách để xây dựng dark mode bằng cách sử dụng các thư viện, tiêu biểu như Tailwind CSS, ... nhưng đã bao giờ anh em nghĩ tới việc chỉ cần mấy dòng code đơn giản là mình đã có thể tự code dark mode cho trang web của mình chưa? Qua bài viết này mình sẽ hướng dẫn anh em cách tự code ra dark mode một cáchđơn giản nhất :v

Ởđây mình sẽ hướng dẫn theo cách dễ và phổ biến nhất - Dùng biến CSS - CSS Variable

E hèm, trước tiên chúng ta cần basic về HTML, CSS và JS. Và cácbước như sau:

- Bước 1: Anh em cần chuẩn bị một cái giao diện, đương nhiên rồi :))

Nó sẽ trông như thế này:

1630157914981.png



Code cho a e đây:


HTML:
<body>
  <!-- box content -->
  <div class="wrapper">
    <div class="box">
      <h1 class="title">Toggle Dark Mode</h1>
      <p class="text">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor tenetur maiores
        delectus odio quianesciunt obcaecati explicabo repellendus similique neque.
      </p>
    </div>
  </div>
  <!-- theme toggle button -->
  <div id="toggleBtn"></div>
</body>

CSSởđây:

CSS:
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  font-size: 24px;
  color: #1e1e1e;
}
.text {
  font-size: 16px;
  color: #4e4e4e;
}
.wrapper {
  width: 500px;
  text-align: center;
  padding: 48px;
  box-shadow: rgba(100, 100, 110, 0.2) 0px 8px 28px 0px;
  background-color: #fff;
  border-radius: 12px;
}
#toggleBtn {
  width: 80px;
  height: 40px;
  border-radius: 20px;
  background-color: #888;
  box-shadow: rgba(100, 100, 110, 0.2) 0px 8px 28px 0px;
  position: fixed;
  left: 50px;
  bottom: 50px;
}
#toggleBtn::before {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 2px;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.35s;
}
#toggleBtn.active::before {
  transform: translateX(40px);
}

:2lol: Oke bây giờ là tađã có một giao diện basic nhất rồi, cùngqua các cách làm luôn nhá :muaquat:

Bước 1: Thêm một thuộc tính data-theme="light" vào thẻ html dùng để toggle qua lại giữa dark mode và light mode (bạn có thể đặt tên thuộc tính khác nhé).

HTML:
<html lang="en" data-theme="light">

Bước 2: Sử dụng CSS Variable để tạo một bảng màu (color palette) mặc định dành cho light mode:


CSS:
:root {
  --bg-color-primary: #f5f5f5;
  --bg-color-secondary: #fff;
  --bg-toggle-btn: #888;
  --box-shadow: rgba(100, 100, 110, 0.2) 0px 8px 28px 0px;
  --title-color: #1e1e1e;
  --text-color: #4e4e4e;
}

Bước 3: Thay tất cả CSS nào dùng màu đã được set cứng thành các biến thông qua từ khoá var():

CSS:
body {
  /* ... */
  background-color: var(--bg-color-primary);
}
.title {
  /* ... */
  color: var(--title-color);
}
.text {
  /* ... */
  color: var(--text-color);
}
.wrapper {
  /* ... */
  box-shadow: var(--box-shadow);
  background-color: var(--bg-color-secondary);
}
#toggleBtn {
  /* ... */
  background-color: var(--bg-toggle-btn);
  box-shadow: var(--box-shadow);
}
#toggleBtn::before {
  /* ... */
  background-color: var(--bg-color-secondary);
}

Bước 4: Tạo một bảng màu cho dark mode. Bạn chỉ cần thay đổi giá trị của các biến đã tạo ở bước 2. Lưu ý: thuộc tính [data-theme="dark"] phải khớp với thuộc tính ở bước 1.

CSS:
[data-theme='dark'] {
  --bg-color-primary: #18191a;
  --bg-color-secondary: #242526;
  --bg-toggle-btn: #4e4f50;
  --box-shadow: rgba(25, 25, 25, 0.2) 0px 8px 28px 0px;
  --title-color: #f1f2f3;
  --text-color: #d4d5d6;
}

Bước 5: Dùng JavaScript để toggle 2 chế độ là xong 😉

JavaScript:
window.onload = function () {
  const themeBtn = document.getElementById('toggleBtn');
  themeBtn.addEventListener('click', function () {
    // Lấy thuộc tính data-theme
    const root = document.querySelector(':root');
    const isLightMode =
      root.getAttribute('data-theme') === 'dark' ? false : true;
    // toggle theme mode
    if (isLightMode) {
      root.setAttribute('data-theme', 'dark');
    } else {
      root.setAttribute('data-theme', 'light');
    }
    // thay đổi vị trí của button
    this.classList.toggle('active');
  });
};

Thành cmn quả:​

toggle-dark-mode_zqahpw.gif


:2lol: Hê hê thấy dễ chưa =))​

 

Thành viên trực tuyến

Không có thành viên trực tuyến.
shape1
shape2
shape3
shape4
shape7
shape8
Top