Adu dark quá :3
Chào anh em ??
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:
Code cho a e đây:
CSSởđây:
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 2: Sử dụng CSS Variable để tạo một bảng màu (color palette) mặc định dành cho light mode:
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():
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.
Bước 5: Dùng JavaScript để toggle 2 chế độ là xong ?
Chào anh em ??
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:
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);
}
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');
});
};
